Angular: Set Up Frontend and verify Connection to NestJs BE | Blog Project V-06

hi and welcome to the next video of the series so now we are setting up our angular front and and why we are doing business because till now we were just developing the backend with nest Reyes and so next videos and this one here will just be about angular and setting up the front end so beckon in front and we'll be on the same page on the same status at the end and then we can go on with implementing a new feature and a video and do this on the back end and on the front end so in this video we will set up the angular project we will create an admin module and login and register page and some basic routing some of that very very simple so just for setting up and verify that everything is working and so we also want to verify that our connection from our front end to the back end is working we do this trust them taking your login and to go against our end point and then we have our video structure as always we will have a look at the video outcome at first and rather use a story for it and implement a user story and close it afterwards at the end we will have a short look at what might be coming in the next videos yes so let's take a quick look at what we are building in this video and you can see we have some components we have our own module Upland we can switch between lists with navigating here in our service so we have considered in this and you see we now an augment or unlock and hit this button and we go against our authors and clock in with some defined properties so we were switch reverse in the next video to really lock in page and would be hit this you can see we are getting a token from our back-end and so you can see we made our connection and if we use this we can paste this in and vwt i/o and we see that this has all our payload that we specified so you see we what is my name my username my role and it's if good and when is it expired welcome back to video 6 this time we are setting up our front end so we set it up with as specified here and why are we doing this now because till now we were just working on our back-end with nest Reyes and now we want to get them on the same Pedro on the same status soda fountain at the back end so that we can later work in parallel so we can handle when we have done all of us here in the backlog for implementing all the stuff that we already have on the backend then we can later procedure with adding for example the block service or adding the block entry and we can do this in one video on the back end on the front end and services yet resetting now the basics so we can do this later and so we have here a story we want to set up our angular project and as a user I want to be able to navigate between lock in retro stuff and if I have beer or editor or admin to be admin page so I can later register log in and start using the service service means the real object for at restoring and login is coming in the next video and as a technical leader I want to be front-end to be set up as a single page application so with angular so the acceptance criteria it should be setup of angular we want to have a module for our augment stuff so we can use lazy loading so it's not loading at the beginning because with the single page application if you go to the URL you are downloading the whole app but with lazy loading you will just you will download it in pieces so if for example if you hit then we open road then the up in modulus it just being loaded and if you had phenomenal route it's just a normal material then we want to add basic routing and we have our components or patron or content register but not designed but trust that you can navigate between them and we want to paginate [Music] no this is not here and we want to check if our connection to the backend is real working for example we use our proxy contour we make one to check if we can hit actually the endpoints from honest back end we just use button to click and when we submit email and password and track it we are getting a train WT back so we can move this to doing and just let you know this video will be coming in the middle of the week and one or two days later I will set up this year because normally we had all this video videos coming one week apart from each other but these are very very strong together so they will be only one or two days apart so let's start with coding so you see we are here on our block and we are on our branch keep it up so we can say get no feet start video six and then we switch to our future branch to a new one and we are based on develop as always we can clear this up and what we want now is we have our folder API and our postman folder where our requests are stored and we want now to add our angular stuff so we use for this vnu last year I and we can go and you know google angular and then you come to the angular IO page and we want to get started and you can see first we have to insert an or angular globally I already have it so we can check this with Andrey - - version which version do I have so I have two thousand nine one three and let's look at up NPM angular what version is the actual so it's nine one seven so we can install it and you can do this or we can update it and you can do it like and PM instr - globally so for Yocum not for this repository but for your computer at angular and then it should be so now we have to wait a bit and I can explain a few things in this time so what we will do next this is updated we will create our new workspace and this will be here we would have our front and fold out here so it's done so we can now check diversion now we are on one point 9 9 . 1.7 and we are in our block folder here and we can say NV new front end so you can check this year because we are adding the front end to our block project so we want to add angular routing yes I want to use a CSS so we can work with variables and everything we can look at this later and now it's installing all of our packages if we have done this we can just CD into the folder and make angry stuff if we use - - open then it will automatically launch our basic browser that's Windows 10 or we can go and reserved and just open localhost 4200 and then we should see this starting page where you have some basic answer but you can delete this later so let's look this up now it's installing all of our packages and you can already see the folders created now it's installing all the node modules and we have here our angular tracing that is explaining how this should be build so for example if we go for and research and you see we have a bidder what is the target what are we doing and so on so for example we can go for production or for a death so let's wait so now we see our director is already unable to control so we skip to the emulation of git and we can see here now everything is here and we can just see it into our folder front and then call in his earth and now you would see that it's angular 9 it's all compiling to ESM 2015 just give it a yes yes you see it's compiling and then we can go to our localhost 4200 and we have to wait a bit till everything is compiled and started and what we can already do is we can make a second shell for us and when we go into our fault empty and we want later to add angular material can have a look at this while this is installing and this is like UI component library that's good very that's from the same creators as angular and so it's very good working and it's very good integrated you can think of it like bootstrap for angular for example so now we can live and we can split this puppy up so you can see now we are on low cost 4,200 we can read out as patron when we are seeing the basic angular patron what we want to do is there fear like a basic documentation but we want to add a new component we can use this command if we want to add angular material what we want we can use this and so we can do this in our second and inside angular material and then we can see what can we do it's we can add if we a support a dependencies on tests build for production so what - - plot you can specify this but actually when you just want to delete this whole page of course you want now to start with all our form to end and so you see this is the basic page we were seeing so we can lead this completely and now it's you saw its compiled again so alert every time it you save and there are changes when it's complying again and so here we have now some questions from England whoever you want to use a basic thing and they want to that type of cofee from the angular material and browser animations set up so we do everything move yes and then we can just wait and in this meantime we can what we want to have us like the basic menu like at the top so whether you can later switch easily between login and register component and we can see here we are in navigation and this is a toolbar at the top and for this we will need importing our module module atomic theory to per module and our app dot module so we can go for this year and import our met food our module you see now it has to compile all the stuff from angular material so it will need some time we can already look at here some example and probably just use them so we can go to stack plaits which is great for your angular example so if you want to look something up you can just go here into the code and look at it and see if they have a multi-tool borrow example yeah and we can just yeah copy visible and you see now it's starting their dev server which would compile soon let's wait and look what we were accurately doing but we can see it also here this is what we will do so we can mask out or a component copy this in and we don't want to move it at all so we can remove this and what else do we need we need CSS for it and you can see always an angular 1 component as like three or four fire so we have our HTML 5 we have our CSS OS CSS file here we have our we have our few logic in our component and you can see here it says how can we select this in our app so we can for example make in our HTML like something we could do this like the stuff and then we would display this component then we have our template URL so to this component what is the template URL so it's our a component HTML and our CSS and we have also expect fire providing our unit tests later so here it now says it can't find our met to our module and we can move it up we don't want to have to example icons or something like this we just want to have our log in register page or link to it and we want to have our admin to go to our fan page so we can go to our second power field here so you can just move this to the right moment now I want to whatever civil is compiling and we switch to our second share and here we go into our front-end and now we can use our CLI to generate a new module for us and we can say in 3 for angular generate McKuen and now we say we want to have our admin module and so actually we want to have it with routing so we can just specify it as an option so it's routing so you can now see we upgrade our admin module and we have our out in module which is imported into our and not you as you see here we have our router module for child routes and in our epic module we have our routing module here and this is for route so this is important for later then we want to and we generate a component and this should be in our admin and then we will have a folder component and this should be called overview so we have an overview component or a pokemon where we can switch between who is displaying and so for example if trusts and editor is displaying the upland module or the overview component when it should display something I'd spent for our a complete admin who is able to for it starts with zero words of the user so now you can see it already created a new folder components and there we have our overview component which exists six out of exactly the same four fights HTML CSS TS and respect file so we can use this later and then we also want to generate a component login and register so lock him and let's go register so let's make two components out of it and it's not getting too complicated so we can switch for this make another rapper to register so now we have here order for our components and we need our outer module to specify some routes so the first thing is that we want to have our admin module being lazy loaded and therefore we can say we go to our admin route and now what we do is we don't say component but we say let's see load children and then we go for function and we import from our admin the admin module then we go dot them and we export our admin module or imported so we don't need this so now we go to our admin route we will load our lazy load this module and for this to work we need here a new route which has at half of yeah basically nothing where you want to display our overview component so this component is our over pure component and because we don't have specified anything here we need match is it or is it called half match and we want a full match so we don't need this if we got something specified here and then we should load this and yeah let's just check it out let's see if everything is running fine so we have it here and now we can go on our admin component here for our Upland we go for router link and angular and we go for admin or slash up and I think and then we can see if we are here there are we on our local host verse nothing just without this and if I go to your admin page so it does not pretty but we can fix this later and you see we are split finger out to our app in page but we are not displaying anything so let's see what is going wrong yeah so we also need to display our router outlet so where our routers or whatever we are going is rendered in so for this we need our auto outlet and now we should be able to see our overview works so which is in here Hulan to make it a little bit clearer we can say othman over a few works and you see we are here in our upland route and we see it works so if you not get back we have nothing cause we are on our base path or our base route so now we can do this also for login and here we can specify this route also our autumn module and then we go for a path login and the component this just will not in component I'm the same as going with register so we go for register and the component is our logistic opponent so the second thing that we wanted to do it we can just check it up was to have basic components and then we want to check it our connection to the backend is working so for this we can test our log in or out or overlock in API and as you remember we can go with another powershell or another shell go to our API and run it and now we have to wait a bit then let's start it and then we can shrink this with post and if it says yeah still working so let's give it a moment so if we now hit Send you see we get in return X is total and this we can just take and this with our users so we go back to our shell and front-end and we say and regenerate service and we go into our services folder and we what we have created and let's say it's our authentication service authentication servus so now you see we have created a new service this one here and what we need here is we need our HTTP client visits from angular to did some api's well let's see why it is not important a pretty big client from and angular common HTTP I think yeah and so we also need to import this in our module so we need to import the HTTP client module here and now we will have one method that's just called problem and we need there an email and a password and with a spoke of type string and here we can say return this dot HTTP dr. now we are making a post request you can say what we are making here so this is the post request to this route you can copy this rod already and we can just say first it's any so we are just checking if we are hitting our endpoint and now we need what we are passing in and so this is email and password and then we can pipe the outcome such a check and just snap it and I think we don't have inside Eric's face yeah yeah so we can go and p.m. in certain - - safe yeah extreme yes I think let's look it up yeah so let's install this so we can use this and this should be we will get token and then we want to store a bus token and our local storage and this we can just use for set idle and we can go with lock to walk in so we can think about how we call it later and here we want to access our token and you see here this is the property so we add this and then we just return the token so now I think we can import map so we go for import net from X 3s operators and let's see if everything's fine here and now we can check this in our love in component if we actually hit all in endpoint so we can go here for example for a button and just say angular it's click and then we want to execute a method let's say we call it an OP in needed and I think I stood some errors so basically it a wall of even button then we want to go against our dock in the endpoint on our server so now I'm back so the solution was just delete the whole Norden not modules folder and run npm install again so we would see this is working now and now we're going to hit our or in endpoint our back-end or we want to video log in or out from the backend and check if we can make the connection between the Foreman in the backend and what we have to adjust so here we are want to meet up indication service so we say private out of service authentication service and use this and then we go for vista out service dot login and did you see its want our email password and so we can just go for I think this was a password and our user isn't this so we can just type this in now and in the next video we will make it there completely there when you form in our HTML that we are passing here and then we can apply this you can trust you know we can just subscribe to it because we are not doing anything right now and here we get some data and we can say just cancel vogue let's say success suck cess so you see it's compiling when we go to our front end and we go to our and we need our lock in Iraklion again so we can do this the same as our admin route we go for router link and we go for Logan and now you see we can click it we go to all of in page this is our button yeah it's a little too small but you see we hit it it says unknown error they do a response so let's see if I can just see what the business running you see it's here under the thing is it could be a cause Aurora try to hit our endpoint here in our authentication service localhost 3,000 users login we can just verify that this is working so we hit it here we get a response so let's see how we get in here or not and I don't think so and you see we have a cop cause across origin era and so we need to add a proxy or convey to our angular so we can do this in our sauce folder then we add a new file and we call it proxy dot tracing first we need some stuff so we make an object all of it then we say for everything that goes to our API you route we go against target and this is our HTTP and this or HTTP a local host on port 3000 and this is not secure so we have to set security Floyd's thoughts so if we had known at the I wrote we will go and stop with us 2000 and so we have to change no authentication service we have to make it made against API and since we now want to hit her out we have to add this prefix to all our own SKS prefix API we have to address to our back-end so with all our outs and I can't listen to API so you can select all with prefix and our main TS so we go to our API go into our source folder and at this year and we don't call it there is one but we call it the API and now we can see if it's compiled we get this we will get an error but if we go against API this should work so we get an access token in return and now we can have to at our proxy con that we made here where is it Senora there we had to add this into our angular and for this we can just go with the proxy one thick and there this is lying in business lying in source and then proxy dot on dot trace and here we need a comma separate it and then you can see that it's running again you can go against try it again so I think we have to rebuild it for the two dirt and rust and so whereas on in page can just feel a little style so our populism it's just that it's easier to see and to hit so we are not in we have here our button we can just hit it and we get an error again and I'm missing what yeah so we can think this possibly go against API when I should add so if we hit it you see now we don't get to the error again and we can just Duke and all that hope it's storage reset you know so we have our proper token service worked and now we have to look while we are not logging it here so because it had to visit around normally it should go to the concert so yeah you see now it's starting token success so it's need a bit of time and business working invented safe so I've locked open to allocate storage so now we can see we have them yeah we've made our connection to the backend and in the next video we will make you real log in patreon real register page and then in the next videos we will secure everything of this and we will do the lucky number at result and reacts so let's close this video so we can just commit some changes that we did so we shut down all our services we are here so we can make good at - FAA we commit on our changes now we are in video 6 and we edit angular front-end with basic routing and admin module also test that connection to the back end so against our lock in route so we can push list so we don't have set our upstream punch right now we make this and then I will lie to finish it to develop because videos just release in a few days so I would do this later and we can track against our story so what we did was we stayed up with angular this is done we have ma ql4 Ockman also done we have some basic counting between login and register or login and uplands occurs to verify that everything is correct we have our basic components dr. cursor that we will use to expand in the next videos and we have checked our connector to the back end so we use the proxy that conflict so is all done and we can move this to done so let's have a quick look what we will do in the next video there we will just finish our login and register component so we will implement real the real components and very logic to it and then we will save our logged in user in our Andrea X store so this is for handling the store or state management in the front end

Channel: TommiCodes

Views: 12,213

Keywords: javascript, typescript, nest, nestjs, nest.js, angular, typeorm, git, gitflow, node, blog, development, api, observables, rxjs, nestjs7, bcrypt, jwt, authentication, git-flow, gitFlow, pagination, paginating, nestjs-typeorm-paginate, angularjs, angular-2, angular 2, angular9

Id: YKPegsIAWhY

Length: 36min 14sec (2174 seconds)

Published: Mon Jun 01 2020