Scaffolding a new React project was historically a convoluted multistep process that involved setting up a JavaScript build toolchain. Nowadays, there are several build tools at our disposal, so we can stop worrying about most of the complicated systems of modern front-end development and focus on writing React code.
In this guide, we will be using Vite, a lightweight build tool that let’s you start building modern web projects by providing a development server and a lightning-fast build command. The development server makes use of modern browser support for ES modules, with Hot Module replacement which will instanly load any codebase changes into the browser as well as a build command (using Rollup) preconfigured to create highly optimized code.
Vite was originally developed for Vue, but can also create React projects out of the box. By the end of this guide, you’ll have a running React app that you can use as the foundation for your next application so that you can use the latest JavaScript features and a modern build setup with sensible defaults that are highly extensible via Plugins.
To follow along, you will need Node ≥ 14.00 and npm ≥ 5.6 on your machine.
First, let’s create a new application by running the Vite tool from the command line. We will be using the npm package manager to install and run the application.
Run the following command in your terminal to kick off a new Project:
$ npm create vite@latestThis command will run the create-vite executable which will configure necessary tools to scaffold our application and start a series of command line prompts to configure our project.
You will first be prompted to provide a name for your project, in our case we will be using codepath-vite:
? Project name: › codepath-viteNext, we need to select a framework. We will be selecting react
? Select a framework: › - Use arrow-keys. Return to submit.
vanilla
vue
❯ react
preact
lit
svelteAfter selecting React as our framework, you are prompted to select a variant type (JavaScript or TypeScript). Let’s select react which defaults to JavaScript.
? Select a variant: › - Use arrow-keys. Return to submit.
❯ react
react-tsOnce the above is selected, the tool will create a directory named codepath-vite that holds the base code and you will see an output similar to:
% npm create vite@latest
✔ Project name: … codepath-vite
✔ Select a framework: › react
✔ Select a variant: › react
Scaffolding project in /**your-file-path**/codepath-vite...
Done. Now run:
cd codepath-vite
npm install
npm run devOur new project is now set up! Let’s change to the new directory:
$ cd codepath-viteAnd use the npm command to install the dependencies:
$ npm installVite provides a simple directory structure for our React project, with only the files you need to build your app.
.
├── node_modules/
├── src/
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
└── vite.config.jsLet’s go over them briefly:
node_modules/ contains all the third-party JavaScript packages used by the application. You will rarely interact with this directory.src/ contains your React app JavaScript code. Most of your work will be in this directory.gitignore default git ignore file specific to React apps. The directories and files ignored tend to be larger ones that do not need to be in source control.index.html contains the base HTML which is the entry point to your applicationpackage.json contains metadata about your project, such as it’s name, version number and dependencies. It also contains scripts that you will use to run & build your projectpackage-lock.json file generated after we run npm install. This file will be used by npm to make sure the packages match an exact version.vite.config.js Vite config file to extend functionality with its Plugin API and JavaScript API
index.html page templateThe index.html file is the root of your React application. This is the main file being served when a browser request your app.
The HTML is a short page template with relevant tags that you can later customize to better describe your app.
Vite treats index.html as source code and part of the module graph. It resolves <script type="module" src="..."> that references your JavaScript source code. Even inline <script type="module"> and CSS referenced via <link href> also enjoy Vite-specific features.
src/main.jsx entry pointWhen we look at a Vite project, the src/main.jsx is React JavaScript entry code.
The file has the following line:
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)This code tells React to find an element with an id of root within your HTML and render the enclose element there. <App /> is your root component element, and everything branches from there.
Beyond this, you also see a few imports, like the index.css, which tells Vite tool to include that CSS code as well.
To verify that our project is working, let’s start the development server.
Inside our codepath-vite directory, run the following:
$ npm run devYou will then see the following running output
vite v2.9.9 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 227ms.Next, open your browser and visit http://localhost:3000/. You should see a sample React project running on port 3000 . If so, we have successfully scaffolded our React Project with Vite.
Vite provides some built-in commands within our npm script that uses vite package
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},npm run dev Runs the app in development mode by starting the development server on http://localhost:3000
npm run build Builds a production ready app into the dist directorynpm run preview Runs the dist build app for local testing.