DEV Community

loading...
Cover image for Simple deploy typescript application to Heroku

Simple deploy typescript application to Heroku

hte305 profile image Ha Tuan Em ・2 min read

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!

Discussion (2)

pic
Editor guide
Collapse
avirupdutta profile image
Avirup Dutta

thanks buddy!!!

Collapse
alanclesio profile image
Alan Clésio da Silva Pereira

Really simple and straightforward tutorial!