Deploy TypeScript REST API on Render using Docker

Introduction

TypeScript arguably offers the best of both worlds: the flexibility of JavaScript and the type safety of statically typed languages like Java and C#.
It is a popular choice for building REST APIs because it allows developers to catch errors early in the development process and write more maintainable code. In this tutorial, we will build a simple TypeScript REST API and deploy it on Render using Docker.

Why Docker?
Docker is a popular containerization tool that allows developers to package their applications and dependencies into a single image that can be run anywhere. Docker images are portable and can be deployed on any cloud provider, including Render. Docker is also a great choice for deploying TypeScript applications because it allows developers to specify the exact environment and dependencies needed to run the application.

Personally, I have found Docker to be a great tool for deploying TypeScript applications on Render. I have used Docker to deploy a number of TypeScript applications on Render.
Docker has taken away the pain of managing dependencies and environments, and has allowed me to focus on building my applications.

Why Render?
Cloud providers like AWS, Heroku, Azure and DigitalOcean offer a wide range of services for deploying applications. However, these services are often not completely free.
Heroku and Azure for instance, offer free tiers for student developers, but these tiers are limited in terms of the number of hours and resources available.
Render on the other hand, offers a free tier which does not require extra process to redeem.
I chose Render to allow everyone to follow along with this tutorial without having to worry about cost.

Prerequisites

List of prerequisites for following the tutorial, including installation of necessary software and creating a Render account

• Node.js
• Docker
• Render account
• TypeScript

Setting up the TypeScript REST API

Now that we have all the necessary prerequisites, we can start building our TypeScript REST API. Let's get our hands dirty!

• Creating a new directory for the project

  mkdir typescript-rest-api && cd typescript-rest-api

• Creating a new TypeScript project with npm init

  npm init -y

• Installing necessary dependencies (such as Express and TypeScript)
  

    npm install express typescript @types/express @types/node ts-node-dev --save-dev
  

• Writing the TypeScript code for the REST API endpoints
  
  

import express, { Request, Response } from "express";

// init APP
const APP = express();
APP.use(express.json());

// GET /api
APP.get("/api", (req: Request, res: Response) => {
  res.send("Hello World!");
});

// POST /api
APP.post("/api", (req: Request, res: Response) => {
  const { name } = req.body;
  res.send(`Hello ${name}!`);
});

// start server
APP.listen(3000, () => {
  console.log("Server running on port 3000");
});

• Configuring the TypeScript compiler to compile the code to JavaScript

  npx tsc --init

• Update the tsconfig.json file to specify the output directory

  {
    "compilerOptions": {
      "outDir": "./dist"
    }
  }

• Update the package.json file to specify the start script

  {
    "scripts": {
      "start": "node ./build/index.js",
      "build": "tsc",
      "server": "nodemon --exec ts-node index.ts"
    }
  }

Dockerizing the TypeScript REST API

• Writing a Dockerfile to specify the container environment and dependencies

FROM node:14-alpine

WORKDIR /

COPY package\*.json ./
RUN npm install

COPY . .

RUN npm run build

CMD ["npm","start"]

Deploying the TypeScript REST API on Render

On Render, we can deploy our TypeScript REST API in two ways: using the Render CLI or using the Render dashboard. In this tutorial, we will use the Render dashboard to deploy our TypeScript REST API.

To deploy our TypeScript REST API on Render, we need to create a new web service and specify the following:

• Name: The name of the service
• Git Repository: The URL of the Git repository
• Branch: The branch to deploy from
• Root Directory: The root directory of the project (optional)
• Runtime: The runtime to use (Docker in our case)

You can go ahead and create a new web service on Render. Once the service is created, Render will automatically deploy the TypeScript REST API and make it available at the URL specified in the service settings.

Testing the TypeScript REST API

• Verifying that the API is working correctly on Render

  curl https://<service-name>.onrender.com/api

Conclusion

In this tutorial, we have learned how to build a simple TypeScript REST API and deploy it on Render using Docker. We have also learned how to test the API on Render. I hope you have enjoyed this tutorial and found it useful. If you have any questions or feedback, please feel free to leave a comment below.

You can find the complete source code for this tutorial on GitHub.
Source code

Additional resources for learning TypeScript and Docker

-TypeScript documentation
-Docker documentation
-Render documentation

Happy Hacking!

Bentil here🚀
Have you ever wanted to build a REST API with TypeScript and Docker? Was this tutorial helpful? Let me know in the comments below. Kindly share your thoughts and suggestions in the comments section below. I'd love to hear from you.

Kindly Like, Share and follow me for more interesting articles like this. Thank you for reading and see you in the next article. Bye👋👋👋