Vite Development Server

How the Development Server Works

Vite’s development server is designed to be incredibly fast and efficient. It serves your source files directly via native ES modules, which allows for instant server start times. Unlike traditional bundlers that pre-bundle the entire project, Vite only transforms and serves the files you request. This means that the initial load is almost instantaneous, regardless of the size of your project.

Hot Module Replacement (HMR)

One of the standout features of Vite is its Hot Module Replacement (HMR) capability. HMR allows you to see changes in your application immediately without refreshing the entire page. This greatly enhances the development experience by providing real-time feedback as you code.

Configuration Options

Vite offers various configuration options to customize the development server to fit your needs. You can modify the server settings in the vite.config.js file. Here are some common configurations:

Port: Change the port number on which the development server runs.
Open: Automatically open the browser when the server starts.
Proxy: Set up a proxy for API requests during development.

Example: Configuring Vite Development Server

Let’s look at an example of how to configure the Vite development server in the vite.config.js file.

javascript

	// vite.config.js
	export default {
	  server: {
	    port: 3000, // Change the port number (default is 3000)
	    open: true, // Automatically open the browser on server start
	    proxy: {
	      // Set up a proxy for API requests
	      '/api': {
	        target: 'http://localhost:5000',
	        changeOrigin: true,
	        rewrite: (path) => path.replace(/^\/api/, '')
	      }
	    }
	  }
	};

Comments:

javascript

	// vite.config.js
	export default {
	  server: {
	    port: 3000, // Change the port number for the development server (default is 3000)
	    open: true, // Automatically open the browser when the server starts
	    proxy: {
	      // Set up a proxy to redirect API requests to a different server
	      '/api': {
	        // Proxy all requests starting with /api
	        target: 'http://localhost:5000', // Target server for the proxy
	        changeOrigin: true, // Change the origin of the host header to the target URL
	        rewrite: (path) => path.replace(/^\/api/, '') // Rewrite the URL path, removing /api
	      }
	    }
	  }
	};

Hot Module Replacement (HMR) Example

To demonstrate HMR, let’s create a simple counter application. We’ll show how changes to the counter logic are reflected instantly without a full page reload.

Step-by-Step Guide

Create a Simple Counter: Create an index.html and main.js file.
Start the Development Server: Run npm run dev.
Modify the Counter Logic: See the changes instantly.

index.html

html

	<!DOCTYPE html>
	<html lang="en">
	  <head>
	    <meta charset="UTF-8" />
	    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	    <title>Vite Counter Example</title>
	  </head>
	  <body>
	    <div id="app">
	      <button id="counter">Count: 0</button>
	    </div>
	    <script type="module" src="/src/main.js"></script>
	  </body>
	</html>

main.js

javascript

	// src/main.js
	let count = 0;
	
	// Select the counter button element
	const counterButton = document.getElementById('counter');
	
	// Add a click event listener to the button
	counterButton.addEventListener('click', () => {
	  count += 1;
	  counterButton.textContent = `Count: ${count}`; // Update the button text with the new count
	});

Comments:

html

	<!-- index.html -->
	<!DOCTYPE html>
	<html lang="en">
	  <head>
	    <meta charset="UTF-8" />
	    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	    <title>Vite Counter Example</title>
	  </head>
	  <body>
	    <!-- Main application container -->
	    <div id="app">
	      <!-- Counter button -->
	      <button id="counter">Count: 0</button>
	    </div>
	    <!-- Include the main JavaScript file -->
	    <script type="module" src="/src/main.js"></script>
	  </body>
	</html>

javascript

	// src/main.js
	let count = 0; // Initialize the count variable
	
	// Select the counter button element
	const counterButton = document.getElementById('counter');
	
	// Add a click event listener to the button
	counterButton.addEventListener('click', () => {
	  count += 1; // Increment the count
	  counterButton.textContent = `Count: ${count}`; // Update the button text with the new count
	});

When you modify the JavaScript file while the development server is running, Vite’s HMR will update the counter logic instantly, and you will see the changes reflected without refreshing the page.