Development of NodeJS application with Docker and Typescript [Part 1]
This is the first of the series describing, as a developer, how we can build a great application with NodeJs under TypeScript and using Docker to work locally and deploy the image.
Part 1 - Build a small Application with TypeScript
TypeScript is a really nice piece of technology that Microsoft built. It allows building robust NodeJs applications thanks to the build-in typing checker and using OOP Pattern that was not really useful during pure Node development or could be hard to read. Things have evolved now and I’m not gonna argue more about the strengths of TypeScript, but I’ll try to show you how far we can go with.
This part is available here if you need https://github.com/vschoener/Docker-TS-development/tree/master/medium_part1
Set up the TypeScript project
Ok, let’s ship amazing code :) First, we set up our directory and install the required packages.
npm init -y && npm install --save typescript @types/node As you noticed, we must add the @types/nodes to transpile properly the code with TypeScript. If you omit it, you won’t be able to do anything and TS will complain to not understand the node modules import.
Next, create the src/boot.ts file containing the minimal code below
function speak(message: string) {
console.log(message);
}speak('Ready fox! I\'m listening');
Great, let’s compile and execute our new file generated in the src folder
./node_modules/.bin/tsc src/boot.ts
>node ./src/boot.js
> Ready fox! I'm listening
Perfect, everything is working and if you look into the boot.js file, the typing part should be gone.
Improve the build part with a tsconfig.json
If you noticed, that’s not really clean to have our distribution code generated in the source folder, we are going to improve it right now.
Start now by creating a tsconfig.json file.
You can do it by using the ./node_modules/.bin/tsc --init command but the config will be really minimal so for this guide I advise you to take the one I provide just below and I’ll explain each option directly in the provided file.
There is more advance option available here https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
For now, let’s stick with this version and try to compile our project again (don’t forget about removing the old src/boot.jsfile)
./node_modules/.bin/tsc
>node ./build/boot.js
> Ready fox! I'm listening
As you can see, we have our files generated in the build folder and it also keeps the folder architecture. If you notice, we also got a boot.js.map file that would be useful for the debug step, but I’m not gonna talk about it now.
Watch my code, please!
Yes, we are developers and we don’t like repeating yourself with minor manipulation and command repetition. The problem we just got is having to save and redo the command above… No way!
There are a different way and tools to watch the code, which one is the most efficient? I don’t really know, but with TypeScript, I use ts-node and nodemonOk I hear you now, let’s add the watcher
Sooo, install the packagesnpm install --save-dev nodemon ts-node and create the nodemon.json file containing the following settings:
Add this command to the package.json
"start:dev": "nodemon",And execute it
npm run start:devYou should get the following log and the code executed
nodemon] 1.18.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: /Users/vincentschoener/work/medium/Docker-TS-development/medium_part1/src/**/*
[nodemon] starting `ts-node ./src/boot.ts`
Ready fox! I'm listening
[nodemon] clean exit - waiting for changes before restartIf you change the code, modify the speak call, for example, it will display
[nodemon] restarting due to changes...
[nodemon] starting `ts-node ./src/boot.ts`
Ready fox! I'm listening you, I promise
[nodemon] clean exit - waiting for changes before restartAlright, now you’re good to go working locally with TypeScript!
Let me know what you think in the comments if you need something more detailed or some extra explanations, I’ll do it :)
Happy coding!
Part 2 is now ready!
