DEV Community 👩‍💻👨‍💻

||Nishant||
||Nishant||

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode
  • 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.

Alt Text

  • 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.

Alt Text

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.

Top comments (0)

Why You Need to Study Javascript Fundamentals

>> Check out this classic DEV post <<