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
TIP
We recommend to initialize a new git repository for your project and create your first commit at this point.
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
TIP
- Access the Mistral frontend in your browser at
http://localhost:3000/