NestJS & Angular: Set Up (w/docker-compose) | Realtime Chat App | 01/17

hi and welcome back to the next video of a real-time setup so you can see it here here everything is about setting up the next 3s and angular parts um so we make like a docker file for our nest 3s and also docker5 for our angular stuff we make it a compose file that brings everything together so we can start with one simple command and then we make sure that we can access our api with angular so that we can connect or that we link our angular service to our an sqs server so that we are able to communicate um and get some data and we also have like a postgres database that we can access from s3s so everything is like ready that we can now in the next videos start with really developing the chat application itself so as always we have like a little structure so first we will have a look at the video outcome so that you can see what we are going to build then we read the user story for this outcome and then we implement everything and we close the user story or check it before and then close it so let's have a quick look at the outcome of this video here so you can see here we start everything with docker compose up we have a running s3s api with our postgres database we have postgres at miner we have our front end running and we have our api with s3s here running and connecting and you can see it here our api is returning um in our controller simple hello youtube from our app service here so accessed by this and then we access this here in our front end we are a service we have like a proxy conf set up so we can just get um from our api this year is getting getting rerouted inside our docker from our proxy from angular to our api service and then it returns the value so you can see here if we go into our browser and we hit localhost 4200 for angular we are displaying hello which is coming from our html here and you can see the test value where this is what we get from our back end and we load with the rsum pipe we subscribe to the observable and then we display the title that we return from our backend so this is what we basically um do in this video so we have our ns3s and our angular setup basically both with the dockerfile and then we have a docker compose file that brings everything together so we can run it later with a simple command so let's have a look at our first story so you can see our overall topic of the series is the real-time chat application with nest js and angular and here we are in our first video so what you need obviously is angular and s3s npm docker on your computer and always make sure that you have like the latest versions of angular and sjs so you can check this very easily by running nest minus minus version in your terminal and in g minus minus version also and then you can see that i'm in s3 7.6 and angular 12 and if you go to npm these are like the latest versions that are published here so for english 12 on sql seven point six otherwise you can just copy this command here insert it and make it globally installed and then you can use it from everywhere so now let's have a look in the story for this video here so the story is as a developer i want venezuela's backend and the angular frontend to be set up both should be run or run a bill with a docker file they should be run and solid together via a docker compose file so that we can start everything with one single command usually docker compose up and the nest gas backend should connect to our postquest database but we also start within the docker compose file and at the end of this video the frontend should be able to retrieve like a basic value from our backend so just access the api get a value and display it in the view to the user for example um and of course the communication between angular and the nest cs backend is happening all inside docker then we have our acceptance criteria that we can check at the end if these are all fulfilled so we want to set up angular we want to set up of course in s3s we want to start angular with the docker compose and docker file and access isn't it in our browser for example on localhost 4200 the basic angular port you want to start in s3s with docker compose and get a basic value at this end point here so a localhost 3000 slash api sgs should connect to a postgres database that we set up with double compose so where we can just use an image from the docker hub to run with the database and then um we and we enter some values like the user and the password so that we can access it via sjs and of course angular should display like a value but it gets from the next vs backend and here it happens containing the container communication so angular then gets this value from our nexus backend and displays it in the view so the first thing that we we want to do is so that we see here i am already inside my git repository that i set up with github and now the first thing that i want to do is i want to set up um sjs and i want to set up angular so we can close this file here and since i'm already inside my folder i can just say nest new and so i make a new nest project here and i want to call this project api so this will generate um you're like a new sjs template for me so i want to use npm as a package manager and then this will install everything that i probably need and then you can see we already have here our api folder and we have the basic um nest js structure so you can see we have our source folder it has a basic um main function here we have a basic absorbs that just returns hello world we have app.module where we have requested our app controller and our app service and we have also here our app controller that is suggested in our module and so for example here we have our get endpoint and then this should return the strength in our app service get hello so in our service we are returning hello world so when this is finished then this year should also go away so it just needs um to install everything so let's wait a bit and we can already have a look inside our package dot json and here we can see we have all our nest nurseries commands for example prebuilt build start start death so that if you change something in your files it works it is with nodemon i think and then it recompiles and so you can very fast develop something or you can debug it you can start with broad so it just runs when your main file here your main.js file or ts file and you see it here now we have our node modules folder and it's installing all the stuff that we haven't installed here and here in our package tracing we also have our nest our dependencies for example extras we have the nest js packages we have death dependencies and so on and so now we have to wait and while we wait we can already open like another terminal and we can since we are also in this folder make also a new angular project and we can just yeah you can see they are very related so unnecessary the command was nest new and then the project name and here we also have ng new and the project name so we can call this for example front end and then this should also ask us some stuff here we want to use angular routing we want to use scss and then it's installing already all our packages that we need here and we have our front-end folder that is being set up for us you can see it here now we are here in one s3s installation and this is already finished so we can clear this here while angular is still installing everything and we can start and move our api so we can cd into our api folder and we can just look inside our files for example if everything is here so this seems good so we can for example say npm run start def so here we say we want to npm run we start with the goal death and this is um here specified in packet tracing so we run run start where is it death and so this is already also recompiling v change something so we can just hit enter and then you see it starts nest and watches for file changes inside this folder here and so let's give it a minute and then you can see we are starting in watch mode and this will normally it goes faster but since i'm installing times and already also have my video here running this takes a bit and then we should be able to access this via our browser so we could go for localhost 3000 and then should be able to get from our controller here our hello world stuff so you can see it start everything we have our app controller and we have mapped get route so basically if i go to localhost 3000 you see hello world returned you could also do this with postman but since it's a simple guest to get request our browser here is enough to display this so at the moment we have nest 3s up and running and now we want to make a dockerfile and make this also running so we are here in our api folder we want to make a docker file and then we have to start um here we for example first need to um specify like a node version that we want to build our container from so and choose an image from this so for example when we make some commands comments we can say specify node version and image and so we can say we want to choose from a base image and the base image should be node and here we can use for example 14 or maybe if you have installed right extensions you can also choose here so at the moment i think 14 is good and then we could for example name this so that we could later access this stage here so we have here like a multi-pipeline stage build we could access everything after this keyword as a stage here with the keyword stage so we could say this development and so we can add this here also as a comment and say name image development and this can be anything and i already have like another video where i just set up an s3s with the stockify docker compose and connected to a database so if you're more interested and more interested in this you can also go to the second video but we will also cover everything from this video here and in this then we want to specify like a working directory this can also be anything because this is um like inside our container so we can say this is like my name thomas where source here in app folder so we can like make a comment here specify working directory inside container and then we want to copy um our package tracing and when we say use here like the i think it's asterix in english so then this will choose or the wild card this will both copy the package raising and the package log trace and so we can use this and then we copy this because we have here our empty so you see it here we copy from our source so from here inside so from our package json to our destination the destination is our current directory inside out a container so we make another comment here and say copy package lock dot json and package.json from host to inside container working directory so we copy this here from our host machine so from my computer in to my docker container to this path because we are here in the working directory at the moment then we can install all the dependencies and so we run this command inside our docker container where we are in the working directory so in our source app and here we have already copied our package json so now we can install everything so we can just run npm install so we can say install depths in site container then we can say we copy and bundle all our sources this then we can just build our application to our dist folder so we can say in run npm run build and we want to expose our port 3000 and then this year is like our development stage and then we can make here like another stage that we can name production and just make a comment so that it's clear that visa separated and like i said if you want to know more about this there's a second video so here we build another image that is uh named production so that we can then later easily start this also we again have node with version 14 and now we call it production then we can set our node and to production and set this also to our node and then we can set or we have to set our working directory set work buyer and this can also be our thomas sorry thomas sauce yep and then we don't have to npm install everything but we could for example copy everything copy and then we save from and then we name it here our stage development that we named here and from this we can go to thomas and then if we run our for example on port 8080 in production we can expose this and then we can run this with the run up like the same that is here in the package.json for productions and note this main so we just say we want to cmd and then we say we want to run node and then dist main so we could now um docker here oh let's do it later with a docker compose and see if everything works normally this should be fine and so there's like um one very you know common thing um because we want to um also be able to debug something later we can go here and our debugger has to be connected to a different port or different interface because um in our like docker we have um [Music] we are only listening like for the local host for the interface in our container and so we need like a port mapping to receive all the requests from the alpha site and so we have to call this to the default interface and port and then we will also be able to debug it later with docker compose so now we can save this here and we can look if our angular installation was also successful and you can see it here we have installed everything for angular so we can cd into our front end and we can for example run and reserve and just start our front end and this will also take some time and between this we can also add here like a docker file in our front end folder and where we then do all the stuff to run to run angular later and also with docker compose then you can let's see see it here now angular is generating all our application bundles and it's compiling the angular the application and you can see here in our source folder we have our basic app component that is displaying some euler blade stuff from angular so we would be able to access this in our browser so we have to write wait till everything here is compiled and then we can go and start it and then we can go to our browser and have a look at it and then we can change everything so well this we can already go to local host almost 4200 and now we have to wait until this is finished and then we are doing some yeah nearly the same stuff in our dockerfile than we did in our other file because both are like note class javascript and stuff so the commands are very um familiar as you've already seen in the clies so you see now we have here a server listening on localhost 4200 we have compiled successfully and now we can see you can see here this is visible boilerplate stuff from angular and we can also go here into our component delete everything save it and when you see it generated or it's updating and then you've seen we have now an empty page here we can say h1 hello and now you can see it here this is like the same that we have in our back end with an s3s so we can for example directly here in our app service not return hello world but hello youtube and then this changes immediately so you can see here when this is started our backend we just have to wait a bit and now it's here and you can see if i refresh everything we have our hello world if i type in hello youtube and save when it's recompiling and now if i hit reload we see hello youtube so this works fine so we have to stop this and now we can start with our angular docker file so this is like very very much the same so we also have here our first stage like where we built everything so we also want to use here node in version 14. we want to name it development we want to specify a working directory and this time we can for example choose thomas front and source app then we also want to copy our package license so also the package lock package json as the normal package json to our current directory our working directory where we are inside our docker container then we want to run npm install we can also for example install inside our container and the angular cli so that we can use the entry surf command later in our docker compose file and we just have to look not quite sure angular cli in version 12 and this should install this inside our container then we can copy everything and then we can build and sort everything our build everything we want to expose our portfolio to 4200 and then we have to do the same as before with an sjs we have to go into our package json and for our entry [Music] run start command we want to set it to a host so we bind it to host 0.0.0.0 and to port 4200 then we can save it now we are already yeah set up to do or to combine everything with our docker compose file so now we want to bring everything together in a simple here in a docker compose file so we make a new file on the top or on the root of our project and we name it docker compose dot yaml and then we have to do some stuff so first we have to specify like the version and this will be here 3.8 and then we have to define all our services that we are using and we also have to name them so this for example our first service is our api so our next js backend and here we want to build something so we want to build from our dockerfire and this is named docker file so you can see it in our ap folder api folder with our dockerfile it's same dockerfile and we want to specify like a context and this is simply our api folder so in our current directory we go to the api folder and then on the top of this folder there is the dockerfile and here we want to target like a stage so you remember we have here in our dockerfire to status development and production and in this case we want to build the development stage or we want to use the development stage so when we make a command or comment here only build develop and state from docker file then we have volumes and here we have two volumes first we want to [Music] our first volume is our api folder and we want to bind this here you see dot slash api this is our folder here two in our docker compose in our docker um container to thomas source app and as you remember in our docker file thomas source app is our working directory and second we want to also bind our thomas source app node modules to volume node keywords so we can say here as a comment we mount our host directory to the docker container we mount current or mount api directory this is the dot slash api to the to the docker container this is when thomas source app and so we can um reflect file changes from my host machine where i develop everything here from host to container so later if i run the stocker file here and everything starts up and if i'm then changing something here these file changes get reflected we have this here because the volumes are mounted together to our docker container and then this compiles again and error starts everything again so that we don't have to reset everything hand by hand then we need like a command how we want to start and this is simply named or said command and then we say npm run and we want to run the npm run start death so this is also specified in the package json from this js and if we want to run in debug mode then you have to change overseer to npm run start debug and also start your vs code debugger i also have there like a different second video um so i will link this in description and you can just have a look at this and we can also say here run in depth mode as we actually are doing npm run start dev and then we can say for example we have environment variables environment environment and these can be for example our database url later our node n so we can also specify this here moment at the moment as development we can say our port is 3000 and yeah we can add some stuff here also later and then last but not least we have our ports so we for example can go here from port 3000 to port 3000 and we have our debugging port this is nine two two nine nine two two nine and uh yeah let's first finish the um [Music] front end here and then i will just draw something that explains the port mapping a bit more so first we have our api service now we have our front-end service and here we also want to build from a docker file so we say we have our docker file that is named docker file and we have context slash front end our command to start everything is npm run start and here you have seen in our [Music] front and docker file we also have like a named stage so we can go to here and we could also say for example here uh how is it target development so our start command would then be npm run start we can also bind to the volume so that our train is here in our on our machine where we are developing gets reflected to the docker container so in this case here we want to bind the front end folder or connected our method to our thomas front end source app i think we named it we have to look it up here thomas front and source app so to this folder here just copy and paste so we don't make any errors here and then we can also mount v node module so that we don't have to install it every time so we say thomas front and source app node modules then we have like before port mapping and this is this is also just 4200 to 4200 and i think in our api at the moment we have like port 3080 we can just change this here also to 50 000 so that we are even um here and here um we also want to access later our api so we have to link it so you can see we say here links we link to another container and another service so we can then use the service name as alias later in our proxy for our angular front end and then this is able to get data from our backend so we can just say we links and we link to our service name this api here then we have like our postgres database that we want to use because you want to connect to it with our um nesqus backend so we use the pos quest image from docker hub for example in version 10.4 i think this is one of the latest and here we have to specify some environment variables that are predefined by docker by postquest image so the first one is postgres user we can just name it user we have a postgres password so we select the credentials that we later use to access the database then we have also the postpress database we can just name this db and then we have another ports and this is um normally running on port 5432 and we can just say for example you want to access it from the outer side from what 35 000 and this maps to the inner port in container to 5432 and for example if you want to access the postcross database from browser we could install postgres at my admin at miner and herefore we use the image um page i think at p3 admin 4. 4.8 and here we can also say depends on and we depend um on the postgres service so this here has to be started before and we also have some environment variables and these are also pretty fine so you can also always go to docker hub go p3 admin and you have here the p3 admin 4. [Music] um i think there's like also like a new version out and you can see here these are like the default environment variables p3 admin default password and so on so for us we just need a p3 admin default email so that we can log in we say admin admin dot com dot com and then we have a p3 admin default password and we can also just name this password and then we have like another ports mapping and here we can say that this is directly for with port 8550 and inside it's port 80 this is like the basic prosperous admin port and then we can access this later with the browser and now we have to add some stuff here to our front end and our necessary aspect and because we want to connect with our next js backend to our postquest database also so we leak need like here an environment variable um in our api service and we can just name this database url and here we access our postgres service then we have our credentials so the user that we entered here the user the password and the database so we say we have user we want to log in with the password password add the postgres on port 5432 against the database db and here you can see since this node.js or this an s3s api is running inside our container we are trying to access the database from port 5432 so on this port here that is just inside the container if we want to exit it from our host machine here we are on port 3 35 000 and because this maps this port here the public port that we can access to the inner port in inside the container and then we can also say that this api service here [Music] also depends on the database service so we depend depend on our postgres service and then we could for example now um try to start them everything up so let's see if we now cd into our normal folder here and then we can just just say docker compose up and see if everything works so you can see here our docker compose file is invalid [Music] because what have we done here our environment postgres p3 default email ah so this should be like a string so let's try again so services api build contains unsupported option command ah i am too far it's nested so this has to go here this has to go here this has to go here and this has to go here now everything see so mapping values are not allowed here so let's go to line 19. so we have to do this so this looks better so now we're downloading all the images that we need we have to wait a bit and then we can try to access everything this is running we can have a quick look at our story so we can close this here we can have a look at this and we can see here our story at the moment we have set up angular we have set up an s3s um we hopefully can start both with the docker composer and dockerfile and access it via the browser so that is what we have to click now and then when this is working we have to make sure that we can connect with ns3s2 with database and for this we then have to um use or connect or we can use type orm and then we can very simple um install the dependencies that we need and just them in our root module here in s3s and specify the connection and here for the connection we can then use our environment variable that we specified here in the docker compose file the database url for the api for on s3s servers that should be able to connect to the database and then at the end in our story you remember we wanted to display a value from end with angular that we get from the monastery as backend and as we have seen here we linked our front end to our api so we have an ended here api to our api here and so then in our angular service we can just make like a request against api slash it's then probably a slash api um [Music] because uh yeah we um oh no it's just api on port 3000 and then we can access our sjs backend and so you can see it here let's see where we are with our docker compose we have yeah download ever yeah much maybe also the note 14 we have um i think the postgres database this will take quite some time so you can see here we are in like i think step 5 of 10 so halfway done done let's wait a bit so now we can see we have built everything so we have here our service our api so you see our nest commands are all started with our postgres database we have our postgres miner we have our front end running and now we can try to access this here so you see here is nothing running we are just seeing our docker container so we can for example go against our localhost 4200 you see this is the h1 hello tag that we have here so [Music] we can go for this and we save it and you see it's compiling and now we have hello a o and we can save it again and we should also be able to access our api on localhost 3000 so we have here our hello youtube and we can also go into our api into our service and change this to and then save it and then you see we have file trains detected and we build it again we really reload and then we have youtube aaa so now we want to be able to connect from our front end to our backend so to get some data so first let's fix this zero again hello youtube and to work later we can also make this to like we want to return an object and then we say we have here like the title is hello youtube and then we are able to access this with angular very easily and we or what we can also do is we can go to our source from our backend to our main file and we can for example say app dot set global prefix and prefix our api so we have here type app services returning something else so of course here we now return also an object so now when we go to localhost 3000 there should not be an answer so you see we have here not found but if we go to slash api because we prefix it we have our title hello youtube like before because we feel like get requests on the base controller that is listing on the base path so now we want to access this with um from our front end so for this we have to go to our front end we have to make like proxy conf file proxy.conf dot json and here we can say we want to prefix everything that is going against api to a target that is http then we name it api on port 3000 and this api here this is the link from our docker composer from our front end to our api so we named it like this and this is our service name like this so we exit access it like this also this route is not or this is not secure so this is set to false and we want to change origin because we're coming from 4 200 to true and then we have to say angular where it finds stuff so we have to go to our where is it angular.json and where we built everything so we see front end where are we let's search for it build so we have here the and reserve and then for [Music] let's say for development we want to have a proxy config and this is source proxy dot conf dot trace and so on so it's our source folder our proxy dot configuration file then we can just save it here we are default configuration is development so we save it and then we can generate for example a service in our front end so we see into our front end we can use our angular cli or we can first like create a folder let's name it services we cd into our source cd into our app cd into our services folder and here we can use the angular cli we can angular say ng generate s for service let's say we want to generate a test service into our services folder and now you see we have here our test service we can also like make a new folder test service and move the service to here one second my computer is a bit slow so inside this here we want to move it yeah sorry now i stopped my adopter compose that was not what i wanted to do so we can start this again and then in our constructor and our service we want to have like the http client from angular to make a request against our backend so normally we should be able to import this http client okay so we want to import the http client from at angular and now that's the question where is that is it in core angular let's go with it angular http client import so we imported from angular common http decline material client of course probably will need first in our module http client module and then this should work so then in our service we want to have like a basic function where we just let's name a test we want to return an observable we could also specify like a type so we can say our interface so we say export interface title string and then we name this like uh let's name a test and then we can say we want to return observable from test and we just say return this dot http so we make them a get request we want to get and return something from interface test and here we just go against api and then our proxyconf should pick this up and return the value and then we can access this in our component we then meet our constructor here we call private for example service test service and then we could say we have like a test value that is from type observable test i can import this and this is just my service dot get test and then we can in our app component very simply say we have here our test sorry my computer is a bit slow today so this value here and then we can subscribe with vr sync pipe to it so this is automatically doing um like subscribing to the observable so then it gets hot and we display the value so this is like the idea let's see if this works so when we now go to our localhost four thousand two hundred you can see first we have our hello that is from this here and then with our test value that we get from our api we hello youtube so for example if i now just go to my api i change in my service we return let's say hello twitch we save when this recompiles give it some moment and then we then reload everything you see we have here hello twitch now front end this is because we access our front end gets the data from our back end so i probably think this is like nearly all but we can now click our story and see if we miss anything so here we have set up angular and s3s docker compose file ah we want to access our postgres database so for this let's just stop docker so that my pc has a bit more power and we go into a new terminal then we go into our api folder and then we need to install everything for our database so we can just copy this here and here they install venezuela as type of m and typo m package and with mysql but we are using postgres so we use the phosphorus database package so we say p3 for the postgres packet this is how it's named in npm so this should work so we install this and then we can go into our api we can go into our app.module and we have to add this to the imports and we also think i'll need the config module in this config and to add this also and let's just make another terminal cd into our api and install venezuela's config and then we say config module.for root we want to use it globally so we set this also to true and this is what you can just find here in documentation for example and because we're a little bit faster than this here we can use the import from here this should be we saw it later and then the second one that we need is the type or m module uh so this is already new so we have to wait until this is finished so now we can run again so then we have our type or module so this is already working we also are here for root and then we can pass in some like options that we want to use so obviously we want to connect against the postgres database so we use postgres from type we have like url and this is the one that we have specified in our docker compose file so we can access it in our api so this is the database url here so we can say process dot n and then we name it we can say we want to auto load entities and we want to synchronize true and then we could try to build again our services docker compose and we can also try since you remember we have like uh let's close this here we have like our database and we have prosperous atma miner this is listening to localhost for file 5050 and in a container is 80. so we can for example just make like a quick drawing um basically we have for example let's see this works or if you can yeah if it's good if i tried here yeah probably let's let's see if this works if you can see anything if not so basically we have here our like our container so this is our container or docker and then we have here our um api so the nest js stuff this is listening to port 3000 and this here is for example outside is our host machine and we can then connect to it to also with port 3000 to own shares we can with 4200 connect to angular because we map this also to the port 4200 as you remember this gets some data from our nsjs api and this connects to our postgres database and now i have to load up what port we were using here so we see for postgres we have port five four three two so this year has five four three two and we also have like the postgres admin and this is for example this is like a better example than the other ones because we have it listening here inside our container or inside docker for port 80 and in our host we mapped this port to port 50 50 and then we can access with this port here p3 admin and connect then to our postgres databasing on queries against it so now we have started it here and we can see if necessary as said while it connected to the database so probably we are having here issue so we have to to build the stuff again i think so we can see it here now after restarting docker compose or docker compose build um also on s3s is running successfully and we have here type or m module we have dependencies initialized config app material config module type or encore module app controller and start everything our front end is running so now we can have for example a look inside the b3 admin so we can go for localhost 5050. yes and then we can use um the stuff that we specified here for docker for the postcards at miner so we have admin admin and password we can log in then we can add like a new database server let's name it database we have to add a connection so this is i think postgres so how we named it here we want port 5432 is here the inside port inside our docker database is the db our username our user and password user password let's try to connect now we see we have here our database db and we could do something with it or see later if when we do something with an s3s we can run queries against it so i think this should be all for this video here and now we can check the stories and we see we have set up angular correctly we have set up nest js we have um well we are able to start angular with docker under compose and we can access it in the browser what is this um the same goes for our necess api we um can connect to our postgres database with nastres and we are displaying a value that we get from our next 3s back end in our front end so this is like the first step that we need and now we can commit everything so we can may say get at minus a and then we say get commit minus message and we prefix this with video one and say set up angular and sjs um with docker fire and docker compose can get data in front and from backend and connect to database so we can then get push this and this can already done so for this time

Channel: Thomas Oliver

Views: 1,993

Keywords: javascript, typescript, nest, nestjs, nest.js, typeorm, git, gitflow, node, development, api, observables, rxjs, nestjs7, bcrypt, jwt, authentication, git-flow, gitFlow, docker, docker-compose, pg-adminer, debugging, hot-reload, angular, angular material, angular lazy loading, material, realtime chat, real time chat, chat app, realtime chat app, live chat, live chat app, nestjs8, nest js 8, nestjs 8, NestJS8, NestJS, nestJS, postgres, angular 12, reactive forms, login form angular, register form angular

Id: IievSCity8c

Length: 68min 37sec (4117 seconds)

Published: Wed Jun 16 2021