One of the biggest differences between Vite and ng serve is in the way they serve an application during development. ng serve starts a development server and watches the project files for any changes. When a change is detected, ng serve recompiles the project and reloads the web page in the browser. This process can take some time, especially for larger projects, as the entire application needs to be rebuilt every time a change is made.
On the other hand, Vite uses a different approach to serving an application during development. Vite starts a development server and serves the application directly from the source code, without having to compile it first. This means that changes are updated much faster, as Vite only needs to rebuild the changed modules and update the browser without reloading the entire page. Vite also supports hot module replacement, which means that changes can be applied in real-time without having to refresh the browser.
In this article, we will explore how to run an Angular project with Vite.
Step 1: Create an Angular project
We need to create an Angular project using the Angular CLI. Open a terminal window and run the following command:
ng new my-app --skip-install
The --skip-install flag tells the CLI not to install the project dependencies, as we will be using Vite to manage them.
Step 2: Install Vite
Next, we need to install Vite. Open a terminal window and navigate to the my-app directory. Then, run the following command:
npm install vite --save-dev
This will install Vite as a dev dependency for our project.
Step 3: Configure Vite
Now we need to configure Vite to work with our Angular project. Create a new file named vite.config.js in the root directory of the project, and add the following code:
import { defineConfig } from 'vite';
export default defineConfig({ build: { target: 'es2015', outDir: 'dist', assetsDir: 'assets', }, server: { port: 4200, },});
This configuration file tells Vite to output the build files to the dist directory, and the assets (such as images and fonts) to the assets directory. It also sets the server port to 4200, which is the default port used by Angular.
Step 4: Update the package.json file
We need to update the package.json file to use Vite as the build tool for our project. Open the package.json file and replace the scripts section with the following:
"scripts": { "start": "vite", "build": "ng build --prod"}
This tells npm to use Vite to start the development server when we run npm start, and to use the Angular CLI to build the project for production when we run npm run build.
Step 5: Start the development server
Finally, we can start the development server by running the following command:
npm start
This will start the development server using Vite, and we can now access our Angular application by navigating to http://localhost:4200 in a web browser.
In conclusion, by using Vite, we can speed up our development builds and improve the performance of our web application.
