In front-end development, there are multiple solutions for building a website. While Next.js and Remix are excellent choices, their main focus is on server-side rendering and building full-stack applications. However, in a world with thousands of SPAs (single-page applications) in production and the deprecation of the popular starter create-react-app, there is a clear winner for building modern, faster, and more efficient applications: Vite.
Vite is specifically designed to excel in creating single-page applications with React. Created by Evan You, the developer behind Vue.js, Vite stands out by utilizing native ES Modules in the browser. This approach was previously not possible due to the lack of support in modern browsers, which is why developers were accustomed to “bundling” applications to run in the browser.
While there are other major players like webpack, Rollup, and Parcel, Vite surpasses them in terms of speed, developer experience, build times, and HMR (hot module replacement).
This guide will help you get started with Vite, how to set up a new React App, taking a look at the Vite features and how Vite can improve the development flow.
Setting up a New React Project with Vite
- If you don’t have Node.js installed you will need it for this guide, let start there, you can download Node.js from its official website nodejs.org or using a tool like nvm
- Create a new Vite Project: open your terminal and run the following command to create a Vite project using the react template:
npm create vite@latest my-react-app -- --template react
This will initialize our project with all the files needed, my-react-app can be changed to any other name you want to give to this project.
- After the previous command is finished, let’s navigate to our project directory:
cd my-react-app - Install dependencies running:
npm install - Then start the development server with:
npm run dev - If everything goes well, open your browser, and go to
http://localhost:5173and you can see the app running
Now that you have your Vite project up and running is time to explore some of the nice features it offers:
Vite features
Hot Module Replacement (HMR)
Go to src/App.jsx and make some changes to the text or add a new button, you can see the change right away in the browser, as Vite updates your modules instantly. This is possible thanks to the react plugin that was already added on our previous steps that specifically works for React apps.
Optimized Build Process
When it is time to move to production, Vite uses Rollup under the hood building the application highly optimized and automatically handles code splitting for us, optimizing assets too, making your app smaller and faster for production. To build the app just run:npm run build
Simplified Configuration
In the early days of webpack it was very difficult to keep up and maintaining the different configurations needed to have everything up to date, with Vite is pretty straight-forward as most sites requires minimal configuration and can do just fine with the defaults, in any case you can always modify vite.config.js file according to your needs, you can take a look at the different options for our config file here: https://vitejs.dev/config/
Built-in Support for Modern JS Features
One great thing about Vite, is that it supports the latest JavaScript features out-of-the-box, you can use the latest ES syntax and Typescript. This is a good thing to have you developer environment always up to date with modern web standards.
Just one last thing to have in mind is that if your file returns JSX syntax (a React component for example) you need to create the file with .jsx extension.
Now you have the basic understanding on how to set up and get started with a React SPA and use Vite in your next project. You’ll discover even more ways on how to enhance your development flow along the way.
Author: Alex Varela