[MEAN – NestJS] Part 1 – Introduction + Environment Setup


hello everyone my name is Chow Tran and I am a web developer welcome to my first coding tutorial on the main stack and that’s jazz in the backend so what is nest nest is a progressive no chess framework for building efficient reliable and scalable server-side applications such as web api’s micro-services and MVC applications the website is nest chest comm writing nest chest feels like writing an angular app it does have the module component approach so if you like angular and you like that approach I think you will like nest j/s so let’s jump in the documentation as you can see in the documentation under the hood nest makes use of Express jeaious but it does provide compatibility with added libraries as well this also applies to databases we are going to use the MongoDB for the main stack but it does support other databases as far as the documentation goes I think nest has a really good documentation from my personal experience I was able to incorporate nest jazz in my personal project just by going through the documentation and github issues if you can go to next year’s github official github but I click on this icon right here and check out their issues check out their poor request the community is correct it’s not that big but it’s great Ness jazz does come with a CLI and to be honest necessarily is not that great yet it’s nothing like angular CLI however it does support some basic scaffolding some basic code generation boilerplate generations a thing is better than nothing go ahead and install the CLI by using this command I’m gonna copy and open my terminal paste let it run Nantz documentation also has a section on CLI so please go ahead and read up on it the CD command to create a new nest application we’re gonna use that in a bit oops alright so the city into your favorite code directory and make a directory I’m gonna call it nest mean this series M’s tours the backend heavily on the backend but it is the mean stack series so we’re gonna we’re gonna touch on the front end as well so I would love to have a root I wrote directory and inside a root directory I have a client directory and a server directory the client has its my angular application and the server houses the nest application and you can call the root directory whatever you want I call it next mean and city into that directory then I’m gonna run that create new application command and it’s a nest new now called server it’s gonna ask you a couple of questions so ask me server version author you put your name there and I use NPM it’s gonna take a while so I’ll be back alright so that generation has finished I use vs Co for this series but feel free to use anything that you like so I’m open my directory with vs code before I do anything though I’m gonna change my font size for teens good thing for teens okay now let’s look at the server that nest has generated for me and if you haven’t noticed already nest uses typescript you can build nest application with JavaScript but by default it is using typescript so it has a TS config of JSON and at Eastland now Jason you can put any rules you like in Teslin but for it tests config I don’t think that you should have to touch it if at all by looking at the source the source folder is where all your code is going to be and it looks extremely familiar with an angular application it has a module it has a service and it has a controller instead of component also it has dependency injections right here it has a magnet es to bootstrap your app module it also has a man not Ejim RTS hmo’s stands for hot module reloading to use hot module reloading in this series there’s a hot module reload on on a website on SGS website in the documentation so if you’re free to read up on that if you want to use hot module reloading but for the sake of it I’m gonna copy this line these lines over to the man TS I’m gonna put it there and I’m gonna copy this line over and I’m gonna delete the Gemara a TS file and also I’m gonna change it back to your tears and again I’m not gonna use webpack but I’m gonna change it and for anyone if you would like to use webpack I just want to mention there’s that Nest jazz does encourage and utilize quite heavily the separation of concern principle so as you can see in the controller the app controller it injects app cervix and it’s going to use the the return value of the root method on the app cervix as the value for this root so the logic has been abstracted to the app cervix instead of putting everything on cap controller and just another fYI you can build your normal node.js application with the same approach with just no chest witness brings typescript and an anglo-irish approach to the table so I like that because I am a fan of angular now I would like to clean up my package dot JSON a little bit and I’ll be back and I’m back all I did was I removed all the carrots from my dependencies I also specified the latest versions for all of the dependencies I removed the FASTA file form body package because we’re not gonna use fast defying and I rerun npm install now to start our back-end open your terminal and sit into the server directory or whatever the directory your nest application is in you can do NPM start but nest JSL IDE does generate a script star def and it uses gnome on it also has a gnome are not JSON so that’s what we’re gonna use so NPM run star death so JSON will execute this command right here which looks exactly like the start script come in and the default port is 3000 so if you go to your browser and go to localhost 3000 you will get hello world the reason why you see the string hello world in the browser is because this class our controller runs this class has been decorated with the controller decorator as you can see it is controller takes in a string to specify the path so this empty argument is equivalent to this empty string so the whole thing is localhost 3000 slash so if I put in route route this we become / route and if you haven’t guessed already now if I go to localhost 3000 I and I hit refresh I didn’t get anything because the application doesn’t know what localhost 3000 slash is but it does know localhost 3000 route so you get hello world and you can check in the logs as well the previous doesn’t have the route but the current one has the road same thing with the with this method which is actually would actually returns the string hello world and it has been decorated with the get decorator same thing it will take in a string as a path so I can put in hello the whole thing is basically routed up get and then hello so if you hit 3000 hello I mean root hello this method will be called I’m safe and you can check the locks that the get operate operation has been mapped to this route hello and every refresh it doesn’t get I don’t get anything and here we go to hello then I get hello world so the flow here is as its mentioned earlier nurse Jess uses dependency injections so the logic theories return a string how the word actually comes from this root method on AB cervix so if I go to root I would see return hello world now if I change this to nest Jess and it’s safe I go back to my browser refresh I’ve got hello nest chairs and you can return like anything I would put any and I return a an object that has success of 200 and the data would be hello hello nest Jess oops and I also have to change every say bills and also have to change this one to any save and now if I go to the present hit refresh and I get the JSON if and if you are familiar with angular you would probably figure out how the whole thing works so you have the app module this class just a class and has been decorated with the module decorator and it has an imports array controllers array that takes in hard controllers it’s equivalent to the Declaration arrays in angular and then providers that takes in all the injectables and our cervix does have injectable so injectable means that you can actually inject other injectables or other services into the constructor other providers until the constructor then in the mantillas you’re gonna take that app module and you you put in as an argument for the create method from ex-factory this will return an eye nest application and it just a wrapper around the Express application so this app you can just use uses like I’m not used to slice Express and finally you listen you call the listen method and pass in the port number another thing will be bootstrap when you call bootstrap so that’s how the next application works so it is okay to run and develop nest application using no man but I would like to actually run in debug next application using base code so I’m gonna show you how to set up a run configuration to to run and debug your nest application using vs code go ahead and go to your debug window and add a configuration we’re gonna use the no chance launch be NPM I’m gonna change this to next chest you can use whatever you want to this script is going to be starved F it is the same script that we use to run our nest application from the terminal and the port is five thousand you can use what ever port you will like these port numbers specifies the port to attach the debugger to so use anything but it has to be different than the port you use to actually run the app on and one important thing is the current working directory right now the large dark JSON stays on the root directory so the workspace folder is actually the root directory but we need to access to the script the start dev script from package.json inside of the server directory so we have to add slash server and we should be good to go inside no ma no ma no JSON remember to add that’s that’s inspect equals 5,000 so so the inspect flag means run no chairs with the debugger and this number is the port number that you specify in your launch dock JSON so remember to add this flag or else it won’t work now if you close this and if I go to have controller I’m going to add a breakpoint here and now just run from the debug window the app will run but it’s disconnect because oh I’ve got to stop this one so again alright so now our app is running go ahead and go back to your browser and refresh you will be taken back to the breakpoint so now you can step over step into like a any debugger I would like to step into this breakpoint this method so it takes me to the app civics and if I step over this it will say return value here and it is really nice right right so now you can run and debug your nest application for obvious code so really nice this concludes my pork one on this series in the next video we’re gonna start implementing sher module the concept is the same as share mojo in angular where you import and export all the providers that you would like to use throughout your application for example the configuration subjects we’re going to use a configuration cervix to is350 application variables just like a Mongo DB connection string or a JSON web token secret key cetera numbers numbers of variables that you can use you want to use throughout your applications and also I want to implement a mapper if you work with c-sharp you would probably hurt on know of all the mapper so we’re going to implement that autumn app or in our application using the package or the map or dots on a map – TS so bye bye and see you in the next video

Leave a Reply

Your email address will not be published. Required fields are marked *