React development has come a long way, and the choice of build tools plays a crucial role in shaping the developer experience. In this article, we will embark on a journey to explore the creation and deployment of a React Vite app, comparing it with the widely used Create React App. Additionally, we'll leverage the power of Vercel to host our lightning-fast React application seamlessly.
Introduction
As the demand for performant web applications continues to rise, developers are constantly seeking tools to optimise their workflow. Vite, known for its rapid development setup, has gained popularity in the React ecosystem. In this article, we'll not only delve into the steps of building and deploying a React Vite app but also navigate through the major differences between Vite and create-react-app and what are the advantages of using Vite over create-react-app
Section 1: Creating a React Vite App
To kickstart our React Vite app, ensure you have Node.js (version 18 would be more awesome) installed, and run the following commands:
# Create a new React Vite app
npm create vite@latest
# vite prompts you to enter project name, enter your desired name
# but I have entered vite-project-demo
Project name: » vite-project-demo
# then prompts you to select framework, in our case it will be React
# so use down arrow to move down the select and press enter to React
Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Solid
Qwik
Others
# Now it prompts you to Select a variant of React,
# in our we select 'TypeScript + SWC'
Select a variant: » - Use arrow-keys. Return to submit.
TypeScript
> TypeScript + SWC
JavaScript
JavaScript + SWC
Vite will start scaffolding the project in our folder and then give the following:
Scaffolding project in C:\Users\ACER\Desktop\vite-project-demo...
Done. Now run:
cd vite-project-demo
npm install
npm run dev
Congratulations! We have successfully created a vite app with React as its framework and base language as Typescript, it also has additional support that is of ESLint. Now, let's run the commands that Vite gave us:
# We need to navigate to the Vite app folder, so enter:
cd vite-project-demo
# To open the project in your Visual Studio code text editor, we enter:
code .
After opening the app, we need to install the node modules of the application. This is already an advantage of using Vite over create-react-app. Since the node_modules does not come inbuilt, the initial installation of the app is blazingly fast. So, to install node_modules we use the command:
# to install node_modules we use:
npm install
# to run the application we use:
npm run dev
Congrats! One more step ahead in our journey, so now we have a react-vite application running on localhost. It usually runs on localhost:5173 and it looks something like this:
Section 2: Pushing React Vite App code to GitHub
GitHub, a leading platform for version control and collaborative software development, facilitates seamless collaboration among developers globally. Hosting millions of repositories, it empowers teams to track changes, manage projects, and contribute collectively. With features like pull requests and issue tracking, GitHub is pivotal in modern software development workflows.
Now, lets push this react-vite-app to GitHub. To do this, first, we need to go to GitHub and create a new Repository. So to GitHub, make sure to log in to your account first, if you don't have an account on GitHub make sure to create one by signing up. Once you log in, click on the new button (which is green in color) it will help you create a repository by redirecting you to a screen which looks like this:
In the repository name, enter your desired name, this will create a new Repository for you. Now, to push your vite app code onto this repository, you need to run some commands. These commands you need to enter in your project's VSCode's terminal.
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/{username}/{repository_name}.git
git push -u origin main
These commands will push our vite app onto GitHub. Great! one more step towards success. Now let's move on to deploying this GitHub repository onto Vercel platform.
Section 3: Deploying on Vercel
Vercel simplifies the deployment process with its intuitive platform. If you don't have a Vercel account, sign up and connect your repository. Once connected, deploying your React Vite app is a breeze.
Let's start with the deployment process, after logging into Vercel, click on the new button (which is black in colour) and it will give a dropdown menu to select an appropriate option from that. In our case, it is going to be new -> project. After clicking on this, it will redirect you to a new page where you will be prompted to select the appropriate GitHub Repository. So, select the GitHub repository which you want to deploy by clicking on the 'Import' button. Refer, the image below
In our case, it is React-vite-app that we want to deploy, be advised it is the same name of the GitHub repository that I had created so make sure to select the same GitHub repository name that you had created to deploy. After importing, Vercel redirects you to another screen asking some details about the project. See image below for reference:
Project Name- If you want to rename the project name, you can enter your desired name. In my case, I have kept the same name as the GitHub repo name itself.
Framework Preset - In our case it is Vite. It is advisable to not edit this field.
Root directory - It helps you select the particular folder that you want to deploy. In our case, it is the root directory itself so I am not changing it.
Build and Output settings- This is a way to communicate to Verce to execute some commands while building the project for us. In our case, we don't have anything like that so we leave it empty.
Environment Variables - If you have any variables in your env, then you can enter those variables as key-value pairs here in this field. We don't have anything in our project to configure but to demonstrate, I have used one example. Refer the image on how to set the environment variables.
After these steps, click on deploy. Vercel will start deploying the app, and within no time, the project will be deployed.
Congratulations, we have come a long way - from creating a React + typescript + Vite app to deploying it on Vercel. Give yourselves a pat on the back, go give yourself a small treat and celebrate your win.
Conclusion
In the realm of React development, crafting a Vite app and deploying it on Vercel delivers a dynamic duo of speed and simplicity. Vite's swift development setup, coupled with Vercel's seamless deployment, forms a powerful combination. The rapid iteration, courtesy of Vite's hot module replacement, translates to efficient development, while Vercel's user-friendly platform simplifies showcasing our lightning-fast React app to the world. In summary, the pairing of Vite and Vercel equips developers with the tools to create and deploy standout applications with ease.
For any query, you can get in touch with me via LinkedIn and twitter. Below you can find the code in GitHub Repository. Leave all your comments and suggestions in the comment section. Let's connect and share more ideas.
Happy coding!