Skip to content
On this page

Setup the project

Template Highlights

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

  • ES6 imports and support
  • 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 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 -d my-project

# Go to the newly created folder
cd my-project


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

Project overview

├── 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:

# using npm
npm install

# using pnpm
pnpm install

# using yarn
yarn install

Start in development mode

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

# using npm
npm run dev

# using pnpm
pnpm dev

# using yarn
yarn 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


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

All Rights Reserved