Node-Typescript-Heroku Hosting, Quick guide.

Image for post
Image for post

In today's article I'm gonna show you how you can set up a simple node js server and host it online using Heroku, and further down the line(upcoming articles) we can learn some REST to serve our simple data.

I would be deploying a Typescript server rather than vanilla javascript one so we can use all the tasty treats of modern js, and for those who don’t know what is Typescripts then in short its javascript with types (you can take as datatypes/return types) making it safe and provides static code analysis improving your code quality and added bonus is that it looks very similar to Java, so it feels like home.

Motive.

  • Simple node-js server.
  • With typescript support.
  • Deployed to Heroku.

before we get our hand's dirty let's know a pre-requisite.

P.S I'm using a ubuntu distribution called Elementary OS.

Step 1. Making project root directory

open your terminal, navigate to any directory then,mkdir demo-heroku-node-ts

Step 2. Initialize your directory as a node project

open your root directory ,cd demo-heroku-node-tsthen,npm init it will ask you some basic questions like what your project name, entry point, and other questions. you can enter anything cause we can visit it anytime from package.json.

Step 3. Install required dependency using NPM

npm i @types/express @types/node express nodemon ts-node typescript

So these commands install most common npm packages used for development,

  • 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 you don't need to restart the server every time you update new code, it's for development dependency only for now I'm focusing on getting it deployed later we can optimize for other things.
  • ts-node directly runs .ts node file.
  • typescript for type-script support to javascript.

Everything with @types is typescript types to support that library's return type.

Step 4. Configuring Typescript

In the terminal run the command in the root directory, tsc --init a new file called tsconfg.json would be created, you can directly replace it with mine, comments will be enough to explain their use.

Congrats… your types-script is ready to be used in nodejs server now! let us make our server code.

Step 5. Setting up server

now open your package.json , make the scripts object similar to the below snippet.

from here you could guess that our server script would live in src/config/server.ts.

so create a directory structure similar to that, in terminal or using VS-code make directories,mkdir -p src/config/make a file called server.ts using vs-code or terminal,touch server.ts // creates file then code server.ts // open in vs-code , make it similar to below :

You can test server by local-hosting it using the below command in terminalnpm run dev then in chrome open http://localhost:5000/, if you see the message then your server is configured properly.

Step 6. Deploying to Heroku.

Setting up the Heroku server access point (SSH you may say)

mini step 1. install Heroku CLI

in the terminal runsudo snap install --classic heroku, if you get any issue installing this, refer https://devcenter.heroku.com/articles/heroku-cli to explore more ways to install it. check if Heroku is installed successfully using the commandheroku --version // should retrun version

mini step 2. login into Heroku

using the command in the terminalheroku loginwill open a tab in the browser which asks for login credential, after that you can close the tab and you will be logged in Heroku CLI.

mini step 3. create a heroku app

execute command heroku create will create a new dyno(application) on Heroku server active and running. its output will give you link to the created URL as well you can open it from terminal by control-click on the link or copy paste it into the browser.

example: Creating app... done, ⬢ sleepy-meadow-81798 https://sleepy-meadow-81798.herokuapp.com/ | https://git.heroku.com/sleepy-meadow-81798.git

from this example output, the hosted server URL ishttps://sleepy-meadow-81798.herokuapp.com/

mini step 4. create Procfile for Heroku

at root level make a file called profile without any extension inside it add a lineweb:ts-node/src/config/server.ts and save the file.

mini step 5. initializing your project into a git repo

from the root level of the application perform this command in terminal perform commands :

mini step 6. pushing code to Heroku

now you have two ways to push code to Heroku server, you can add origin to your git repo using the git link from the terminal output of Heroku create command and you can naturally push code using git.git push heroku masterafter the successful push, your server would be live with your code.

we haven't gone into Nodejs typescript and all other REST coding stuff, we are just dealing with hosting setup in this guide, in next article we would be focusing more on code!

Till then Happy Hacking!

P.s. checkout my blogger, maybe you discover something new!

Written by

Coding enthusiast! love Android #kotlinAlltheWay, want to explore all opportunity around it! CodingMantra: #cleanCoder #TDD #SOLID #designpatterns

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store