Simple deploy typescript application to Heroku

hte305

Ha Tuan Em

Posted on April 10, 2020

Simple deploy typescript application to Heroku

Step 1. Making project root directory

mkdir simple-deploy-app-typescript-to-heroku
Enter fullscreen mode Exit fullscreen mode

Step 2. Initialize your directory as a node project

cd simple-deploy-app-typescript-to-heroku
npm init -y // automatic create new file package.json
Enter fullscreen mode Exit fullscreen mode

Step 3. Install required dependency using NPM

npm i @types/express @types/node express nodemon ts-node typescript
Enter fullscreen mode Exit fullscreen mode
  • Express is used for making REST API easier.
  • Nodemon keeps the server running and swapping the latest code so we don't need to restart the server every time our update new code.
  • ts-node directly runs .ts node file.
  • typescript for type-script support to javascript.

Step 4. Configuring Typescript

tsc --init // automatic for create new file tsconfig.json
Enter fullscreen mode Exit fullscreen mode

Then add new line below compilerOptions object.


"include" : [
    "src/**/*.ts"   /* Include every ts file in source folder */
],
"exclude" : [
    "node_modules"  /* exclude everything in  node_modules */
]
Enter fullscreen mode Exit fullscreen mode

Step 5. Setting up server

Edit file package.json

"compilerOptions" : {
  //**/
},
"scripts": {
    "start": "ts-node src/config/server.ts",
    "dev": "nodemon -x ts-node src/config/server.ts"
},
Enter fullscreen mode Exit fullscreen mode

Server script would live in src/config/server.ts

Create a new simple server with express now.

src/config/server.ts

import express from 'express';
const app = express()
const PORT : string|number = process.env.PORT || 5000;

app.use("*",(req, res) =>{
    res.send("<h1>Welcome to your simple server! Awesome right</h1>");
});

app.listen(PORT,() => console.log(`hosting @${PORT}`));
Enter fullscreen mode Exit fullscreen mode

Testing for server is running as well, we run cmd npm run dev.

Step 6. Deploying to Heroku

Substep 1: Installing Heroku CLI

Substep 2: Logging in into Heroku

heroku login
Enter fullscreen mode Exit fullscreen mode

Then we are going to a new windows browser for login to Heroku application.

Substep 3: Creating a heroku application in heroku

Substep 4: Creating a file Procfile for Heroku

Add a new line to file

web:ts-node/src/config/server.ts
Enter fullscreen mode Exit fullscreen mode

Substep 5: Initializing our project into a git repo of Heroku

git init .
git add .
git commit -m "Initializing project"
Enter fullscreen mode Exit fullscreen mode

Finally of substeps: Pushing code to Heroku

git push heroku master
Enter fullscreen mode Exit fullscreen mode

I hope it helps a little bit for you.
Thanks for reading my post.
Have a nice day!

💖 💪 🙅 🚩
hte305
Ha Tuan Em

Posted on April 10, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related