Mock REST Backend Server for Angular and React Applications.

hi this is us tomorrow sound of knowledge not info this video is about creating a mock server for your doll won't work so as a promise I need to continue this series for the ioniq and angular project is basically an angular project to with using or finding modules but while you developing this project to connect with your real-time API you need a mock server to test your development thing so basically the environment will be like this every project angular or react project area give you environment files so there you can configure whenever you work as a developer it connects to the mock server mocks there is nothing but all the JSON responses you enable with a node and all the production built is going to the live basically how to sync your mock service with the production server so that you cannot depend on the you know the live environment and if you want you can do multiple scenarios to test with a mock server so that you can you know guess the production issues very quickly so it is pretty simple I'm going to use node and Express server to create a mock server let's create that go to the project and clear a create a folder call like you know make directory like so and then CD server so if you see that this is an empty folder then just initiate your NPM so this basically creates the package torjussen if you've gone to quickly create it just give Y it by default it creates it if not you can just keep your project details like box server and then the version you can continue the description like log server for front and apps and then entry point I'm going to give like server gorgeous and ignore this and you have any git repository connected here and keywords if you want you can give like no work and server and then author even give your name I'm just giving my name and then the license is the same so basically this is what the package torjussen you're going to create so I'm just giving us to conform let me open the project now ya see this is what the packages are Jason what created and now we need to install NPM install Express this is a framework for the node to create a HTTP utilities and it is a web application framework so you can just give save and if you are using this in the angular or ionic project you no need to do this anyone can do that later so basically it adds the Express later version and this and it got created the block so now I'm going to create a file folder called mock so here we are going to keep all the block responses here and then I'm going to create a server file called server door GS so here we need to import the Express I mean you have to import like using required and it's required in the Express library and then let you're going to call the express method I know there are our default library things like what port you want to do you can just create those so I am going to run this project at 8:08 for basically the angular project on site for to double zero and then the ionic at eight one zero zero so make sure it should be it should be like unique and then there is a by default headers to set and what are the thing this is you get all these things and Express documentation how to create API I'm using that app and I'm just importing all the headers and this code is for the passing the JSON request and this encodes and it make it available for this API and the finally like run at this server like listen at this back and board the backend code is eight zero eight four so let me save this and run the project like you can just simply run like node server Dargis so now this is running at 8:08 for you can done you can connect your project to this port and you can test it but before that we need to create a two APs I'm going to create login API and the same way feed API how to create a test ApS for your project for example this is my previous project so once we have a live demo for this and you can see once I start there is a login page here we need to write one mock and then once you login there is a feed page we need to display project called the previous one so I'm going to use this this connected with the light of mine so let me open the network and clear it off so I'm going to see this is my username and password when I hit this this is what it got connected this is what the live one I cannot test every time the application at the live one instead I will take this response I mean the control a control C and come back to the project and I'm going to give user data or Jason and I'm just pasting it here for the reference the token and if you want you can manipulate this so this I already explained if you look at how I am going to generate this token how I written the live API with PHP you will understand more and the same with the feed I have and I'm going to create a feed API too so just the feed data Oh Jason so that has fonts saved it so let me clean we don't want all of these extra I'm going to give the meaningful feed so this was using this data you can work with your application not forced if you are writing for if you are writing for a gap you can just change this to get and post me like you know what kind of API endpoint you going to call this one is login then it start with a function it has three attributes one is a request and the response and the next this I will explain later and then start the project I mean they start the function so here like you know that data this is about the data so we go into Jason post request so request comes from the body and then I let username because this one if you look at this log in this request need is a username and the password we are sending for the feed we're sending this information so based on that you can configure us so that you can test easily so we need to read this as they like you know request so I'm giving username so this will be like data rod username at the same name we have to give and the password data rod password and now it's a pretty simple if condition to check like you know username you can give your fake username like test user this for testing app which means only with these credentials you can log in and our else you can check with all your and that's in an error scenarios test password and then if this is success like you know you can return response toward status like the code 200 and then you have to map Jason off the project so let's import that walk object user data call and require require is nothing what include so the mock and then they user data and the same with our feed data is required and the mock the feed data I think you don't need a Jason is anyway it's nothing change so you can keep maintaining this way I know that you have this reference mock then the user data we are actually pointing here small dot user data and else I mean this is not matched with this username and password so then you can just return response like status you can maintain a different status it depends on your production API how it is going to do it how you written all the status codes but right I'm giving 200 and if you want you can write 500 to test other scenarios as well this I mean like you know bad requests using a password if you want you can keep this in a JSON file and you can point it the same thing so if you look at this whenever you hit the login if you test with this user no password you get this response or else you get this you just save it and restart this whenever you will do changes with the servitor Jason you just restart it and now the server is running again now you can download this postman project I mean application it's a Chrome extension I think it's a Google acquired project so now this is a post the project is running at localhost:8080 yeah so this is where the login and now we are sending a body response with the raw in the text and plane so if you see this this word the response I'm sending so it's Kelly I'm I want to give the same one like you can just queue username text user and counselor text password so this is the body and you're sending the request you can see it's working or not if you see that as one scheme what exactly we gave in this walk and if you want you can just fake one you send it you get this so this way you can connect this endpoint and connect work with your application that way you can easily achieve the things because if if any other team or any other people are working on the backend technology so that we did not stop your friends and development so that's what the main goal for this mock Sara if you're kind of comfortable with the live one you can do it but playing with life is not good so the same before the feed I'm going to add for the feed to go to the project again go to the server I'm just copy pasting the same one again for the feed install that this is a feed and here like you know for the feed if you look at this this mean after once the authentication is done everything is worked with token and user ID the token basically value validates at the backend that token generation should match with both side so I have a different mechanism to generate a token I already explained for the PHP REST API if you look at a lot in the description so for that like you know this is token and this is going to be token and I'm going to read something like user ID and here's re these are minimum things then right now token is dynamic so if you want you can use Richtofen to match with it or else you just ignore it and basically the token is actually related with a user ID right now I'm going to give one and if the gokhan is available and the user ID is one then you can give this smog dirt feed data and then like you know if nothing is there no access and if you want you can write another else if statement like only validate the talk and then give another message like in value taxes something you can do it whatever conditions they want you can write it so now the feed also done we want to change to get get out the same I always recommend to write with a post that way browser will not cache anything in the front and inside if you specifically any static information only use forget anything dynamic use the post always so that's what my recommendation so now again let's kill the project and run this project again so now test will test with feed and this going to be talking I'm just giving something now and this is user ID basically are you have to give all these things but right now I'm ignoring it and you can addict leave it is really require a lot and this user ID is one let me sell the request if we see I got the same response from this like that you can add multiple data different scenarios you can add it and work with it and that's it pretty much if I add something else like a different user and send it will get the no access and this is pretty much done and how are we going to work with the actual angular or react project so now if you look at the recent an angular project so this water project to continue this project like I need a lock API so how project will recognize I mean this way when the user comes it goes to the production on the developers this one so every angular or ionic project has an environment project environment folder if you look at this dis called an environment folder there is an environment prod dot yes in the environment or TS so here this is the production Falls so whenever you give ng serve it it takes this here you can just configure your API URL to the h0 it for but when you give the - - prod like if you look at this package dot Jason when you build the project like and you build - - prod this automatically picks this the production one and takes the live URL so that way like you know if you look at this the angular dot JSON file you will see this configuration for this - - prod it he take see if we look at this it replace with the prod when you went to the production so so this worked you have to do and copy that server folder here in the same file structure and create all your mocks here like a number of all the data what kind of project you want to do and everything you configure with your API backends like this when you run this project like the terminal like open this project and ng so for the ionic project let me kill this this is for the angular server and open the new pro new folder and give CD server and then here give not severed our GS for the MOC so that you can continue developing with this endpoints I mean host 8:08 for and slash login so this way you can continue this project for the upcoming video I'm going to continue this series I'm going to talk about authentication using the mark and the live APs and you will understand more thanks a lot for the watching this way

Channel: Srinivas Tamada

Views: 3,880

Rating: 4.8297873 out of 5

Keywords: Srinivas Tamada, Angular, ReactJS, JavaScript, 9lessons, Node, Mock, Server

Id: BtSI67Yg0Q8

Length: 17min 48sec (1068 seconds)

Published: Mon Aug 26 2019