Debugging Node.js + Typescript Running inside Docker Containers with Hot Reload

do you often find yourself adding console logs all over your application just to find a simple bug well then this video might be perfect for you because i'm going to show you how you can add debugging to a typescript application running inside a docker container we will also add hot reload to it and i'm also going to show you what you can do if you have multiple typescript applications that you want to debug at first i'm going to initialize an npm project and i will also add some dependencies for a simple express server that we can debug later our application will be very simple express server which just returns an html snippet to the user and to start that application we will use dockercompose hence i've created the dockercompose.yaml file in the root directory the service will run on node version 16 and of course to make the application run inside the docker container we also need to add the source code hence i've added the app.ts file the node modules and a simple tsconfig.json file which looks like this and finally to start the server we are going to use ts node so make sure to install ts node by running yarn add ts note at this point we can start our server by running docker compose app once docker compose has started you can go to localhost 3000 to view the application [Music] but we also want to add hot reload such that any file change causes the server to restart and for that purpose we are going to use a library called nodemon which can be installed by running yarn add nodemon once that's done we can switch out ts node for nodemon but that's not enough yet we also need to add some configuration to the package.json file under the nodemon config key we need to tell nodemon which files to watch for and in our case that's just f1.ts we also need to add some typescript configuration where we tell node 1 to start our application with the help of ts node after starting the application with docker compose again you will notice that any file change of the source code will trigger a reload [Music] as a next step we need to start a debug listener alongside with our server and this can be done by using the inspect flag on our nodemon command here we can specify the port on which the debug listener should run on and this port will be exposed such that the visual studio code debugger can access it but we also need two additional flags this one is needed to restart the debug listener on hot reload and no lazy is required to make breakpoints work at this point we are almost done we just have to configure the visual studio code debugger to do this go to the debug symbol and click on create a launch file then we will select node.js but we won't use the default configuration instead we are going to use these settings here make sure this port matches the port you have specified in your docker compose yaml file and as soon as you save this file you have a new application in your run and debug section after restarting docker compose you should now be able to start your debugger and you know if it worked by checking out your logs there should be a debugger attached log in your console now you can add breakpoints to your source code and as soon as this code is triggered force code will catch up and you can inspect all the variables to stop the debugger you can either press shift f5 or click this button here if you only have one application this should be working completely fine but often you might find yourself having multiple typescript applications running simultaneously maybe even with shared code and in this case we have to do some more work for that purpose i'm going to create a second application which does exactly the same as app1 but we will change f1 to app2 of course now we also have to add a second service to our docker compose file and this service will run on port 3001. but we still have a problem because both of our debug listeners for app 1 and up 2 are now running on the same port hence we also have to change the port of the second debug listener but it is enough to change it here because internally we can have the same ports without any problems now we still need to add another launch configuration so go ahead and open your launch.json file here we can simply copy the config from app1 and change the name to f2 and use our new port which is 9230 starting dockercompose you should recognize that there are two different debug listeners running which also means that you have to choose which application you want to debug unfortunately you cannot debug both applications at once so let's say you want to debug application 2 then you can set your breakpoints and choose app2 and start the debugger if i now open app 1 nothing happens because we do not debug app1 but if i go to app2 which runs on port 3001 you can see that the debugger is triggered as a side note alternatively you can start the debugger by pressing ctrl f5 here you can also select which app to debug finally i want to show you what you can do in case you want to import code from a shared typescript library hence i've created a simple typescript library called lib1 and it only exports the send response method this method is now used in both app1 and app2 and there are basically two things that you have to do to make that work at first you need to set your typescript project to composite true and you also need to add the library to your paths object but that's not enough yet we also need to configure nodemon so go ahead and open your package.json file and here in line 30 where we start the node process we need to add another flag we use a library called ts config path to register the paths configured in the tsconfig.json file so make sure to add that to your dependencies finally do not forget to add the library to your docker containers now you should also be able to set breakpoints inside your library and as soon as i refresh in the browser the breakpoint is triggered even if we are inside the library i hope you will never use console logs to debug your applications again and of course you can find the source code on github so make sure to give it a star and with that said thanks for watching and have a great time

Channel: Florian Ludewig

Views: 8,156

Keywords: debugging typescript inside docker, debug, debugging, vscode, visual studio code, vscode debugging, debug node.js, node.js typescript docker, docker, docker compose, hot reload, nodemon, debug multiple apps, debug composite typescript project, debugging with hot reload, typescript, node.js, javascript, debug docker compose typescript

Id: 1WUoITRINf0

Length: 7min 39sec (459 seconds)

Published: Wed Jan 26 2022