Deploying a TypeScript backend on Render can be straightforward if you follow these simple steps. In this guide, I will walk you through the process using a package.json file as an example.

Step 1: Prepare Your `package.json` File

First, ensure your package.json file contains the correct scripts for building and starting your application. Here is an example:

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon",
    "start": "ts-node -r tsconfig-paths/register src/index.ts",
    "build": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.7.2",
    "bcrypt": "^5.1.1",
    "compression": "^1.7.4",
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "groq-sdk": "^0.5.0",
    "helmet": "^7.1.0",
    "jsonwebtoken": "^9.0.2",
    "mindsdb-js-sdk": "^2.3.0",
    "module-alias": "^2.2.3",
    "mongoose": "^8.4.4",
    "morgan": "^1.10.0",
    "nodemon": "^3.1.4",
    "openai": "^4.52.3",
    "pdf2json": "^3.1.3",
    "prettier": "^3.3.3",
    "ts-node": "^10.9.2"
  },
  "devDependencies": {
    "@types/bcrypt": "^5.0.2",
    "@types/express": "^4.17.21",
    "@types/hapi__joi": "^17.1.14",
    "tsconfig-paths": "^4.2.0",
    "typescript": "^5.5.3"
  },
  "_moduleDirectories": [
    "node_modules_custom"
  ],
  "_moduleAliases": {
    "@src": "./dist"
  }
}

In the scripts section, you need to have:

start: Command to start your server.
build: Command to build your TypeScript code.

Step 2: Run the Necessary Commands

To deploy your backend, you need to execute three commands in the Render build settings:

Install dependencies:

   npm install

Build the project:

   npm run build

Start the server:

   npm run start

Step 3: Deploy on Render

Now, let's move on to deploying your project on Render.

1. Create a New Web Service

Go to Render and log in to your account.
Click on the "New" button and select "Web Service".

2. Connect Your Repository

Select the repository that contains your TypeScript backend project.
Render will automatically detect the root directory of your project.

3. Configure Build and Start Commands

In the build command section, enter npm run build.
In the start command section, enter npm run start.

Here are the configurations:

Build Command
You have to make sure you install and build your backend in Build Command

Start Command
You have to make sure you start your server from the start command not with nodemon as it is the development mode.

Here I have start": "ts-node -r tsconfig-paths/register src/index.ts on my package.json file.

So I used npm run start

Select you Instance type

I am using free version.

Add environment variable if you have any

4. Deploy

Click the "Create Web Service" button.
Render will start the deployment process. You can monitor the logs to see the progress.

Your deployment will start, if you have configured everything right. It will be deployed successfully.

Final Notes

Ensure that your build and start commands in the package.json file are correctly defined to avoid any issues during the deployment.

Following these steps, you can successfully deploy your TypeScript backend on Render.

How to deploy your Typescript backend on Render (Simple steps)

Step 1: Prepare Your package.json File