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 2021, around  94% of the enterprises were already using cloud services, and 30% 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 lets developers deploy their React.js 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.js web apps using one single platform. DhiWise has these key features in its React web builder:

• Figma to React code converter
• Visual interface for React app UI customization 
• API integration
• Git integration 
• Storybook 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.js 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.js web app but don’t have enough time then try DhiWise web builder. New to DhiWise Sign up here!

 Here are the steps to deploy your app on Vercel. 

‍

‍

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. 

‍

‍

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. 

Click Select Repository and then create a new one as you will not be able to select the repository that already contains program files. After creating the new repository refresh the page to see the newly created 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.js 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 Account Token Page under your personal account setting (Vercel Account). 

‍

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

‍

‍

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

‍

‍

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

‍

‍

That's it!

‍

Summing Up: 

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

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

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

Sign up with DhiWise today!