A Guide to Deploy React App on Vercel Cloud

Overview

Deploying your React app on Vercel Cloud is a seamless and efficient process. With its user-friendly interface and automated deployment pipelines, your app can be up and running quickly. Connect your repository configure your build settings, and Vercel will take care of the rest, including SSL certificates, serverless functions, and domain management. Plus, the platform’s scalability ensures your app is ready to handle any level of traffic. With Vercel, deploying your React app is not just hassle-free but also provides a powerful and reliable hosting solution for your projects.

Introduction

Vercel is a cloud platform designed to simplify and accelerate the deployment of web applications, with a particular focus on frontend applications, serverless functions, and serverless APIs. It is known for its ease of use, scalability, and tight integration with modern development tools. It is popular for hosting web projects, including React, Next.js, and other frontend frameworks.

Pioneers in Cloud Consulting & Migration Services

Reduced infrastructural costs
Accelerated application deployment

Get Started

What is Vercel?

Vercel is the platform for frontend developers, and it is a platform that provides hosting services. It can be integrated with GitHub, GitLab, bitbucket, and others.

Vercel is a platform that enables users to develop, preview, and ship Jamstack sites.

JAMstack ⇒ Jamstack, previously stylized as JAMStack, is a web development architecture pattern and solution stack. The initialism “JAM” stands for JavaScript, API, and Markup. vercel can be used for teams and individual projects. Companies, including Carhartt, GitHub, Hulu, IBM, McDonald’s, Uber, and Facebook, deploy their frontends with the Vercel platform.

311,724 live websites use Vercel, 81,356 sites used Vercel historically, and 4,230 websites in India.

Vercel combines the best developer experience with a relentless focus on end-user performance. Vercel, founded in 2015, offers unmatched vertical integration from developer experience to edge delivery. The company uses the most cutting-edge development tools and parallel computing in a serverless cloud environment to give developers and users a fully managed, highly automated experience.

Advantages of using Vercel

Free domain name with app suffix
Ease integration with custom domains
Automatic Deployments (CI/CD)
Marketplace allows users to integrate with other applications like Slack, Google Lighthouse, Sentry, etc. (Link)

Products and features provided by Vercel

Build and deploy: A Vercel Deployment results from a successful build of your Project. The build emits files that are compatible with the Build Output API.
Vercel CLI: Vercel CLI allows you to deploy your Projects directly from the Command Line Interface (CLI). You can use this deployment method whether your project is connected to a Git repository.
Automatic Git integration: Vercel allows for automatic deployments on every branch push and merges onto the Production Branch of your GitHub, GitLab, and Bitbucket projects.
Vercel Functions: Vercel allows developers to run code-on-demand without infrastructure management.
Vercel Edge Middleware: Edge middleware is a feature of Vercel that allows developers to run custom code on the edge of the Vercel network, closer to users. This can be useful for various purposes, such as modifying the response from a serverless function before it is sent back to the user.
Vercel image optimization: This will allow you to measure real-world performance & user experience over time and compare the before and after Image Optimization.
Vercel edge Caching: Edge Caching is a feature of Vercel that allows developers to cache the responses from their serverless functions on the edge of the Vercel network, closer to users. This can improve the performance of a website or application by allowing frequently requested data to be served to users more quickly without having to go back to the origin server.

Steps to Deploy React App via GitHub

Prerequisites: node, git-cli, GitHub, Vercel account

Step 1 – Creating a React Project

npx i creat-react-app my-project
cd my-project
code .

npx i creat-react-app my-project

cd my-project

code .

step1

The default folder structure contains

node_modules – support packages
public – all public files
src – functional, declarative UI code
.gitignore – files to be ignored by git
json – metadata of support packages
md – instruction and documentation of the project

Step 2 – Publishing the project to GitHub

Open GitHub and login with your account
Click on the new Repository

step2

Enter the project name and click on Create Repository.

step2b

step2c

Enter the following commands in your terminal to publish the local project to GitHub

git remote add origin <https://github.com/><username>/my-project.git
git branch -M main
git push -u origin main

git remote add origin <https://github.com/><username>/my-project.git

git branch -M main

git push -u origin main

Step 3 – Deploying Git Repo in Vercel

Login to https://vercel.com/
Click on Add New and select Project from the dropdown

step3

Search your project and click on import.

step3b

Users can change the Project name in Configure Project. Vercel automatically detects the template used to create the project if used – Framework Preset.

step3c

Users can configure the custom build commands, output directory, and package install command in Build and Output Settings and add any .env variables in Environment Variables.

step3d

Step 4 – Deploy Git repo in Vercel using GUI

Finally, click on deploy to deploy your project. Users can view the build output and checks run on the project below the deploy button.

step4

Now your site is live on the web, and visit.
By default, any changes pushed to the master branch in GitHub will be detected by Vercel and deploy the updates to live.

Conclusion

Deploying a React app on the Vercel Cloud is a straightforward and efficient process that empowers developers to share their projects quickly. With its seamless integration, automatic deployments, and robust hosting capabilities, Vercel simplifies the deployment pipeline and provides a reliable platform for scaling and maintaining React applications. By following the steps outlined in this guide, you can harness the power of Vercel to effortlessly showcase your React projects, making it an invaluable tool for developers seeking a hassle-free and high-performance deployment solution.

Drop a query if you have any questions regarding Vercel and we will get back to you quickly.

Making IT Networks Enterprise-ready – Cloud Management Services

Accelerated cloud migration
End-to-end view of the cloud environment

Get Started

About CloudThat

CloudThat is an official AWS (Amazon Web Services) Advanced Consulting Partner and Training partner, AWS Migration Partner, AWS Data and Analytics Partner, AWS DevOps Competency Partner, Amazon QuickSight Service Delivery Partner, AWS EKS Service Delivery Partner, and Microsoft Gold Partner, helping people develop knowledge of the cloud and help their businesses aim for higher goals using best-in-industry cloud computing practices and expertise. We are on a mission to build a robust cloud computing ecosystem by disseminating knowledge on technological intricacies within the cloud space. Our blogs, webinars, case studies, and white papers enable all the stakeholders in the cloud computing sphere.

To get started, go through our Consultancy page and Managed Services Package, CloudThat’s offerings.

FAQs

1. What are the benefits of deploying to Vercel?

ANS: – Vercel offers several benefits for deploying static sites and serverless functions. These include fast global CDN hosting, automatic HTTPS, and seamless integration with popular development tools like GitHub and GitLab.

2. How do I deploy to Vercel?

ANS: – To deploy to Vercel, you must sign up for an account on the Vercel website. Once you have an account, you can connect to your Git repository and choose a project to deploy. Vercel will automatically build and deploy your project whenever you push code to your connected repository.

3. Can I use a custom domain with my Vercel deployment?

ANS: – Yes, you can use a custom domain with your Vercel deployment. Add your domain to your Vercel project settings, and Vercel will automatically provision an SSL certificate and handle the DNS configuration.

4. Can I use environment variables with my Vercel deployment?

ANS: – Yes, you can use environment variables with your Vercel deployment. Vercel allows you to define environment variables in your project settings, which can be accessed in your code at runtime. This is useful for storing sensitive information such as API keys and database credentials.