DEV Community

Cover image for Deploying React & Vue Applications With Vercel
Martins Onuoha
Martins Onuoha

Posted on

1

Deploying React & Vue Applications With Vercel

This article assumes you have basic knowledge of React or Vue.

Formerly Zeit, Vercel is another leading platform for deploying web applications easily. It’s no different from the likes of Heroku & Render except that Vercel is highly optimized for Javascript Frontend applications, particularly Jamstack apps.

Getting Started

Requirements:

  • Nodejs setup

  • Github account

  • Vercel Account

We’ll run through each process in steps.

Step 1

Push your React or Vue Project to Github.

git add . && git commit -m "initial commit" && git push origin master
Enter fullscreen mode Exit fullscreen mode

Step 2

Create an account and log in to Vercel using any of the below options.

Versel Login

Step 3

You should be able to see your Vercel dashboard right after. From the dashboard, click on “New Project”.

New Project

Step 4

From there, you should see a list of Github repositories you can import from. Notice how Vercel automatically detects the project type. I’ll choose the first “myapp” repository, which is a react project, by clicking the “Import” button right beside it.

Import Repository

Step 5

Next, you’ll be asked to select a Vercel scope. Feel free to select your personal account.

Vercel Scope

Step 6

Here you’ll need to give a bit more details about your project. The Project name field takes any name of your choice for this project. Framework Preset is automatically set by Vercel when you import a repository; you can leave this as is.

Import Project

The Build and Output Settings sections describe the command Vercel should run to generate a production build of your application. Vercel would most likely pick this value up from your “package.json” file and auto-fill it specifically for the project type (Vue or React). You can, however, change it if you want by toggling the “Override” option.

Build Settings

The Output Directory is where your optimized static files will be, and this is the folder that will eventually be deployed to Vercel. For Vue projects, this folder might be called “dist”.

Once these details are complete, click the “Deploy” button. You should be able to see a log showing the build & deployment process.

Build Process

After a couple of seconds, your site should now be ready.

Site Ready

Click the “Visit” button to see it.

From here on, whenever you make an update to the site, push the changes to the master branch, and Vercel automatically starts a new build to update your site with those changes.

Building

On your dashboard, you’ll see an upcoming build. Once it’s completed, your changes will be up in no time.

React App

All of these steps work the same way for Vue applications and a majority of the other javascript apps supported by Vercel.


Cheers ☕️

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs