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: ```sh
npm install
2. **Build the project**:
```sh
npm run build
- 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.
Top comments (0)