NodeJs + Typescript Project Setup From Scratch

this video I'm going to walk you through how to set up your node.js environment using typescript I'm going to show you how to set up a test environment and even write some tests for you how to test your API for example and we're going to set up linters we're going to set up prettier and all everything you need to set up to have your node environment ready to go for me for your next project maybe you want to set up a note server or even create your npm package and this setup would work nicely with everything thank you so I have my terminal right here so we're gonna go ahead and jump right into it so I'm going to first make a directory I'm going to call you the node setup for example and I'm going to jump into it and right here I'm gonna do a couple things I'm gonna do get in it to set up my git so initialize my my git a project right here and then I'm gonna do npm in it Airman I'll be using the Y flag to accept every default value so here when I run we can see it creates a package.json file and uh he set up the first the the defaulty for everything and I'm pretty happy with it so now I'm gonna go ahead and make a directory here where we're gonna put everything inside so here just like that we have our project so I'm gonna open this in webstorm real quick and voila it is up and you can see I have the source directory right here and the package.json file that we just created and offset for the rest so the first thing I need to to make the to support typescript we need to install a couple things um here I'm gonna install uh typescript itself I'm going to use the D flag for development typescript and another thing is types for node node this doesn't have type so we can just use the types here for node and we're going to install that let's go ahead and do a couple things uh the first thing we need to do is uh have our tsconfig file so we can do that by doing npx for example or you can just do TSC init so here you can see we create our tsconfig file with all the defaults and all the things coming out here I can use yes next uh normally lib I will turn on when I use when I know I'm using couple product a couple things like jstom for I know something that I'm gonna require uh uh Dom to be tested in the back end so I turn it on just so we can have to put those packages inside there another thing I like to turn on is the root out there as well and for this one I'm gonna put everything inside the build uh let's go a couple more things here um also I'm going to use strict uh I like the default so for yes modules here interval interrupt to true that's good uh another one is resolve Json module which I like I see if I can find it here so there's none of that so I can just resolving dress uh this is useful when you are uh you know you're gonna do some imports for Json which I normally do when I'm doing a node server uh another one that I like to do is this I'm just checking if there is there so cast casing on file names I I like to make sure my file names are uh always good uh always the same way so another one is Skip leap check which I don't find here by default so we're gonna do skip lib check that just skip checking anything in node node modules we don't care about what's going on there we don't need to check types for other things so from there I think uh I have all the good default um ready to go so I'm gonna go ahead and jump in here so I'm going to create a new file I'm going to create something called in the x.js yes sorry uh accept this and we're gonna do a server so I'm gonna do import https oh actually just http uh and then we're going to create a server so I'm going to export This Server actually and to create a server node I'm going to do http create server and it takes a call back look here that I'm not using Express we could do this with using Express it would work the same way so here I'm gonna right head so I'm gonna send by default at 200 and content type I'm going to send the application Json that means we're going to send the Json file so here's what we're gonna actually send I'm gonna it always takes a string so I'm gonna see Json stringify and here I'm gonna send data if it works there you go and now right now that we have a server we can actually listen to the server on board uh we're gonna go for three thousand traditional here and we're gonna just console log that we are running on this Port uh going forward so now uh before we actually run this server uh we which we cannot do right now we have to do a couple couple uh scripts and the first one I want to Target is the build script we're going to talk about a little bit here and for build script we're just gonna run TSC because we have typescript already installed by running this um over running this command which should just work so now here I can just say npm run build which is the name of the script and you can see ran all set and then they create a build direct file directory in our root project here we can see they has the source and the in the x.js we can see how our server looks like when he just want to see where I started here we say yes next uh so this is how it looks in plain JavaScript um I think he's UCS module here pretty good so overall mostly the same so this confirms that our build actually works and let's go for the start so to start uh the start script I'm just gonna do node source and this would actually not work for our current uh setup so if I just do um npm start here so start is a special command a special script you don't have to use the Run so here we can see the error cannot find modular that's because I'm saying node and node is not actually typescript so this file is typescript so it could not find anything um but we can so the reason I created this Cisco week so this can only be run inside the build and we can fix that so we can say include I want to include source and I also want to include package.json so now we can build this again actually I'm going to delete this we're actually going to fix that so NPR run build and it builds again now we can see the build and we can see they have the source and the package so this means that now if I'm inside this build and I run npm start it will just work so if we go CD into the build and do npm start it works so it just uh we can see that I mean just pull the Chrome here oh we can just come here I can see it works I'm using a Json viewer that's why it looks nice here I'm using Json viewer extension so if we see it outside works so what's the purpose of have the npm start so this build is what you're gonna ship to your production so if you want maybe you're using uh AWS [Music] elastic bean stock for example so what are you gonna pass through last week's stock is the content of this build and you can tell that I have elastic installed for when it starts to run uh npm start and it will just work so this is made so this command is made for production we're gonna create one for developer in a bit so just know that the same thing for your net fly uh anything you use to deploy your code um and same thing for npm package too so you put some commands which meant just for when the package is built not for when it's developer so let's talk let's uh tackle this problem of the developer mode here which is probably what you more is mostly interested on so first of all I'm gonna install a couple things um one node mon which is gonna allow us to uh run out service in watch mode I'm gonna use rimraf because you saw me deleting the build full directory manually I'm also going to use npm run all to allow us to run a lot of commands at once and I'm also going to use TS node which is a typescript version of our nodes which you can use to run uh files there much better so while that run so we can create a couple scripts uh one first script I want to do is clean and here we're going to do ream RAF the package that we just installed and we can tell it delete the build directory and then we can update the build here to say npm run clean and then run this command and so far so good um now to run things locally I like to use the local command you can use Dev see many people use different things so local here and then I'm gonna use TS node the package that we just installed to run our server so if I just run node and then I can sell a source so you can see same thing as the start but yeah use TS node to actually understand typescript and then let's let's give you this a try so we can say npm run Loco I like how it sounds and PM run local um by saying let me see this foreign oh I know it's because I was inside this thing and not here so if I had npm run from build you can see that it cleaned uh and now it produced things again so you didn't see anything there so when I put an npm run local we can see it run so we can just check here we can see everything is working fine but the problem with npm run local is that it doesn't attack change so if I can just say it works and just remove the exclamation mark for example and go back to this we can see it doesn't picks it up uh so we can fix that by using the other package creating a new script I'm gonna say npm and Loco on watch mode and here we're gonna use a different package called nodemon I'm gonna watch The Source directory and I'm gonna watch for any X Files extension of TS and Json files and then when there isn't a change I'm going to execute a command npm run local so that means whenever there's a change we're going to run the local again so now if I do npm run local watch beautiful and if I go if I go back to the server you can see there's nothing there if I go back and change this to you see as soon as I save e rerun again and we can go back to the server and refresh you can see that so this is for developer mode and we can make sure that everything a gets updated when we make a change okay now that we know that everything that works let's jump into tests a test is very important so setting up the tests is crucial as well so I'm gonna do a couple couple installs so npmi we're gonna do also development as well I'm gonna use super test which is good for testing uh servers and I'm going to install a couple of things here I'm going to first install the types for super tests because super test is uh is before typescript time I believe and then we're going to install jest node by the time I was just recording node already ships with this test Runner so you can use that as well but I'm so used to this uh I'm gonna keep using types uh just until I further test those things I'm also going to do tabs for chest and finally we're going to use DS Jazz which is like TS node but just for tech for just is uh uh is a typescript cousin it brother of just so you can install all these packages and while that's going I'm gonna come here and create a file call just config .js so here that we see config s is outside of the source which is uh it's not typed so we're gonna do the old way here module exports here a couple things we're going to use a transform this is what we tell just to handle the transformation so we're gonna Target I'm just gonna copy paste from a place here that I have so we're saying Target any typescript file it's any further handed in TS that's what this means any file that ends with TS and use tsjs to transform it so when chess runs we first have to transform into JavaScript then to actually run a test and we're gonna since this is node the test environment um a test I think that's what it is environment is node so we're gonna use node and test rejects this is what the file so ingest you can use specs files or TS files or you can use whatever you want actually and I have a types uh red Jacks here that I can copy so you can tell it uh look at any file inside the source directory at any level and you see check if it ends with test or spec and uh and then we have the JS or TS so it means that we can test any if we suggest the JS or TS files along at the end with test or spec dot JS or TS that's all that already means we can also tell it module resolution uh module module file extensions so these are files that normally your Jazz comes across when it pulls your stuff so you even know we're gonna do Imports of jab TS uh we're probably gonna do something important with JavaScript and I know we're gonna use Json so when we're doing ports so whenever it comes to that we need to uh treat them as a module files so those are based so maybe yeah CSS you have other things that need to go to so then we use we need to use the uh the famous syntax of death of Rooter and we're gonna tell it hey uh The Roots is there so you can have multiple routes oh you test for just to look into so in this case we just have one we just look into the source director and this is pretty much our jest thing and we can go ahead and create a script for it and we're going to call it test and we're gonna say jest there are a couple uh command options for the Jazz here maybe you want to run silent you don't want to see the export you just want to see the final result maybe you want to do coverage I think coverage is coverage I think is you just have to say coverage so this will create that coverage directory when it's done pretty straightforward here so with chest now let's test our server let's see if chess actually works if I did a good job here and I'm going to do index Dot um spec I like to use spec rather than test um because um there's some rare occasions that I just start with the spec before I actually jump to my coding so super tests I'm gonna import that and we also going to import our server uh here and I'm gonna describe the test uh you're gonna be server and here we're gonna create a request a requester this is pretty much it starts the the server for yeah for us so we're gonna do server here and after everything after all my tests are done I can say hey when you're done here server close we're gonna pass it the word done and the done is also come from here and we're gonna say when you're done just uh complete uh close and the server so the first thing look at how uh how easy it is so I'm just gonna get so so we know that when I first query my server here I get this Json file here right so I'm just gonna copy it by the way and I know we gotta get 200 we're gonna get Json and we can definitely check all those things here we're gonna make it asynchronous and I'm gonna do a response I'm gonna do request request oh get and then we're gonna get the four slash we're gonna await on this guy and then we're gonna expect rest status to be 200 and body and we're gonna go back here we're gonna pick up bye I'm gonna run a test because he passes and we can try to make you fail we can see now Phil you see should be it works and like that if I do uh npm run build now we're gonna notice that yeah it still runs fine but then we're gonna check the build we're gonna see that he included his test and I don't want to include a test because that's not part of the build so the same way we set include uh this directory and this file we can exclude anything that has that is inside the source at any level that ends with spec so now when I do npm run build again you can see now it doesn't include the spec file that we had okay now we need a linter so let's set it up so I'm going to install a couple things npm I d we're going to use the typescript uh eslint parser parser we also going to install I'm gonna copy this it's probably the same thing here uh we're also going to do the eslint plugin and we're also going to install the S link itself and I'm gonna go for prettier and if I'm gonna go for prettier we need the prettier yes link config so yes lint config pray dear I'm gonna install all these things and meanwhile I'm gonna come here I'm gonna create a file called yes Lent RC oops yes let RC cool so here I'm just gonna do a Json we're gonna say extends and we we you see extend yes lent this is pretty much standard at this point recommended and we have the plugin uh this is a special es link text syntax we know we have to do the same thing but typescript yes Glenn I think he just slash recommended typescript eslint recommended we also gonna extend prettier and from there we can set up our parsers and we only have a single parser which is the one we installed so yes lint parser and for plugins we have the same thing yes again plugin for typescript and yeah we're gonna start from the root beautiful now we can install get set up couple things here um I'm gonna do after before the test so I'm gonna do lint which is uh es lint we're gonna tell it for Source go for source and then we're going to do format which is for prettier we're in the MPX prettier uh we're gonna write source and then there's other one for check we can do check which is instead of right we do check so check just checks it tells us what's wrong and then um it's asking me to do an npm install okay so check this only checks the the things and length so let's run these commands and PM run length so nothing wrong there npm run for Mac check we can see that we have a couple problems here we can actually do npm run format we actually format everything you fix it so now you see you fix everything if we go back and do the check again you see all things but good uh but furthermore I know for for this um for webstorm we can use eslint and I'm going to say automatically and run eslint when I save which is good and if you have the prettier plugin you can also say hey use the prettier and you can do on save as well on format code on action um I'll leave that out so I'm using the yes Lent so that's pretty good because whenever you make a mistake uh I don't know it doesn't like something that you did here and then it would Automatic Auto formats it for you so all good but we can improve the scripts here much much more so so here I'm gonna do npm run all and we're gonna run a couple things we're gonna say first when you're building I want you to lint and I want you to format it after and I want you to clean of course and but first I want to have to test first so I wanna the test is optional but I like to know that before I build something for production and if is the test is passing so we can just run a test to make sure that we didn't introduce anything that will fail um and I think that's pretty much it for the the build and last but not least I'm gonna create a git ignore which is pretty standard just gonna do a couple defaults that I have saved so this is for the IDE I know for IntelliJ and if you're using FPS code I wanted to ignore this file as well so we don't commit um and also we have tests uh that's all I want to exclude coverage directory and uh we have a couple there's that I want to exclude as well and one of them is node modules definitely don't want that to be committed and if you don't want build to be committed and that's pretty much it and we can then get git status you see that only the things that matter are to be to be committed so we have this files the director is the files and it wraps it doesn't include anything build and everything else so that's pretty much it that's your entire node set up so the content of your server Source directory is up to you it can be a server it can be something you want to package for npm it can be whatever you want but this entire setup will give you everything you need to go and uh and then start your node with typescript in safe way so let me know what you know what you think in the comments uh like subscribe to support the channel um uh you can also check this uh this everything that I just walked you through in a medium I have a article that I will go through every step you can check that I also have you can follow me on dev.2 here you can see the same article as well so I tried to publish on both but I'm more active on medium so in general I write my articles before I make the video so you can catch the things much earlier in the in those blog platforms uh before YouTube so thanks for watching catch you in the next one bye [Music]

Channel: Before Semicolon

Views: 4,718

Keywords: technology, programming, typescript, eslint, prettier, jest, javascript

Id: Z6kt1N3Lx1c

Length: 31min 5sec (1865 seconds)

Published: Sat Mar 04 2023