This content originally appeared on DEV Community and was authored by Keerthi
I have always relied on the npm command create-react-app to create the starter files for any React.js project. It does what it says on the tin, and creates all my starter template files, setups a local dev server and dev environment. Over the years I have become a little impatient because it takes around 3-4 minutes to setup a basic barebones app. Recently I have come to know about a faster way to setup React apps, which also gives you all the useful features that create-react-app gives you too. It is using a tool called Vite. Vite is another build tool like Webpack (create-react-app uses Webpack under the hood, read more here).
In this post I will take you through the steps on how to install React.js app using Vite and point out some differences too. You can also see a video on the comparison of the two installation methods. In the Video below, You will discover that the installation time, plus time to run local server is astonishingly fast for Vite.
So how do we start the ball rolling
You can refer to the Vite docs, From there, you can choose from a few methods to start off your installation. We are going to use the template method. In their docs, the listed methods are:
#npm 6.x
npm init vite@latest my-vue-app --template vue
#npm 7+, extra double-dash is needed:
npm init vite@latest my-vue-app -- --template vue
#yarn
yarn create vite my-vue-app --template vue
But these commands are for installing Vue.js, just as side note, Vite was originally developed for Vue.js but has been modified to use with other frameworks including React.js. For our case, all we need to do is replace the keyword after '--template', from vue to react. And dont forget to replace the app name to your choosing. So assuming that we are running npm version 6.x, we will run the following command:
npm init vite@latest my-react-app --template react
Then we will cd into our directory and install the remainder of the starter files and run the dev server:
cd my-react-app
npm install
npm run dev
If you goto the browser. You should see a React logo with a counter and a button, as below.
Directory structure of the our newly created app
The thing to note here is that, main.js is the root file that imports/loads App.js. There is also a new file called vite.config.js, this is circled in the above image. This file is used to turn on and set new features for your build process. I will come to this file in the next section below.
One last thing about importing files...
I have noticed that out the box this setup does not allow for absolute paths. With create-react-app, you can do
import x from 'components/x'
. With Vite, you have to do the relative pathing, like
import x from '../../../'
.
To fix this we need to change the vite.config.js file, which looks like this:
import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh()]
})
we need to add an extra setting to resolve the path, this change will go after the "plugins" settings. It will end up looking like this after the change:
import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [reactRefresh()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
})
and this will allow us to refer to paths as
import x from '@/component/x'
!IMPORTATNT to prefix with '@' in path.
conclusion
I did find Vite impressingly fast. It took me 55 secs to install and run on local server. I have not done much heavy development using Vite but it looks promising. It is too early for me to say if I will use it on any bigger projects in the future. There are other methods of installing React.js using Vite, these methods are maintained by other communities. Please leave comments on your experiences too.
This content originally appeared on DEV Community and was authored by Keerthi
Keerthi | Sciencx (2021-09-22T16:18:16+00:00) Create react app vs Vite. Retrieved from https://www.scien.cx/2021/09/22/create-react-app-vs-vite/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.