Continuous Deployment via Vercel

[josh-byster]

Summary We want a way to be able to quickly deploy the entire application stack with one command, allowing us to be fully running and be able to plug in the environment variables (ex. database URI) on the Vercel website.

Problem / Current Functionality Currently, we are able to deploy parts of our application separately with Vercel/Now, but it's not super easy to be able to do so. We also currently use version 1 for deployments, which is deprecated and will be removed soon. So we want to upgrade everything to use the latest Vercel serverless functions and deploy both simultaneously using a now.json file in the root of the repo.

Solution

The LAH now.json file may be helpful as reference. Using a local tool like vercel dev may be extremely helpful when getting this set up. We need to have the routing all set up with a vercel.json file, so that requests going to, say, https://recruitment-portal.vercel.sh/api/ get forwarded to the backend serverless function, while requests that don't match that format get forwarded to the frontend, where the static assets will be served from edge caches located globally.

We'll also want to create instructions on how to create, say, a MongoDB Atlas instance and deploy that as well. The Vercel deployment should be located in the same AWS region as the Atlas deployment for low latency. For example, a database deployed in N. Virginia should have "regions": ["iad1"] in the Vercel configuration file to deploy in the same region.

Acceptance Criteria / User Stories

• [ ] As a superadmin, I should be able to deploy the application to my own account using vercel in the CLI and set up the environment variables in the server.

[arpanlaha]

The Kids Save Ocean now.json will also prove to be useful (especially for the frontend), as both Kids Save Ocean and the Recruitment Portal use Next.js on top of React, which means the Now configuration needs to be handled a bit differently.

[josh-byster]

Thank you @arpanlaha! I was hoping we would have a good existing setup for Next + Now to use as an example, and this is perfect!

[karpawich]

@josh-byster @arpanlaha

👋Hi y'all! I'm Max, the Director of Engineering from your sister org, Bits of Good.

Vercel has a well-hidden limit (12) to the number of serverless functions you can have per deployment with their free tier. Two of our project teams over at Bits of Good discovered this limit the hard way 😢 so I figured I'd let y'all know in advance.

However, I encourage you to take a look at the inbuilt Next.js support for dynamic routing and consider just building your own mini router with nested dynamic routing 👀 to stay under the official limit. Cheers!