Node-Typescript-Heroku Hosting, Quick guide.

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.

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,

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!

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