Posted on Sep 4, 2020 • Edited on Mar 2, 2021

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.