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

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

Step 3. Install required dependency using NPM

npm i @types/express @types/node express nodemon ts-node typescript
  • 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

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 */
]

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

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}`));

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

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

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

git init .
git add .
git commit -m "Initializing project"

Finally of substeps: Pushing code to Heroku

git push heroku master

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

Posted on Apr 10 by:

hte305 profile

Ha Tuan Em

@hte305

I am a man love code and want to make something awesome for the life.

Discussion

markdown guide
 

Really simple and straightforward tutorial!