Deploy Typescript + NODEJS + vercel & .env

For several weeks after Heroku stopped the free tier, I have been scrapping the internet on how to deploy my express, nodejs apps with environment variables. All the resources I came across couldn’t help me archive my goals. If you are like me and in my case, I hope the step-by-step Tut. I have come up with could help you to get your dream out to the world faster.

STEP 1: initialize the node project

run this command in your terminal inside the folder you want to set up your project
* npm init -y

Install All dependencies
yarn add express typescript @types/express @types/node @types/dotenv dotenv ts-node -D

STEP 2: Create a tsconfig.json file

run this command to set up your tsconfig.json file in your project directory
* npx tsc — init — rootDir src — outDir build — esModuleInterop — resolveJsonModule — lib es6 — module commonjs — allowJs true — noImplicitAny true

You can keep the default tsconfig.json
only change “outDir”: “build”, to “outDir”: “dist”,

when the projects build you will get your outDir inside the tsconfig file set to build but change it to dist as illustrated above.

STEP 3: Add start to the script in package.json

Inside your package.json file, you need to modify the script key-value pair as shown before. Nodemon will help you run the application locally on your computer build if, for the deployment configuration, the test could be updated later when you want to test your application with a jest or any other testing framework.

“scripts”: {

“start”: “nodemon src/index.ts”,

“build”: “rimraf dist && tsc”,

“ts.check”: “tsc — project tsconfig.json”,

“add-build”: “git add dist”,

“test”: “echo \”Error: no test specified\” && exit 1"

},

STEP 4: Add Pre-commit hook

Again add pre-commit before you have to commit your application to GitHub. Since Vercel .js source it’s better to build it before committing to GitHub.

“pre-commit”: [

“ts.check”,

“build”,

“add-build”

],

STEP 5: make a src folder inside your root dir.

from your terminal you can run this code below
mkdir src

navigate to src and create an index.ts from your terminal you can run this code below:

cd src

touch index.ts

STEP 6: Create a .env file in your root folder

from your terminal you can run the code below or you can just create the file.
touch .env

Add SERVERPORT in .env file
example: SERVERPORT = 9090

STEP 7: Add gitignore

from your terminal you can run the code below or create the .gitinore file
touch .gitignore

Add the following to your gitignore file, so that this won’t be pushed to GitHub for privacy reasons.

.env

/node_modules

STEP 8: Git step up

In order for us to host our application on Vercel we need to add our project to Github.

git init

git add .

git commit -m “first commit”

git branch -M master

git remote add origin “your github origin”

git push -u origin master

add your need project from github on vercel

STEP 9: Create an account on Vercel or login

Before your deploy set the enviroment virable

- SERVERPORT : 9090

Add Vercel.json file
inside your root folder add a vercel.json and add the following code below.

STEP 10: There you go, if this helped you and you want to show appreciation kindly support my youtube journey @ https://www.youtube.com/channel/UCT5Uuqffg0JB4W9uJuv4rNg