Getting Started with Vite

We will try to set up a js project using vite, You can see that in the repository below

  • Clone the above repository
  • Navigate to the project directory, We have created a simple counter app using vanilla js.
  • Explore the project structure
    vite-starter/
    ├── js
    │   ├── counter.js
    │   └── main.js
    ├── public
    ├── .gitignore
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── style.css
    

index.html: The entry HTML file. The templates go here
package.json: Contains project metadata and dependencies
js/main.js: The main JavaScript file where your app logic resides. You can import other files here too
style.css: A sample CSS file for styling, We will discuss more about styling later

Developing with Vite

Now, let's start the development server and see Vite in action:

  • Start the development server
    npm run dev
    Vite will start a development server and open your app in the default browser. You'll notice how fast it starts, thanks to Vite's use of esbuild for lightning-fast module bundling and transpilation.
  • Hot Module Replacement (HMR) , One of Vite's standout features is instant Hot Module Replacement (HMR). Try editing js/main.js and save the changes. You'll see the updates reflected immediately in the browser without a full page reload.
  • Building for Production ,Building your project for production is straightforward with Vite. It optimizes your application using Rollup, resulting in a highly efficient bundle.
    npm run build
  • Vite will generate the optimized production-ready files in the dist folder. To preview the production build locally:
    npm run preview
    This command starts a local server and serves the files from the dist directory, allowing you to see how your app performs in a production environment.

If you go to the dist folder now , you will find the minified version of main.js , counter.js and style.css file inside the assets folder.

npm run build

The question rises that what actually happens when you run this command? ,Post running this command , Vite performs the following steps :-

  • Transpiling and Bundling: Vite uses esbuild to transpile and bundle your JavaScript and CSS files.
  • Minification: The bundled files are minified to reduce their size.
  • Asset Handling: Vite processes and copies static assets (like images) to the dist folder.

After the build process, your dist folder will look something like this:

dist/
├── index.html
├── assets/
│   ├── main.abc123.js
│   ├── counter.def456.js
│   ├── style.ghi789.css

These files are minified versions of their synonym files and the index.html file has cript and link tags pointing to the minified assets, If you open that file , you can find link tags mentioning the above css file and script tags mentioning the js files

When you build your Vite project, the original JavaScript and CSS files are processed, optimized, and minified into the dist folder. These minified files are much smaller and more efficient for browser loading, leading to faster performance for your application in a production environment. The dist folder is then ready for deployment to your web server.

Divyanshu Kumar