Vite

Learn how to use the npm scripts included with Mizzle to build, develop, and preview your project using Vite.

Note: This setup is optional and intended for users who want a faster and more modern development workflow. If you prefer working with static HTML/CSS files only, you may skip this section.

Vite is a modern front-end build tool that provides a fast development server with hot module replacement (HMR) and optimized production builds. Follow the steps below to get started.

1. Install Node.js

To use Vite, you need Node.js installed on your system. Please download and install the LTS version of Node.js.

Download Node.js

2. Install project dependencies

Open your terminal and navigate to the project root directory where package.json is located.

npm install

This command installs all required dependencies and creates the node_modules folder.

3. Start development server

Run the following command to start the Vite development server. It includes live reload and hot module replacement.

npm run dev

After running the command, open your browser and visit: http://localhost:5173

4. Build for production

When your project is ready for deployment, run the build command below.

npm run build

This will generate optimized production files inside the dist folder.

5. Preview production build (optional)

You can preview the final production build locally using:

npm run preview

6. Format source files (optional)

To automatically format your source files using Prettier, run:

npm run format

This formats HTML, CSS, JavaScript, and template files inside the src directory.