Setup the project

Template Highlights

This template supports Alpine JS v3.x, Tailwind CSS v3.x and Vite v4.x. Currently available features :

• Extensive Tailwind configuration
• Flat file templating with vite-plugin-handlebars
• Thousands of icons with vite-plugin-purge-icons

Setting up

Start by creating a new folder (e.g. my-project) and extract the release-mistral-v1.3.0.zip archive content into it.

# Create a new folder
mkdir my-project

# Extract the quickstarter archive (replace v1.0.0 with the actual version number)
unzip release-mistral-v1.0.0.zip -d my-project

# Go to the newly created folder
cd my-project

Initialize a git repository

We recommend to initialize a new git repository for your project and create your first commit at this point.

# Create a new folder
git init

# Add all files to git
git add .

# Create your first commit
git commit -m "Initial commit"

WARNING

Remember to make your repository private if you fork or create a new git repository, as the template is a paid product.

Project overview

my-project/
├── public/                 # static files (images, robots.txt, favicon.ico, etc.)
├── src/
│   ├── layouts/            # layout HTML chunks
│   ├── partials/           # HTML partial chunks
│   ├── root/               # Project root
|   │   ├── postcss/        # Postcss files
|   │   ├── scripts/        # Alpine JS components and main entry
|   │   ├── *.html          # HTML pages
├── package.json            # project dependencies
├── postcss.config.js       # PostCSS css configuration
├── tailwind.config.js      # tailwind css configuration
└── vite.config.js          # vite plugins and configuration

This is an overview of the most important files and folders in your project. Other files are for linters, testing, docker, etc.

Dependencies installation

Install the project dependencies by running one of the following commands:

pnpm install

Start in development mode

To start the development server, run one of the following commands:

pnpm dev

This will run the dev:vite script from the package.json file. The dev:vite script starts the frontend (vite) server. Vite is the build tool that we use to compile the frontend code. It replaces webpack and vue-cli, used in the vue 2 ecosystem.
Read more about it on vitejs.dev

TIP

• Access the Mistral frontend in your browser at http://localhost:3000/