DEV Community

Cover image for Simple deploy typescript application to Heroku
Ha Tuan Em
Ha Tuan Em

Posted on

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!

Oldest comments (5)

Collapse
 
alanclesio profile image
Alan Clésio da Silva Pereira

Really simple and straightforward tutorial!

Collapse
 
avirupdutta profile image
Avirup Dutta

thanks buddy!!!

Collapse
 
rafaelfx profile image
XkoderFX

Thanks a lot!

Collapse
 
sebastien_montibeller_4a4 profile image
SEBASTIEN MONTIBELLER

How would you compile and deploy the front end containing typescript? In my client json package, I run tsc && react-script build but that doesnt seem to work to generate. I encounter some error in the heroku-postbuild.

Collapse
 
hte305 profile image
Ha Tuan Em

I will find out this case in later