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 runtsc --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.
Top comments (1)
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