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.
- Simple node-js server.
- With typescript support.
- Deployed to Heroku.
before we get our hand's dirty let's know a pre-requisite.
- download and install Nodejs: https://nodejs.org/en/
- You need an account on Heroku: https://signup.heroku.com/
- Install Git on your system: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
- A web browser: Chrome (or any other)
- IDE — I'm using Visual Studio Code(VS-code).
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!
