Docker + Typescript: Setting up Typescript to run in Docker container

what's going on guys so in this video we're going to take a look at how we can dockerize a typescript application you're going to see that working with docker for a typescript application is a little bit different than a traditional javascript or node.js application just because we have to handle the whole build process but in the end it's not too difficult and hopefully after this short video you guys will be able to get started and get building your own dockerized typescript application so what we're going to do is we're going to create a simple demo dummy express application with one simple route just that we can use for testing purposes and then we're gonna figure out how we can run that within a docker environment so let's go ahead and initialize npm so i'll just run an npm init y and once we do that we can then go ahead and install express and once express is installed uh the next thing that we want to do is we want to install the types for express because we are building a typescript application so we'll do npm install at types slash express and you don't ever want to save this as a regular dependency you want to save it as a development dependency because types are only relevant during the development process so we'll just do dash dash save dev and we're gonna create a folder and we're gonna call this src so this is gonna be where we keep all of our source code and then within here we're going to create our index.ts file and the first thing that we're going to do is we're going to import express so we'll do import express from express and then let's initialize our express instance then we can go ahead and set up our one single route that we're gonna have for application we'll just send it at the root url and then we'll set up the route handler so we got the rec and the response and since we are working with typescript we can actually type these out so if you do request with the capital r uh vs code is going to give you some import options and there's a request that's the first one here um that's the built-in one i think that's for the fetch api you don't actually want to use that you want to use the one that has the word express in it that's from the express library select that and vs code is going to automatically import that for us one of the perks of using typescript and you can see it gets imported from the express library and we're going to do the same thing for the response so we'll do response and make sure you select the one that says express and for this route we'll just do a return and then we'll just say res.json and then put whatever you want it doesn't really matter like i said this is just for demonstration purposes so we'll just do status success and then we'll listen on some specific port so i'll do app.listen and then we'll select whatever port you want to listen on i'll just do port 4000 and then for the callback i'll just do a console.log listening on port 4000 so that's our express application obviously dead simple you know nothing else really changes all the other steps are going to be the same regardless of how complex your app is or how simple it is it's all the same principle so we're just going to stop it right there the next thing that we want to do is we want to set up typescript so let's install typescript and remember you know there's no application that actually runs typescript in production it's just a development tool so we want to do save dev so it's a development dependency and then we can do npx tsc dash dash it so that's going to create our ts config file and within here let's go ahead and configure this um you know you could set whatever options that you want i'm going to just set up the the basic ones that we need so the first thing is going to be the target so what do you want to build to the default is es2016 you can build the es6 es5 it doesn't really matter i'm just going to leave this one as default actually the next setting that i want to change is router but this is going to basically tell typescript where is all of our source code essentially and so our source code is going to be within our source folder so i'll do dot slash src and then finally we want to search for outdoor so you can see it says specify an output folder for all admitted files so that's basically saying when we build our code uh where do you want to store the finalize js javascript files too so i'm going to uncomment this and i'm going to save it in a folder called dist dist or build you know those are the two common ones i'm just going to store it in a folder called disk so when we actually build our code it's going to create a new folder within our root project directory called dist and then put all the code in there all right and so we've got all of that set up the next thing that we want to do is uh from a development perspective we want to set it up so that we can run our application and then our code will automatically restart and build for us automatically right because we don't want to have to build our code manually then run node and then you know index.js and then anytime we change our code we have to do that manually and restart it instead we want to use a tool kind of like nodemon but for typescript and so there's actually a good library for this that's called ts dash node dev so we're going to do npm install ts dash node dev and then we want to do save dash dev because it's going to be a development dependency and so once we have that library installed we can go to our package.json file and we can set up a script and we'll call this one dev so when you're working in a development environment we're going to do ts dash node dev and we want to run the index.ts file so you just provide the path that so it's going to be src index.ts all right and now what we can do is we can do an npm run dev and so our server should start we should see it's a listing on port 4000 and we can test that out so we can do local host colon 4000 and we should say see it's a status success perfect now the next thing that we have to do is let's make sure that since we are working in a development environment if we change any of our source code it should automatically rebuild so i'm just going to add in a few exclamation points hit save and we should take a look at the logs and we should see it say restarting so if it did that's a good thing we can just double check to see if it worked and we can see the exclamation point so we've got our development environment uh set up at this point all right so let's go ahead and stop our development server and now let's set up our scripts for uh production environments so we want to be able to build our code so we get all of our javascript files and then we want to set up our start script so that we can run you know node index.js or whatever our file's called so let's go to our package.json file and let's create a script and we'll call this one build and so to build our code we just run tsc so that's going to build our source code and we can test this out so if i do npm run build all right you should see a new folder um get created for us called um uh what do we call it dist so this is going to create our javascript files so let's test that out and you can see the dist folder and you can see the index.js file that was created from this index.ts file so this is our a same express app that we wrote in typescript just convert it to plain javascript perfect and then from a production perspective if we go back to our package.json set start and for our start script we want to do two things we want to do an npm run build right because we want to build our code first and then after that we'll do and then we want to run a node and then provide the path to the index.js file so we'll do node build slash index.js so let's try this out and i'm actually going to delete this file just to make sure that it actually works and i'll do uh npm start all right so we can see it's building our code and i realize this should actually be dist not build because that's the name of the folder and we'll try that again right and it looks like it's running it says listening on port 4000 let's hit refresh and try that and it looks like it worked perfect now before we actually get to the a docker aspect of things there's one more thing that i want to do and so sometimes you'll see that when people work with typescript what they actually want to do is delete everything in your dist folder before you actually build your code because the reason that can potentially be an issue is let's say i've got some files that i built already and then maybe i made some changes and then i rebuild right all of those files are still going to remain there and then we're just going to be adding the new files to it so we could end up having stale or old files so it's best to actually go in and delete it every time you do a start or a build and the way we do that is there's actually a library in node.js called rimraf it's kind of like the equivalent of doing like a you know an rm rf in a linux environment right it's just used to delete files so let's actually install that in our package.json file so that we can use that in our build script so i'm going to stop this i'm going to do npm install rimraff that's the name of the library and then this is just going to be a development dependency once again and in our build stage what we're going to do is we're going to do rim dot slash dist and and tsc so what this command's doing is rimraf dist is basically saying we're going to delete everything in the dist folder that's what this command does and then after we delete it we'll then run tsc to build the file so it's basically just clearing out the folder and then rebuilding our code and now let's try doing an npm start just to verify that everything works so you can see it deleted the folder recreates it and then rebuilds it all right so hopefully you guys saw that that's the whole point of the rim ref you don't have to do that but i think that's kind of considered best practice and we'll stop that for now okay so now it's time to actually get started with the docker side of things the first thing that we have to do is uh create our docker file so that we can actually create our image so in our root project directory i'm going to create a new file and this is going to be called dockerfile with a capital d now this is where things are going to get a little interesting so um if you've ever created a docker file for a basic node.js application you might have an idea of where to start but you're going to see that we're going to do something a little bit different for typescript and the reason i want to do that is the ultimate goal behind docker and docker images is we want them to be as small and lightweight as possible that means i don't want any unnecessary files that aren't absolutely needed in the final image all right if they don't do anything do not put them in there i want the image to be as tiny as possible i want the container to be as small and portable as possible so what we're going to do is we're going to take advantage of docker multi-stage builds and i don't know if you guys are familiar with this but the idea behind multi-stage builds is that we can create a container perform a certain set of instructions and then we can create a separate container copy files from the first container and then run the second container as the final uh final image and uh if that doesn't make sense don't worry i'm going to write it out and you're going to see that once we write it out it's going to make complete sense but the idea is i want to create a container where we build all of our code where we run npm run build and if that's going to convert all of our typescript files to javascript and then what we're going to do is we're going to create a new container and just copy all of the javascript files not the typescript files into the new container because we don't need any of the typescript files nothing can run typescript so there's no need to copy to the final image that's a waste of space and a waste of time so let's get started i'm going to show you how to do that and it's also going to make it very easy when you're trying to switch between development and production environment because we can have one stage for development and one stage for production so first things first we have to define uh what image we want to use kind of as the base image so we'll say from and then there's going to be one actually if you don't know we can just search for docker hub we go to docker hub and then search for node we can use the default node js image you can see all of the different versions pick whichever version that you're using it doesn't really matter or you can just use whatever's latest i'm going to use node version 16 and then i'm also going to do dash alpine so that's going to give us a smaller lightweight image you don't have to use the alpine version but i think more people use it than not because it's a slimmer version and like i said you want these images to be as slim as possible and i'm going to say as development alright so this is kind of part of the multi-stage build process so this is just giving this stage a name so uh for now if you don't really understand that that's okay i'll explain it in a bit it's gonna make sense when we get further down actually you know what we'll just delete this for now because we don't actually need it yet now the the the normal thing that i like to do is set the working dir so the working the worker is just basically uh what is the main folder in the container that we're going to be working with so when you set the worker anytime you run any commands anytime you copy files it's all going to be with relation to that specific directory so if i tell it to run a command it's going to run it while it's in that directory so i'm going to do workdir and the directory is going to be user source app all right then the next thing that we want to do is we want to copy the package.json file and the package.lock.json file so i'm going to do copy package and then i'm going to do a star dot json and then dot so a couple of things that you might have questions uh with regards to this line what is this star right here so like i said we want to copy the package.json file and then the package.lock.json file okay so when you do this star this basically is like a wild card so if you ever work with regular expressions this is basically what it is so this is going to allow us to say copy both the package.json and the package.lock.json file and the star just means there's going to be any random number of characters between the word package and the dot json so this is going to match both of these files now we could manually just write out two different lines saying copy this package.json file and then copy package.lock.json file but it's a little easier just to do this and this is what you're going to see in most of the documentation the second thing is the directory where we're going to copy it to within the container so the dot is going to copy it to whatever our working there is so we can just do a dot here because we've set this or we can you know manually type out user source app but it's just easier just to do a dot because we set the working dir and like i said when you set the working dir all of the commands anytime you copy files it's all going to be done in this directory all right then after you copy your package.json file you want to run npm install so this is going to install all of our dependencies that are listed in package.json as well as our development dependency and that's an important thing to note the next thing that you want to do is we want to copy all of the other files including our source code so we'll do copy dot dot all right so once again what do these dots mean dot means the current directory is what i want to copy so everything in the docker dash ts um the root project directory and the dot here means the directory in the docker container and like i said just like with the copy line right here because we set the worker it's going to copy it to that directory or we can just write out that whole directory ourselves but like i said this is easier now the second question you might have is why do we copy the jst.package.json file first then do an npm install and then do a copy well this is an optimization so docker has certain features that are designed to kind of save us some time and the way that docker works is that every single one of these commands is kind of considered like a layer in your image so this is the first layer it copies the node.js image and then we set the workdir then we copy the file that's another layer and we npm run install and then we'd copy these files so it creates a different layer and what's great about docker is it actually caches the result of each one of these lines so when we copy from node 16 dash alpine it it caches that result so if any other time we need to you know build an image and the first line is from node 16-alpine right it can just use that cached result and then the second line workder user slash source app right that result is also going to be cached and the reason i i mentioned this is because think about what happens when you're um you know in a development environment and you're writing your code right what is the part of the uh what files in here do you think you're gonna be changing the most often your source code right your source code is going to be changing pretty frequently and so every time if we don't have this um enhancement what's going to happen is every time we change our source code we're going to have to oh actually i think a better way to say is what happens if i just delete this line for now and then just put this up here all right if we do it like this what's gonna happen is um every time we change our source code it's gonna say that this line has changed because we're copying all the files here into our container and since one of these files have changed docker says oh we can't use the cache result of this because the file has changed we're going to have to rerun this line anytime we rerun one of these lines we have to run all of the following lines after that and that's a problem because that means every time we change our source code we're going to have to run an npm install and we all know that is a very long process installing all your dependencies can take minutes sometimes so we don't want to do that instead if we undo this by copying our package.json first and then running an npm install that's going to cache this result it's going to cache the result of all of our dependencies uh with these two lines and then by putting our copy for the rest of the source code down here any time we change our source code that's only going to impact this line so we'll only have to rerun this line and any other lines after it we do not have to run these lines so that means every time we change our source code we don't need to rerun npm install we can use the cached result and so that way the only time you ever need to run an npm installer docker will ever need to redo that is if you change any one of your um development dependencies or your or your production develop dependencies only if those changes will you have to rerun an npm install so that's kind of the main idea behind why we split it up like that all right and so after we copy our source code we then run and run npm run build because like i said in the first container that we create we want to build all of our source code and that's going to put it in the dist folder and that's kind of the first stage and like i said this is going to be a multi-stage uh docker file okay so now once we've built our source code i want to copy it to another container right because this this container here has all of the unnecessary typescript source code that we don't need or want to use we just want whatever's in the build folder that we that it created or sorry not the build for folder but the dist folder so what i'm going to do is i'm going to say from and then we have to specify what is the image we're going to use in our final container and it's going to be the same thing the node colon 16-alpine but it can be different and then we can also give this a name like i mentioned but um i'll leave that blank for now actually let's go ahead and now don't worry about it and here's a couple of optional lines you don't have to use it but we can set arguments and here let's say i want to set the node env and i'm going to set this to be production because this is for our production image and then we can manually set an environment variable if you want and i can set the node environment variable to be equal to i can just do dollar and then pass in the argument here so if i put in node underscore env whatever value i passed here which is production it's going to get passed into an environment variable into our container during runtime uh once again we're going to set the workdir here it's going to be the same path user source flash app and then we're going to do the same exact thing a copy package.json and then same thing we're going to do an npm install but we can do um i think you can do npm install dash dash only equals production so what this is going to do is since this final container is going to be for production we don't need all of the development dependencies when you do dash dash only production that's going to install only the dev dependencies we're not going to include all of the development dependencies we don't need these we don't need typescript we don't need ts node dev we don't need rimref we just need express in this case and you can also do i instead install we can do ci so i think this is better if you're using like um like an automated pipeline now this is where it gets interesting what we can do is and what we need to do is when we run npm run build in the first stage in the first container is going to create all the files within a folder that is in user source app and then dist user source app dist so i want to copy the files from the first container into the final production container so how do we do that well we give each stage a name so i'm going to give this a name as development or you can call it as build doesn't really matter what you call it but i'm going to call this development and then i'm going to call this as production and what we can do here is we can use the copy right this is the same copy here that we have here same command but i can say dash dash from and we can provide a name of a stage so the name of the first stage is development and what's the folder that we want to copy from well it's going to be under user source app and then remember when we run npm run build it's going to create a folder called dist so we can do dist and then where do we want to copy it to well we're going to copy to current directory and remember the current directory in the container is going to be whatever our work there is so that's going to be user source app and we can just copy it to dist simple as that so that's how you copy files from one stage to another stage and so now i mean if you take a look at our final image it's pretty slim first of all we've only installed the dependencies for uh you know for production no development dependencies and then we'll only have javascript files we won't have any of the unnecessary typescript files and then finally the command that we want to run when the container actually runs is node node dist index.js so we're just basically running this file now we can create a we can create a script to do that but you know a lot of times people say that you know when you're in the final working production image you don't want to run npm it's better just to use node directly this is just what some people say i don't know if everyone unanimously agrees on that but i've kind of stuck with that just because apparently sometimes npm has a hard time sending signals to the docker container so it's best to just run node directly all right and so that's it guys um that's all we have to do for the docker file the next thing that we're going to do is we're going to set up docker compose so i can show you how you can set it up for development and how you set it up for production because um you will have to overwrite this command for a um a development environment because this is just running npm run build there's going to be uh you know if we're running in development we want to make sure that we run npm run dev which is going to set up our development environment so we'll take a look at that in a second or two but before we move on to that there's one thing that we're missing and i noticed that just now um but when we do a copy everything here when we do copy dot it's going to copy everything here into the container and that's bad because we don't want to copy our node modules folder from here into our container we're going to already be doing an npm install there's no need to do that that's a waste of time waste of space we could be copying potentially dependencies that we don't need so let's set up a docker ignore file so you do dot docker ignore and here you just specify all of the files and folders you don't want copied over so we don't want node underscore modules and we don't want our dist folder here copied over as well all right so that's going to prevent us from copying on any unnecessary files and now let's move on to docker compose so uh what we're gonna do is we're gonna actually have two separate docker compose files one for prod one for development uh the first thing that we're gonna do is we're gonna create the first one for development so i'll just call this docker dash compose dot dev dot yaml and for this file um the first thing that we always have to do is set the version pick whatever version you want i think i just had 3.4 for no reason doesn't really matter as long as it supports all the commands that we have then we have to define our services so in this case we just have one service which is our express api give it whatever name you want i'm just going to call it api uh then the first thing that we want to do is specify the build arguments uh you know how do we build the image for this so you have to specify the context so that's basically kind of like i guess the simplest way to put is like what's the path to the docker the docker file basically so i just do dot that's basically saying hey look all of the files this is like the root of our project directory this current directory that's where our docker file is uh and then we want to specify uh target this is important right because if you take a look at our docker file we don't want to go to the second stage because the second stage is for production environment we don't want to do all of this unnecessary stuff we want to just run the first stage so how do we run just one stage and stop after that well that's what the target argument is you say target and the name of the stage you want to stop at so we want to stop after the development stage and so that's going to take a look at our docker file look for the stage called development and it's going to run all of the stages before it as well as the development stage and once the development stage is done we stop and so since this is the first stage there's no other stages to run before it so it's just this stage that's going to run the next thing that we want to do is set up volumes so um obviously when you're in a development environment you want your code to sync up with the container anytime you change it how do we do that we're going to have to use a bind mount it's a special type of volume and so here we provide a list of volumes and the way you do a bind mount is you specify the directory on your host computer um as the first argument so that's going to say uh the current directory which is dot slash and we want to sync it to what directory in our container well that's going to be user source app right that's where all of our code's going to be stored this will create one problem because if you remember in our docker ignore file we're saying when we create the image don't copy the node modules folder over however in our docker dash compose dash dev or actually yeah here when we set up this um bind mount uh what's gonna happen is when the buy mount runs it's gonna copy all of these files into the container so then it's going to then copy our node modules folder into our container and so that defeats the whole purpose now we've potentially created issues so how do we get around it well there's a little loophole or trick that you can use what we can do is we can provide a more specific path to a uh to a directory in our container and just make that an anonymous volume so if i do slash user slash source slash app slash node underscore modules that's going to be the path to the node modules folder in our container and so by adding a more specific volume in this case it's an anonymous you know which is just a non-named uh volume it's going to say hey the the policy here is not as specific as this one because you can see the path is more specific going all the way to the node modules folder and it's going to say basically leave this alone leave this folder alone do not sync it with the do not sync it with our host machine that's going to prevent the node modules folder from getting overwritten from our host computer just a little trick uh the next thing that we want to do is set up the ports so we have to open up a port so that we can translate traffic from our host machine to our container so i'll do ports dash and so here we have to specify two things all right so you're gonna put a port number on the left side and a port number on the right side so the port number on the right side is whatever port the container is listening to so our container is going to listen to whatever port we set here port 4000 so that's what you're going to do inside on the on the right side and the left side is going to be what port we should be listening to on our local host machine so how do we direct traffic from our local host which is our my windows computer here to the container so if i want to go to here and just type in localhost colon and then some port number that's going to be the number that we want to put here so if i want to say i want to go to localhost 5000 and i want this to get sent to my container then i would put 5000 and so that's going to take any requests to our local host on port 5000 and redirect it to port 4000 in our container and usually i always like to have these two things match so i think it's just easier just to send it to localhost 4000 instead of having 5000 and then getting translated to 4 000. so it's gonna be four thousand to four thousand which means the the way to access our container is gonna be localhost four thousand just keep that in mind but you can choose any port ultimately if this port's in use on your machine then feel free to use any other ports and then this is the important part so if you take a look at our docker file you can see that at the end of the stage we run an npm run build we don't want to run an npm run build remember we're running in development environment so instead we want to make use of our dev script where we run ts node dev so i want to overwrite the run command here all right and instead of using this one i want to provide my own in the docker compose file and the way we can do that is by specifying a command argument so i say command and then what command do i want to run well i want to do npm run dev and that's it guys so let's give this a shot okay so let's now start our docker container and so we can do a docker compose up however because we didn't name our docker compose file the default name we called it the dotdev.yaml we're going to have to rename it or we're going to have to provide the name of the file to docker compose so we'll do docker dash compose dot dev dot yaml and then call up and so this is going to build our image and then once it builds our image it's then going to start it hopefully using the npm run dev command so that we should see it um automatically reload anytime we make changes to our source code all right so if you take a look at our logs you can see that it says listening on port 4000 so hopefully it worked let's try uh going to localhost 4000 and i realize i misspelled this it's local host 4000 and we can see status success awesome now let's quickly do one little check let's make some changes to our code i'm going to delete the exclamation points make whatever change you want save the files and let's take a look and see if our code automatically reloads automatically i already see an issue because we should see in the logs it updating and it didn't look like it did so if i go back to here hit refresh i can see the exclamation marks are still there so why is this not working well it looks like the files um well first of all let's actually open up a new terminal and let's actually connect to the container so if we do a docker well for let's do a docker ps to get the name of the container let's call it docker ts uh dash api one so we'll do a docker exec dash i t for interactive mode and then we'll go into that and then we're gonna overwrite the command instead use the the sh so this is gonna allow us to drop into bash or whatever this shell is and this is going to allow us to explore the file system and so if we do an ls we can see all of the files and we want to go into the source folder and we want to just do a cat that's going to print out the context of the index.ts file and let's take a look at the file so let's see what happened um did the files actually change so i deleted the exclamation marks and i do see it did change so there seems to be an issue with ts dash dev uh picking up the changes because our bind mount is properly syncing the files so what exactly happened well i did a little googling and it looks like when it comes to docker containers there are some issues with ts node dev uh package we actually have to make make some changes we actually have to set up the polling mode um i don't really know what that specifically does but if you go to our package.json file uh within our dev environment we want to add this dash dash poll command so when you set this polling up i guess ts node dev will pull it to check to see if the files change regularly every few seconds or so so this is what it's going to use to kind of make sure that it can pick up the changes because i guess it doesn't like to work too well um in a docker environment by default so let's change that and i'm going to go back to my uh console here i stopped that and i'm gonna do dash dash up um keep in mind since we did make changes to the package.json file what we need to do is rebuild the image and so when you do docker compose if you just do an up right now it's not going to rebuild the image right it just looks for any image with the correct name and if you do a docker image ls all right we could see that there's this image called docker ts underscore api which was created when we did a docker compose up it's just going to look for a image called this it doesn't matter if it's an old or stale image it has no way to check it so you have to manually tell it you want to rebuild it so we'll do dash dash build it's going gonna force it to rebuild the image all right and so now it's listening once again i'm gonna hit refresh so we see that we have it without the exclamation points and now let's try making a change so now i'm going to add the exclamation points hit save right and already i see something good in the logs i see it restarting so it looks like it probably worked so if i hit refresh we can see that it did successfully work so awesome we've got our development environment set up one other thing to note you know uh usually when i do a docker compose up uh whether i pass the build flag or not doesn't really matter um i don't want to open up the logs or connect to the logs automatically so you want to open it up in detached mode with the dash d and that's why that way it just well i actually ran with the dash dash build but ignore that for a second we'll let it build real quick and then it starts our container and it's not going to automatically attach us to the container so that we still have our console um but if you do a docker ps you should see it running and then if i refresh we can see that it's our api is still working awesome so that's our development environment in the next section we're going to take a look at setting up our docker compose file for our production environment all right so now let's set up our docker compose file for production so i'm just going to do a new file and i'm just going to call this docker dash compose dot yaml i mean you could technically call it dot prod but i like to just leave the dot plain dot yaml as the prod version i'm gonna do the same thing specify the version pick whatever you want i'm gonna do 3.4 then we'll do services call it whatever you want i'm going to call it api just like we did before and then we're going to have to do the build in this case we do context current directory that's going to be the path to our docker file and then target the target is now going to be different we now want to go all the way down to the production stage so we're going to pass in the target as production and then we have to specify the ports so once again we can use whatever ports that we want i'm gonna do the same four thousand four thousand and that's all we have to do you can technically pass in whatever environment variables that you want don't really have any for this demo application but the regular rules apply at this point you know there's nothing specific to typescript that you have to do um really the main thing is in production we just want to specify the target set it to the production stage so that if we go to our docker file we'll go through the first stage we'll build our source code we'll then copy our source code into the dist folder in our production container and then run node index.js and make sure that when we do an npm install we only install the production dependencies and let's just double check to see if this works so we'll do a docker compose and we don't have to specify a file name just because um we use the default docker compose name um we will want to rebuild the image because it's using the image that we built for our development environment we'll do build and i forgot an s here so docker compose has no idea what that is let's run this all right and we can see it's listening on port four thousand i see no mention of ts dash no dash dev so that's good let's double check to see it worked i hit refresh it still worked now let's make a change to our code and double check and make sure that nothing changes because in production we don't want ts node dev to run so i'm going to delete this hit save let's double check to see if anything changed i hit refresh nothing's changed so the exclamation points are still there that means that we are successfully in production mode but i want to just double check one more time just to make sure that um not only did the files not sync on the machine but also on top of that i want to make sure that none of the development dependencies are in there so we're going to do a docker exec it the name of the container and then we'll drop into the shell and we'll do ls all right and take a look at this there's no source folder look at that right we're in our production container there's no source folder and that's because remember we want to keep our containers as lightweight as possible and so that's why we set up the multi-stage build so we just copy whatever's in the disk folder if i go to our dist we can see all right our javascript files and if we go into our node modules folder and run an ls you can see all the dependencies and you'll notice there's no development dependencies in here right if you take a look for ts node dev you will not see it in here and if you take a look at rimraf or any of the other development dependencies none of them will be here you'll just see express and whatever express makes use of that's all all right and i guess one last thing to note is that um you know obviously in a production server you don't usually perform the build process on the server so uh for here instead of actually using the build option you would just specify the name of the image and the specific tag that the image that you built in your ci pipeline or whatever and just point it to docker hub or wherever you store all of your images but outside of that i think this should give you guys a basic foundation on how to dockerize a typescript application

Channel: Sanjeev Thiyagarajan

Views: 19,366

Keywords: docker, typescript, javascript, programming, web, dev, buildfile, container

Id: 4q3br8jRSz4

Length: 43min 18sec (2598 seconds)

Published: Sun Mar 27 2022