I was looking for a platform where I can easily deploy my hobby projects to.

Requirements

• Should be able to deploy React, Angular, Vue, Svelte and Express.js apps
• Should have a usable free tier
• Should be easy to manage

After doing some research I found Vercel, which seemed promising. It satisfies almost all my needs above with a little caveat: Express.js apps will only run in a serverless manner, which has some limitations (see here.) For me, for now, it’s fine.

Example app

To try it out I went on deploying one example app with React and Express.js which I made during React - The full course, called Animal Farm.

• You can find the deployed app here: Animal Farm on Vercel
• You can find the source code here: GitHub

All-in-all the development experience was quite smooth. However I did encounter an unfortunate pain point later on.

💥 Oh, no! No TypeScript compilation for Express.js

One drawback I found was that Vercel cannot really compile TS (issue raised on StackOverflow, StackOverflow, and GitHub) unless you are using one of their supported frontend frameworks. This is a pity in 2024, but thankfully we can easily get around this problem.

🥊 Solution 1: Pushing JS too

One solution is to push compiled js code with a pre-commit hook as written in this DEV.to post. If you need CI/CD this might be one ugly, but working solution.

🚚 Solution 2: Deployig via Vercel CLI

If you don’t need CI/CD (and I believe for most hobby projects you don’t) an even easier solution is to simply deploy through CLI, and not via Git.

To do so, you first need to link your local directory to a Vercel project via the vercel link command (first you’ll have to login with vercel login). This will create a .vercel folder in your current directory including your Vercel projectId and orgId. Don’t forget to add .vercel folder to your .gitignore!

Tip: you can link multiple folders to their corresponding projects within a monorepo. Make sure you are running the Vercel commands from the right directory. That directory becomes the project’s Root Directory.

# monorepo
- api # link and deploy your api from this folder
	- src
	- tsconfig.json
	- .vercel
	- vercel.json
- client # link and deploy your client from this folder
	- src
	- tsconfig.json
	- .vercel
	- vercel.json

Once our folder is linked to a Vercel project, we can create Vercel configuration to tell Vercel how to deploy and run our app.

Configuring an Express.js application

Given an Express.js application that was written in TypeScript and compiled into the /dist folder we need to tell Vercel 3 things:

1. How to run this app -> using Node runtime
2. Where to redirect all incoming requests -> to /dist
3. Do not auto-deploy on Production Branch push, because our compiled code does not gets pushed

// vercel.json
{ 
	"version": 2, 
	"rewrites": [{ "source": "/(.*)", "destination": "/dist" }],
 	"builds": [
 		{
 			"src": "dist/index.js", 
			"use": "@vercel/node"
		}
 	],
	"git": {
    		"deploymentEnabled": {
      		"main": false // might be "master". Check Production Branch in your Vercel project settings
   		}
  	}
}

Deployment

Once the folder is linked to a Vercel project, we can easily deploy our app by running:

vercel --prod

🎉 Ta-da! Your Node.js application should be now live in production.