Welcome back to part two of my transitioning away CRA series where I talk about why you should stop using CRA and use another build tool instead.
If you haven’t seen part 1 yet, go check it out!
In this article, I’ll talk about one such build tool, Vite, and give you a step-by-step tutorial on initializing and developing your React application using Vite.
So, let’s get started!
Initialization
To initialize a project with Vite, start by running the respective commands in the terminal. I’ll be using NPM in this tutorial, but Yarn works fine too!
# With NPM
npm create vite@latest# With Yarn
yarn create vite
You can also include a path as an argument for the command if you want Vite to be initialized in a specific folder. For example, if you’ve already created a folder for your project, you can run
npm create vite@latest ./to tell Vite to initialize a new project in the current folder, indicated by ./.
Then, follow Vite’s prompts as it guides you through its initialization process. Use arrow keys to navigate through all the options, and select React as our framework!
If this was your first time working with Vite, you’ll notice that Vite doesn’t install its dependencies automatically.
But that’s a feature, not a bug!
Breaking up the installation and initialization allows us to start working on our project as soon as Vite finishes initializing: meaning that we can edit our files while our dependencies are installing, unlike in CRA where we have to wait for the full process to complete first. Pretty neat, right?
(Vite’s dependency installation process is so fast that it barely makes a difference on most internet connections, but it’s a nice feature to have!)
Installing Dependencies
Installing our dependencies is as simple as following the instructions on the screen.
If Vite initialized your project in a separate directory, navigate there with cd and then run npm install to install all dependencies. If you initialized Vite in the current directory, simply run npm install !
Previewing Your Application / Starting a Development Server
To preview our website, run the following command in the terminal:
npm run devThis tells Vite to start up a development server so that we can preview our application.
Navigate to the URL that the website is hosted at, and voila! We’ve just created our first React application using Vite!
Now, some things you should know about Vite.
Vite Project Structure
As you may have already noticed, Vite’s project structure is quite a bit different from CRAs.
For starters, we no longer have a public/ folder where we have our assets and our index.html.
Instead, index.html is placed in the project root directory, and all assets are stored in the src/ folder. It may feel a bit strange and unorganized, but its intentional on Vite’s part.
Though it’s suggested that index.html should remain in the project root directory, we’re nonetheless free to create our own public/ folder where we can store our various assets, including static images, favicons, robots.txts and more.
Note that when we reference our public assets from another file, we should reference the asset as if it were in our root directory, like so:
(We have to reference our assets from the project root because when we build our project, all the assets in our public folder will be copied over to the root directory, and the compiler acts as if all our public assets are already in project root.)
More information about the public/ folder can be found here.
To JSX or Not to JSX…
Another thing to note about Vite: It’s no longer adequate for us to use the .js extension for files that contains JSX.
This is because the bundler that Vite uses (ESBuild) makes an effort to differentiate between JS and JSX files, and labeling JSX files with the .js extension will cause unnecessary slowdowns during the compilation process.
This is a common mistake that people tend to make, but don’t worry, you’ll get used to it!
Building and Previewing with Vite
Along with npm run dev to start a development server and preview changes, there are two other commands you should know:
npm run build builds and bundles our React application for a production environment. When we run this command, Vite will build our project, minify everything, and put the resulting code in the dist/ folder.
To preview our newly builded project, we can use the npm run preview command. It’s always helpful to get one last look at our project and make sure nothing gets broken during the compilation process!
Conclusion
And… that about wraps up this short tutorial on Vite!
I hope y’all enjoyed this tutorial and learned something new: specifically, a new and better way to create and develop your React application.
If you still have some questions about Vite or want to learn more about everything that it offers, don’t be afraid to check out Vite’s website and documentation!
Till next time, bye! 👋
