React JS Tutorial [2023]: Backend Server Setup Using NodeJS and Express

okay welcome back to our react JS tutorial Series today I'm going to cover back end routing so we're going to set up a backend server on our react project here you notice that so far we've set up our front end to do everything on this this is the client-side front end on our local host that we've been hosting this whole website so I'm going to show you how to set up a backend on this let's go down here you'll remember that I did an npx create react Dash app and we installed that into our root folder here well you know I should have created a folder called front end like that and the front end is also called The Client and I should have put all of these files into that front-end client folder because it would have made it a lot more clean because right now I'm going to create a back end and the back end is also called a server but I'm going to call it backend for now so now down here in our terminal I'm going to CD into the back end because we just created that folder and then now we're going to do an npm init Dash y you don't have to do Dash live if you don't want to but I'm going to do a dash y because it creates it automatically I don't have to enter in all this description stuff and we're going to the backend folder now you'll see this package.json that's what it creates right here and I'm gonna step through this really quick right here it's when you do a dash y it automatically creates this index.js for your main so we need to create that inside of our backend here let's create a file called index.js if you don't want to call it that just change this change it to server or something but you know index is fine and then right here where it says test Scripts I'm going to change this I'm going to say start to make it run just like the front end and in here I'm going to say node index you can put index.js or you can just say index so now if I do an npm down here like npm start we'll just run it just like our front end we did an npm start it just makes it easier to remember so save that close up the package we're done and now let's set up our backend server here this is a node server that we're running there's many servers out there that you can run with our react app here for a backend but the node one runs very well since everything we're programming in here is node okay so we're going to install these right here npm install Express we need cores and we need body dash parser make sure that you install all of these because it's very important you might run into issues later on if you don't install all of these and I'm going to set up all these right now and I'll show you right here the package.json it installed or dependencies here's my versions body parts are chorus Express very important install all of these now going back into our index.js here I'm going to do a const Express equals require Express now let's put in the course cores equals require s so we need this course right here so that we can access our server from different domains and you will run into issues you don't install this there's other ways around it but this is the best way so install course here we need body parser equals require body dash parser right there now body parser I think some people might say you don't need it they might remove it later on but for now you do need body parts or I've been testing this out and it's mainly used for our posts for our Forum posts install this so that you don't have any issues later on you need all three of these so now we're going to set up the server here const app equals Express we're calling Express here we're using node with Express to run our server now let's do an app.use and we're going to add in our body parser dot Json now we're doing this not Json because we're reading everything we're parsing our bodies for our forms when we're submitting forms and all that and we are accepting it as Json data so we can process it also need app.use body parser.url encoded and you can get all this code from anywhere if you look it up it's just basic code here for the body parser extended is false and I need one more right there close it up now we're going to add in chords app.use course but we need some options in here so I'm going to do a const cores options equals and let's give our course options we need the origin once again this is basic you can find it if you look up cores what to add in for the option credentials is uh true and option success status 200. so when it becomes success it's going to return a 200 status for us so these are the options we can add in here cores options you can actually just put all this right here directly in here but you know this makes it clean now let's set up our port to run the server on const Port equals 4000. and I'm gonna step through this right here this let's set up the server cons server equals app.listen we need to listen on the ports four thousand and then let's do an error function here because uh when it runs we're going through console log log to let us know that the server is running server is running on ports and the port is Port so that will display in our terminal here when the console is running the server and so we're running this on Port 4000. what do you remember about our front end here our front end is running on server 3000. I can set this port to anything I want I can put 3001 if I want I can put 5000 uh you might see some developers do 8080 just set it to whatever you want I'm putting four thousand and so that's how it works the back end is going to run on this port 4000 so when I'm calling localhost 4000 that's our server and then here I can direct it to any API that I want I can call our DOT get dot post all of that in our back end and then for the front end it's running this and that's how this thing is running when we're clicking on all the links to uh the separate pages right that is how the back end in front end is running and you need to run the servers simultaneously so I'll show you that in a minute when we activate the front end and then we activate the back end and they both have to be running for our home page to work now this is very important I want you to go to our front end here go to the front end package.json file right here and right under our scripts here you can actually put it anywhere but right under our scripts I want you to put in a proxy proxy and we're going to call this HTTP code localhost 4000. this is our new proxy for the backend server comma there and this is for the front end package right so it's very important to add this in if you have all this set up you shouldn't have any issues with the backend server now everything is good on this backend server I'm going to show you how to do our API here how to call the backend server how to do routing on it so let's set that up right now and I'm going to set this up after our app.use here after our course option here and you might see this in a lot of other tutorials they might do an app.get right they do an app.get inside here and then you know if you call the users in here and has a request response so you might see this other developers doing this in their tutorials and they're adding you know even the post in here too like this so you might see this and if you think about it look at this if you're adding like 20 of these get and posts this page is going to get really long and I don't like that they're showing how to do that what I want you to do now is uh we're going to add a router in here and make things very clean so let's go into our backend folder here and we're going to create a folder called routes now create a file in here called router.js inside of a routes folder and this is where we're going to set up our routes so that you don't forget let's go back into the index.js here and let's include this routes so say const router equals require inside the same folder there is a routes right here and the router so now that we required the router let's use it so go down here after the course option we're going to say app.use and we're going to use it inside of the main index file here router so now we have our router set up we never need to touch this index file again oh and I also want to mention this like make sure you add this in like how I add it do the body parser do the cores and then you need to have this router at the very end if you put this router at the top here after the app or anywhere else it might break you need to include this router after everything after all of these options and body parser so have the router at the very end so now we can just close up the index and do our route in here so up here let's do a cons we need to put in Express equals require Express and we need the router cons router equals Express dot uppercase router so now that we have the router here we can just say router dot get and I'm going to do this right here I'm going to pull in our users I'm going to set this up this user thing to show you an example of what we're going to do here last thing we need to export is module.exports equals router we're exporting the router here so you see how we set up this router everything here gets exported into our index and we can just call different routes on this okay so now I want to show you this right here if you remember our front end if I go to the contact page here remember that we're pulling all of this drop down data from a backend on another website and we were using this right here the Json placeholder website right here this is a API that they created on this site right they created this API here users using their back end and their backend is returning this Json code so you know what I'm going to do I'm going to copy all of this copy it and I want to replicate this on our own server so that we're not calling this site right here I'm going to have all of our data in this drop down using our own server and normally you know I would be pulling this from a database we'll go into database in the next tutorial but this one I just want to show you what doing right here cons user data equals I'm just going to paste in all this code here right just to make it simple and uh you know what I'm going to cut this down a little bit so that you can just see that we are pulling this from our server I'll just have one two and three right here right make it easy so this is just Json data imagine if we're connecting to our database and we pull all this and we're returning that same object for us to use and then down here I just do a response that's end and user data and now if I run this on Port 4000 it will show down here I'm going to show you I'm running this front-end server down here in another terminal I'm going to switch back to my back end here I have nothing run on the back end see I have two terminals running these two and so the front end I did an npm start and the front end is running right here this is the front end so now I'm gonna run the back end here so I'll do an npm start and see it's saying server is running on Port 4000. let's switch to our backend here so if I put in localhost 4000 I have nothing to get initially but if I put in users look at that it's returning that Json data just like the previous code from that other website it's returning the same data so now I'm going to use this for our front end to pull in here so let's go back to our front end close up this back end here go down here to our source for the front end and this is why I suggest creating a front-end folder so that you can just read it a little bit better but inside of our source here let's go to the contact page here right and the contact page here this is where we're doing the fetch data you see this axios Fetch and this is where we're pulling it right well let's switch it to our Local Host now this will now pull in localhost four thousand it's going to pull on that users and it should be the same data so let's save this and that should have refreshed our front end when we save it let's go back here and now this drop down should only have a few items see that look at that it's pulling in our three items that we put in right here so that's how the front end and back end works together now I'm going to show you this uh since the front end it does a anytime you make changes to it for our front end here it saves it just remember for the back end anytime you make a back end change uh you have to restart the server so I have to like cancel out the server then npm started again but there's other uh little packages that you can install that can run it and save the change and refresh for you but I'm just showing you a quick example look I stopped the server right so if I refresh this it's not going to pull anything because look the back end is not running there's no back end now because I stopped the server so you see how both of them has to run at the same time the front end has to run and then our backend server has to run to give us our data so if I start this back up now it's running on Port 4000 see here it's running again so if I refresh this it pulls the data so that's how front end and back-end works and I'm going to get deeper into this because like I said this is just a quick example of the get let's do a post because we're going to work with our contact page here to do Post let's go back to our front end here on the close up the back end here let's go to our source go to pages in the contact us page right here in our front end and if you remember in our front end with the contact page here let me show you this is what we currently have we have our contact page and we're currently only doing a get we're doing a get to get this drop down data but now I want to post this data I want to fill out this form and post it to our own server and if we scroll down here here's our form this is what we have right now we have the email I have the drop down select values and then we have a message so those are the three things that we have and all the way up here we are capturing those in variables called email we have the message and then this is our drop down select data so that's what we're capturing to use throughout our whole or application here and then here's the fetch for the drop down but we need a post and if you see down here in the button is doing on click handle submit so that we can handle this form submit and here's the handle submit it's preventing it from submitting we do our error checking and then now we want to post that data I'm going to create a function called post data and so let's create this post data function up here and we'll create it right after our access fetch because I'm going to do a cons axios post data equals async Arrow function and uh you remember from our previous tutorial I went over the react fetch data compared to axios fetch and post and axios is just better so that's why I'm using this one but you want to see how to do the fetch post you can watch the previous video let's set up our data let's do a const post data equals and let's put in our values that we want to post the email the website select right here select value that's what I'm calling it we're going to get that selected value for the drop down let's put it right here and then we have the message right and we're just calling that message so that's our post data and let's do an await on this axios dot post and we're going to post this to our HTTP colon slash localhost now 4000 and we'll post it to a an endpoint called Contact and then we're going to use that post data that we just created up here post data here you go so we can see it better and then after a post I'm gonna do a then on this we're going to take the response we're going to set our errors I created a variable down here called set errors you can call it whatever you want but after we post it I want to put in a message that it was posted and uh so I shouldn't call this errors I should call it something else like form message or something like that so that we're more clear but I just have set data for now and I'm going to set the data to let's see here a class name equals success I have a class called success that makes this green so that I can show on the page and we're going to post this response.data because through this response that data after we post it I'm going to return a message that says it's been successfully submitted okay I call this set error so this is there we go set error okay so we got our post data all correct here for our form after it submits we're posting it to our server so you post data uh I want to clear this data actually let's do a set error to nothing for now I'm going to clear it I'm going to post the data and then it should put in a new error message or a success message after a post we're handling the submit we're posting it to our server so now let's go to our server and set up this uh this post let's go back to the router and in here we need the router.post and you can put it anywhere but I'm just going to put it right here router.post we call it contact and it's taking in a request response it always takes that in and right now I just want to show you that it's posting so let's do a const and I'm going to destructure this email we'll just call it website and message equals request dot body so we're taking in this request this post request right here from our contact that we're posting and we're taking the body of it it's giving us the whole Json data and I'm just going to do a console log to show that it's displaying this email website message and then right here I'm going to say response.send and I'll say message sent thank you because I'm going to send back that response right here I'm going to send that back so that we can display that was successful and this response like data is what's uh returning right here this data so yeah for now I just want to show that it's sending so let's go back here let's start up our server in the back end npm start let's go over here post data not defined okay I'm calling this axios post data let's go back down here and change it axios post data it's not called post data save that here we go put in my email right here and I'll submit this Ramiro one down there this is a test message and let's submit this and there you go message sent thank you to make this green let's go to my app.css here let's put in a success color green see how simple that is created our CSS here for contact us page this is where it's doing the CSS right here for success and you see how it updated it here it made it green you see how that posted the data we accepted the data from our contact us page because we're using use state to get all the values and we're taking that value and putting into our post right here to set up the message format because we were doing a post it takes in data right here in the options we're posting it to this 4000 Port here to our contact and that's coming from our backend router right here contact right there Port 4000 slash contact it takes in this whole thing uh this destructuring is really the same thing as say in constant email equals request.body dot email it's the same thing like that you know if you want to break it up website equals quest.body.website so it's just faster coding comment that out and uh yeah just makes it a little bit faster and easier cleaner to read because we know that the body only has these three right here and we're taking it all in and I'm just console logging it so yeah that's how we set up our backend post here and you see that everything is running great now we have our backend 4000 that we can just create any API endpoint that we want I can call this anything I want we can usually you'll see developers put this into an API so that they can read it better I'm just calling it users for now we created a users and a contact you go to straight to contact here it's not going to pull anything right because it's doing a post on it and this is doing a get to just display this data and yeah this is our front end using port 3000. so that's how everything ties in together with front end and back end I hope that clears things up when I first worked with react I had a difficulty understanding front end and back end and so now you know how the back-end router ties together how to set it up and like I said very important to follow my my setup here through the index to require all these and you know it might change later on nodes sometimes changing some of these they might make this default and you don't need to include the body parser anymore but this is how I got everything to run perfectly without any issues so just set it up this way and at the end of my tutorials I will have this full code on my GitHub if you want to view it in my repository but for now just view it on this to help you learn it it really helps to learn to type all this out don't copy and paste just type all this out because your brain will just absorb all this and memorize it and then it'll be a lot easier so yeah that's how you set up the backend router the next one I will step into to databases because I don't want to cover databases that can be quite long but really I'm going to take all this data I'm going to put into the database and I'm going to pull this from the database to show you that we can do the same thing without you know hard coding it like this this is how a regular development will work you pull all this from a database it'll give you this Json object and then we just display on the page and then also when we save the form here we submit it I'm going to save this to a database and then we're going to send it off and you can use an email server like send Grid or something like that and so this is just to show you how to set up the back end and front end hope this helps you out stay tuned for the next tutorial code foreign

Channel: Codr Kai

Views: 11,953

Keywords: react js tutorial, react js backend setup, react js server setup, react js frontend, react js how to setup server, react js how to setup backend, react js frontend vs backend, node js server setup, node js backend setup, node, react, node tutorial, node js tutorial

Id: RHLxtAo0aEI

Length: 24min 29sec (1469 seconds)

Published: Thu Mar 30 2023