DEV Community

Md Kaif Ansari
Md Kaif Ansari

Posted on

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

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"
  }
}


Enter fullscreen mode Exit fullscreen mode

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:

  1. Install dependencies: ```sh

npm install


2. **Build the project**:
   ```sh


   npm run build


Enter fullscreen mode Exit fullscreen mode
  1. Start the server: ```sh

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](https://render.com/) and log in to your account.
- Click on the "New" button and select "Web Service".

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40616yes9g8h2y1vkwwk.png)



#### 2. Connect Your Repository

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwr11hff5a1obs0di4zu.png)



#### 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x18i8piwjsaiv8wzsw5h.png)



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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8b9t453qdvybsblcf4p.png)

*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`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dj8x4v8krgn8nsuo8il.png)

*Select you Instance type*

I am using free version.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8sr5xck0gwxwssh79390.png)

*Add environment variable if you have any*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rigp44ysdqgpa202igab.png)




#### 4. Deploy

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6y10zk1o0ydq1yttem59.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2smqzhgyo7bzcx6qww41.png)

### 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.

Enter fullscreen mode Exit fullscreen mode

Top comments (0)