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 release-mistral-v1.1.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

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:

# 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 vitejs.dev