Setting up a nodejs project with typescript and deploying to heroku

Setting up nodejs with typescript can be quite troublesome if not done properly. To make this worse you probably won't see the issue with the way you set your project up until you want to deploy it. Today we are gonna go over how exactly we can set up nodejs with typescript in a way that would make deployment easy.

Getting started

For this tutorial we are gonna be using the following packages:

• yarn
• nodejs
• typescript
• ts-node
• express
• nodemon
• @types/node (type definitions for nodejs)
• @types/express (type definition for typescript)

Initializing the project

we are going to initialize the project with yarn and git

yarn init -y 

git init 

we should have our package.json file create for us like so

Installing the dependencies for the project

To make our lives easier let's install express

yarn add express 

Installing typescript and ts-node as dev dependencies

yarn add -D typescript ts-node 

installing the type definition for node and express

yarn add -D @types/node @types/express 

and finally nodemon to run our server in development

 yarn add -D nodemon 

After installing our dependencies it should be included in the package.json file

And our node_modules folder must have been created

Let's create a .gitignore file and add our node_modules in there to prevent it from being tracked by git

// (in .gitignore) node_modules 

Adding the scripts

add the following to your package.json file

 "scripts": { "start": "node dist/index.js", "build": "tsc", "dev": "nodemon --exec ts-node ./src/index.ts --mode development" } 

our package.json should look like this

Explaination for the script

• The build script is responsible for making our javascript build of the project for deployment (it would build all our files into a dist folder with the tsc command which we would set up in a second)
• start is what would run the app when we deploy it to service such as heroku
• dev is to run our app in development

Generating our tsconfig file

Normally we would run tsc --init to create our tsconfig.json file but in this tutorial i would use a library created by one of my favourite youtubers (Ben Awad) called tsconfig.json. To use the package we'll run: npx tsconfig.json I'll select nodejs and that should create a tsconfig for us. so it contains some set rule for our project, feel free to change whatever you like to your liking but the most important options here are "outDir" which tells the typescript compiler where to compile our javascript file, "excludes" which tells typescript what files to ignore, "include" tells typescript what files to check during compilation, "target" the version of javascript we are compiling to (which Ben has set to es2017) and "module" which tells typescript what module syntax should be used.
The "outDir" has been set to dist but you can name it whatever you want (but remember to change that in the package.json file) but by convention it is usually best practise to call it dist or build.
we are gonna want to include the dist folder to the .gitignore file as this folder is only needed during deployment .

Creating our source folder

First we are gonna want to create a folder called "src", this is where we would write all our typescript code

I'll create a file called index.ts which would be our main input

Now let's write some code

Here we are importing express, setting the a new express application to the variable app. We set the PORT variable to use the process environment port if available and 8080 otherwise then we listen then PORT variable. And we handle our get request with the app.get() method by sending to the client "hello" + client hostname(which is localhost in this case)

now let's run our server

now let's run it in the browser

Let's make a change

That threw an error because in the tsconfig.json the "noUnusedParameters" property is set to true which prevent the unused parameters in the code (which is some best practice stuff :( ).

To remove the error you can either disable the rule by setting "noUnUsedParameters" to false in the tsconfig.json file or simply use the editor quick fix option which I am gonna use.

That was fixed by placing an underscore on the unused parameter, now let's restart the server

It works yay!

Deploying our app to heroku

Now let's see how exactly we can deploy our app which is the part which cause alot of issues especially when unusing typescript with nodejs.

first i am gonna run the build command so that we can see how our app would be built.

we'll run:

yarn run build 

This should create a folder dist which contains our compiled code

This is gonna be what would be run on heroku when we deploy

I am gonna delete this file for now.

Assuming we did everything correctly up until this point, i am gonna list the step for deploying this add to heroku via the heroku-cli. If you don't have installed you can install it with npm install -g heroku

• Logging in to heroku

  

• Adding changes to git

  git add . 

• Committing changes

git commit -am "deploy" 

Adding heroku remote

Pushing to heroku

git push heroku master 

Deployed site 🚀🚀🚀



yay! we have our site deployed.

Conclusion

This is just a very basic example but the main purpose of this guide was to help give an idea on how you can host/deploy a nodejs typescript project of any sort. You can change the rules in the tsconfig.json file to match your use case but make sure the "outDir" is correctly specified. I have had issues deploying typescript nodejs projects myself but now I feel a little more confident doing it now so I decided to share it with the community. I hope this was able to help out in someway. Lemme know if there are better ways to do this. Please do like and comment if you found this interesting.

Comments

[MorganSwitzer]

Heroku will run the postinstall script after installation, which calls tsc , the Typescript builder. After the build process the transcripted . get wife back by black magic