Vercel Deployment: How to Deploy React App to Vercel

Deploying your website on the cloud has enormous benefits such as cost savings, flexible on-demand services, availability, maintainability, analytics, and so on. And that's why in the last few years, most businesses have started utilizing cloud deployment services.

In 2024, around 94% of enterprises were already using cloud services, and 31% of the IT budget was spent on cloud computing services.

But why are we discussing cloud deployment in a DhiWise post?

DhiWise has introduced a new feature named “Deploy on Vercel” in DhiWise React web app builder. It streamlines Vercel Deployment by letting developers deploy their React app code on Vercel in a few simple steps. That means developers don’t need to leave the platform to deploy their website on the cloud.

In fact, the platform has everything to build and deploy React web apps using one single platform. DhiWise has these key features in its React web builder:

• Figma to React code converter
• TypeScript and JavaScript Support
• Design System support- Tailwind CSS and ChakraUI
• Bundler Support- CRA, CRACO, Webpack and Vite
• Media Query and Flexible Layout for Responsive Design
• Visual interface for React app UI customization
• Smart Code Suggestions
• API integration
• Git integration
• Vercel deployment support

Looks amazing, right?

Read the following use cases on how you can save your app development time with DhiWise.

1. Extend Freshteam functionalities within 4 hours using DhiWise and Supabase.
2. Figtion with DhiWise in a Day!
3. Build Investie the stock trading application using Lemon.markets, Twilio, and DhiWise within 2 hours.
4. Get Mood Wise Tracks of Spotify in React within 8 hours using DhiWise
5. Build your own Web application to monitor downtime of your system with notifications in a day using DhiWise

Let’s explore more about “Deploy on Vercel”, a new feature introduced by DhiWise, but first understand what Vercel is and why developers love to use it.

What is Vercel and why do developers like it for app deployment?

The problem with app deployment in the past

Earlier, cloud hosting was carried out by the hosting providers, which required manual uploading of digital assets. Every time you make changes to the app code it also needs to be manually updated using the cloud hosting platform. The entire process was labor-intensive, time-consuming, error-prone, and costly.

The solution offered by GitHub and Vercel

However, with the emergence of GitHub, developers cannot only manage and share their app code across teams but can easily access cloud platforms like Vercel.

Vercel is a serverless cloud platform that was first introduced in 2015 by Guillermo Rauch. It allows front-end developers to easily host websites and online services instantly with minimum to no configuration. Moreover, it updates the changes automatically and provides a way to monitor app performance.

Key benefits of Vercel

Here are some of the key benefits of using Vercel for React web application deployment.

• Provides you with the free domain to deploy code on the live server. Or you can use your own domain.
• Provides support for automatic deployment. That means every time you update the app source code it will be detected and deployed to the server automatically.
• Vercel provides a secure way to deploy an app built, as it is securely protected with an auto-reviewing SSL certificate and is powered by the edge network.
• Vercel allows you to integrate third-party tools like Google Lighthouse, Slack, and other tools through Marketplace.

And so on.

Now that you know about Vercel and its benefits, find out how Vercel deployment is done in DhiWise web app builder.

Vercel Deployment: How to deploy React app on Vercel with DhiWise

If you are planning to build and deploy a React web app but don’t have enough time then try DhiWise. New to DhiWise Sign up here!

Here are the steps to deploy your app on Vercel.

1. Sync your React app code to GitHub/ GitLab

Once you build your React app using DhiWise, sync your application code to GitHub or GitLab. DhiWise allows you to easily sync application code through GitHub and GitLab integration.

Sync your Code with GitHub or GitLab

GitHub allows you to access Vercel. If you don’t have a GitHub account, create one to sync your code with GitHub. The platform will ask you to authorize your access from DhiWise to your GitHub account.

To sync your app code with GitLab read DhiWise help doc .

Authorize DhiWise

When the authorization is completed you will be directed to DhiWise application setting page. Here you need to select Integration from the side panel, then you will see the Select Repository option.

Select Repository

Click Select Repository and then create a new one as you will not be able to select the repository that already contains program files.

Add New Repository or Select from Existing

After creating the new repository refresh the page to see the newly created repository.

Create a New Repository

Select the newly created repository, you will see the GitHub repository name and URL. Finally, to sync application code with GitHub in the new repository click Commit.

Whenever you make the changes to the application code they can be instantly updated on GitHub from DhiWise.

Well, now you have your code on the GitHub repository. Next, you need to deploy your app code to Vercel.

2. Deploy your React app code to Vercel

To deploy an app on Vercel, you are required to generate a Vercel API access token. Let's find out how to create a Vercel access token. This token can be created and managed inside your account settings and can be scoped to allow access for specific teams.

To create the Vercel access token, navigate to the Account Token Page under your personal account setting (Vercel Account).

Account Token Page

As shown, here you need to provide an appropriate token name, scope, and Expiration time. Then click Create token to generate the token.

Create Token

Make a note of the generated token as it will not be shown again due to security reasons.

Token Created

Finally, use the generated token to deploy your code on Vercel.

Use Generated Token to Deploy your Code on Vercel

That's it!

Summing Up:

In the article, we have learned about the React web app deployment, what is Vercel, why developers like it, and how to sync your React code with GitHub and deploy it on Vercel using DhiWise.

Hope you find it helpful to build your next React application.

Overall, DhiWise aims to simplify the process of web application development and deployment with its web builder.

Sign up with DhiWise today!