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.

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.

Advantages of using Vercel

1. Free domain name with app suffix
2. Ease integration with custom domains
3. Automatic Deployments (CI/CD)
4. 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

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

• Enter the project name and click on Create Repository.

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

Step 3 – Deploying Git Repo in Vercel

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

• Search your project and click on import.

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

• 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.

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.

• 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.

About CloudThat