README.md

simple-deploy-app-typescript-to-heroku

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, also setting up a server is a very pleasant developer experience compare to normal Nodejs methods.
• 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

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