Deploy any web app to Vercel

Here is a quick and simple guide to deploy any web app to Vercel (previously known as Zeit).

The Flow

• Using Docusaurus which makes it easy to maintain Open Source documentation websites.
• Vercel account
• Deploy the web app with Vercel

Assumption

• I'll assume that you already have a web app in place, if not then create a new web app which acts as a documentation website.

Step 1: Getting started

In order to create a web-app with Docusaurus

• Create a directory and navigate inside to the directory.
• Run npx docusaurus-init. This will create a web project in the following structure

<directory-name>
├── Dockerfile
├── docker-compose.yml
├── docs
│   ├── doc1.md
│   ├── doc2.md
│   ├── doc3.md
│   ├── exampledoc4.md
│   └── exampledoc5.md
└── website
    ├── README.md
    ├── blog
    │   ├── 2016-03-11-blog-post.md
    │   ├── 2017-04-10-blog-post-two.md
    │   ├── 2017-09-25-testing-rss.md
    │   ├── 2017-09-26-adding-rss.md
    │   └── 2017-10-24-new-version-1.0.0.md
    ├── core
    │   └── Footer.js
    ├── package.json
    ├── pages
    │   └── en
    │       ├── help.js
    │       ├── index.js
    │       └── users.js
    ├── sidebars.json
    ├── siteConfig.js
    ├── static
    │   ├── css
    │   │   └── custom.css
    │   └── img
    │       ├── favicon.ico
    │       ├── oss_logo.png
    │       ├── undraw_code_review.svg
    │       ├── undraw_monitor.svg
    │       ├── undraw_note_list.svg
    │       ├── undraw_online.svg
    │       ├── undraw_open_source.svg
    │       ├── undraw_operating_system.svg
    │       ├── undraw_react.svg
    │       ├── undraw_tweetstorm.svg
    │       └── undraw_youtube_tutorial.svg
    └── yarn.lock

• Navigate to website folder inside the root directory.

• Run yarn start or npm start. This should bring up the server and launches the web app on localhost:3000. Example website should be up and running.

Step 2: Building

• Considering all the changes are done, now is the time to build the app. This can be done by using yarn build or npm build.
• vercel in your fav terminal to log in.

• You will then receive an email, verify that and you are now logged in.

Step 3: Deploying

• Navigate to /build/<website-name>
• vercel to finally start deploying
• Follow the simple on-screen instructions to deploy it.

Step 4: Chill out and enjoy

Since you have deployed your web-app, its time to enjoy and start exploring something else.

Reply in the comments if you enjoy this read or any suggestions to improve.