React JS Tutorial [2023]: Connect to Database using MongoDB Cloud

okay so today we are going to cover databases in our react.js tutorial series if you haven't watched my series yet I suggest starting from the beginning because this will be the last part of it I'm going to connect our database to our front end home page here we have a front end and a back end that we set up but this is our website right now and I'm going to show you how to connect the database and then we're going to step through the cloud database that we're going to connect to right here I am using mongodb so I'll step you through how to connect to that but right now we want to connect it to our back end I want you to understand that databases can only connect to the back end not the front end so right here we have our front end setup all of these files right here are the front end and I created a folder called backend but actually I'm going to create a folder right now called front end so that you are not confused and I should have did this a while ago I'm going to select all of these right here and I'm going to drop this into the front-end folder just click drag and drop click move you're going to see how easy it is to move this to the front end and I'm going to update the modules right here like I said and yes all of this is now in the front end folder so you see how clean this is we have a front-end folder here with the package.json its own modules and then we'll close that up we have our back end with its own package.json and modules so let's set up our database right now in the last tutorial like I said we set up this backend right here so we want to CD into that back end let's go over here CD back end because I am currently in the root folder here so I need to go into the back end if I list that out here are all the backend files and so if you remember we set up our back end here uh that that was in the previous tutorial I suggest you go back and watch that because we set up all of these to get the back end to work and we set up our index file right here to get the backend to run with its port and everything here so now that all of that is running we need to be in the back end and I'm going to install two things npm install dot EnV and then also Mongoose we need those two files right here so there we go let's check out the package.json right here here is the EnV file and Mongoose so we need that why do I need dot EMV let's create it right now dot EnV is our environment file this will hold our variables for our database connection strings I'm going to call it DB URI DB underscore URI equals gonna leave that there we're going to create a port two and I'll show you how to use these because this is what we were using Port 4000 and then I'll jump over to mongodb over here in a minute and I'll show you how to get the connection string to paste into here so let's save that up we don't need that yet let's go to our index file and we are going to include mongoose const Mongoose equals require Mongoose there we go and then let's require the dot EMV require dot EnV and this one's kind of weird you have to say config like that and that's how you require this dot EMV environment file uh how do we use this environment for I'm going to show you right now you see how we're using the port right here I'm going to remove that out and say process .env.port the exact variable name that we used in here see that's how you can use these variables inside the dot environment file why are we doing this this is to mask and hide our important information from from anywhere else that we're sharing this code so that people don't see our passwords and all that so it's important to create an environment file to to hide all of your important information and then you can pull it into your project files like this and then you can share this programming file with anyone and they won't see your passwords and everything so that's why we're using the environment file and that's how you call it this is the port now you can also put or 4000 so let's say if the environment file wasn't set up by accident this thing will check for the environment variable first if it doesn't see it then I'll just use port 4000 so that's how you can tell it so I'm going to show you how to set up the Mongoose database right now and we want to go after routing right here right before the port where it starts listening and then I'm going to call it out Mongoose dot connect and the connection string takes the process.env let's write DB URI that's what we set up in our environment file I'm going to get the connection string in a minute and then it will connect to that and then we need some options right here so I'll just call it DB options right and let's do that const DB options equals and this is just basic information you can pull it from the mongus database but uh I'm putting in these right here use new URL parser it's true and then use unified topology true okay so after we connect here we're going to do a then dot then and we're going to tell it to console log this console.log DB connected just like that letting us know that the database connected and then we're going to catch any errors down here so it takes in the air console.log just very simple error and that's basically it to connect to the database we just have to get the connection string for this now so let me show you that we're going to jump over to Mongoose so if you go to mongodb.com this is a free online Cloud database you can create your own it lets you do all your testing and all that so go ahead the first thing you want to do is to create a database access right here create your new database user and so you can create users for other people too you can give them temporary access but create your own main database user access put in your username password and then copy that username password and we're going to go back up here on the left here database you're going to create a database I called my node cluster call it anything that you want and after you create this database you want to click on connect when you click on connect here you have a couple options I suggest connect your application or you can do Connect using vs code connect your application is going to give you the string right here we need this copy that string and then we're going to go back in here and paste that string in what do you notice from the string here it's asking for a username put your username that you just created right there for your admin access put in your password right here and then finally right here they used to call this database or something but they took it out but that's where you put your database right after this mongodb.net slash and right before the question mark you want to put your database right here and what is that database well it's the database is right in here it is the collection so it's not this thing right here this is your main database but we it's a table that you want to connect to so go to the collections and then right here it says create database so I'm going to create a database right now you have to do this you have to create a database I mean you can do it through code 2 but I'm just showing you set up your database first and I'm going to call mine react underscore DB and then when you create a new database name it needs one table in there I'm just going to give it a table of users that's what we're creating creating this users create it and then you'll see right here see collections and it's down here these are Collections and it should have created a react right here react DB and it has one table in your users with zero documents in it so that's all you need we're going to do everything through code right now we're going to insert users and we can insert our other table as we created to the contact table so you can leave that alone right now this string you know put in your info so see right here we're a database that should now be react underscore DB then I'm going to put in my username passwords I can connect and then also make sure that you spelled everything correctly I put DB underscore Ur this is dbn score URI that's what we want save it so let's close up the environment file you don't need that anymore we put in all of our variables so let's start up the database to make sure that it runs npm start and right there DB connected so we know that we set up our database correctly it is connected to our Cloud database over here let's stop the server and I'm going to show you how to create a schema for our tables right now we can close this up go into backend create a folder in here called models and then a file in here called schemas.js so what do we know about databases we have to set up our structure for right the tables and that's what we're doing inside the schemos right here we're setting up our tables if you do it this method it will be a lot easier than manually creating everything in here we're going to set up these tables right here we have the users already so let's define that we have to import our mongoose equals require mongoose we have to set up the schema so const uppercase schema equals Mongoose dot schema there we go let's do a cons user schema this is for the user right here we're setting the up this table right here user schema equals new schema this is from the database and what do we want inside our tables right here well we have a name we have an email we have website and I'm going to put in an entry date I do this for all of my stuff and uh this will be default is going to be a type date and default right here it's going to generate this date as we insert documents in here as we insert it it's going to automatically create this we don't need to worry about it this is what we need to input in you notice in here name I'm going to give it a type string and this is going to be for all of these all these will be going to be type strings so copy it paste it here paste it here I call in there all right so see this is the user schema right here for user table and then down here we can do a const users equals Mongoose dot model this is to Define it users user schema and users so what does this say right here we're setting up this users right here so we can use it inside our project to call it and we're using this user schema right here for that using that and this right here that is the database name right here that you want to call it users I'll show you in a minute how it's going to grade it let's let's do our other contact schema so you can see so I hear cons contact schema this is for the contact page when I submit a contact form so I can capture the contact as we capture the contact data I'm going to insert it into a database table in here called Contact so I'm going to set that up right now new schema same thing and this is going to take an email website uh pretty much the same thing right we're going to capture same stuff here just to make it easy except in here you can make this required you can say required and you have to put in a value so I'm going to make all these required here because I'll show you what I'm trying to do in a minute now that we have our contact here let's do the same thing cons contact uppercase equals Mongoose dot model contact uppercase contact schema and then right here I'm going to call it contact underscore form and you'll see why so as we initialize our database when I run it it's going to create this contact underscore form table in here automatically if there isn't one it's going to create it for us so you'll see that it's using this name right here to create the table and use it and then down here do a const my schemas equals and we're going to put in both our schemas here users using the users and contact using the contact right here users using this one contact using that one and then let's export it module dot exports equals my schemas okay so we are done with our schemas close that up now we are going to jump to the routes open up the routes folder here go into the router.js and we're going to use the schema in here this is where we're going to do everything because if you remember in our contact page here we're going to Route everything and let me start up the front end I am going to create a new one right here called this front end a new terminal CD into the front end now npm start on the front end so you see I have two terminals one for the back end one for the front end let's start up my back end here npm start on the back end all right so if you remember our contact form here we have these input fields for the email this is the website that is collecting and then a message so now I want to submit this and save it into our database if you remember we submitted this to our backend here in our router.js and it's submitting to this poster here it's a doing a post to this contact URL and we're taking it in and all we were doing was console logging it to display it to us so now I want to save this to our database right let's remove this here we're not going to console log this anymore and let's go up here let's include our schema so we've got to do a const schemas equals require dot dot slash models slash schemas and now down here let's do a cons new contact equals new schemas that's what we're calling right here the schema dot contact because inside that schema we have a contact now right we have this here in the models writing the schema here we have this contact and we're calling it contact we're using that we're calling the contact to create us that new contact and what is it creating we need data so we're creating our email and we're taking it from the email right here and then we also have the website right and then we have the message very simple but you know how I am I don't like this data to be like this I like it to be clean so we're going to cut that out we're going to create a const contact data equals that data then we just call the contact data see how simple that is now down here we're going to save it const Save contact equals away new contact dot save since we're doing an away on this we need it to be async here in the function always do an await when we're hosting a either a URL or a we're saving to our database or anything that interacts and so we need to have it wait to finish up and then you can say if Save contact if that is true then let's send this message now it successfully saved response dot end we're going to end that response alright uh so I need to go back to my schemas right here and uh you notice that I copied everything from here and pasted down here where the the fields are different when using email uh the website and a message so let's put this make an email capturing these different fields website and then this is message save that and so yeah the user we're capturing name email and website but for this contact form we're capturing the email website message email website message so let's start up our backend right now npm start connected and I'm going to refresh this contact page here I put in my email here let's select Romero right here and then this is a test message and let's submit this message sent thank you let's go to our database here mongodb and up here we're going to hit refresh and it yeah I should have created this contact form here this contact underscore form you see how it created that from our schema because we called it here contact underscore form so now it's using that it didn't see that table created and it created it for us and it inserted that document right here that entry so let's go to it and there should be the entry in here and there you go email code website Ramiro and message this is a test message and then you see how it automatically put in the entry date yeah everything's working here here's our react DB table and it has it created these two table Express right here or we created the users but it inserted the contact underscore form for us so you see as long as you set up your schema it'll take care of everything you just tell it what field you want and what the table name is and it will create it and we can add in multiples here you know and in the router you see how easy it is to just call it and we put in our data here we created a new schema and use the contact we saved it very simple and as we saved it we can check to see if it's saved and we sent back a message if it didn't we can put in another message down here that says you know it failed or something else response dot send failed to send message there's multiple ways you can do this and at the end send that up I like to just close up the connection here but also if you're going to edit your code here in the back end I I didn't install this thing called node mod you can do an npm install nodemon and as you're editing your code the server will know to save and restart the server for you instead of just you know manually doing every time every time I make a change I have to stop the server and then do an npm start again on the server so that's the only difference with what I'm doing here but yeah that's how we create our database post to it and now I'm going to show you these other how we can accept parameters in here and I think I covered parameters in the previous one but uh just to briefly go over it you know you can put in up here slash and I can give it an action I'll just say like a right for action and then right here let's let's take in the action const action equals request that params.a for Action we're requesting that then we can do a switch action and we can put all this inside the action now and so we can say case if the action is send and we send that off and then we break off from it just like that and then I believe we also need a default and for the default I'll just say response.send invalid we request then we break it so that's how you can pass params if you want to use it that way and you know this is all for the back end let's say we had a we want to search our contacts and you know we can do like a router I get on the contacts we want like router.get then we can give it like an ID so there's there's a lot of things you can do and with the get we can do things like if we want to have another action that says to uh delete this contact and then we give it the ID to delete or to edit the contact you know we can give it these different actions to edit delete and we can do all that within our code here we can take care of these tables right here we can go into it delete certain things insert edit it modify it update it it's really basic actions that you can do with every other database you know but this is just the cloud database and you see how just easy it is with the cloud database you notice with our older database table through PHP or MySQL you have to manually create everything you don't have to do it with this it's very simple with Cloud database you see right here I just set up my schema and it just knew what I want to call it and what Fields I wanted and as you insert it is very generous with it you just save it it tells you if it's saved or not and so if you want to finish it up you can really do this thing down here as um for example this users are here here I was using the users table to pull information for this drop down right for using the website values here and so really you can create something that will insert these values into our users table that will have the field website right here we'll have that field and then instead of pulling it this way you can do code around it so I'll show you very simply right here going to comment this out if I were to do code around this to pull data from the users table I can do a const users equals schemas then we have our users that we set up already right here the users so it's going to connect to that users right here ready connect to the table and then we can say con user data equals await users dot find and then I'm going to find everything you see these brackets in here you can tell it to find like website and give it a value what website you want to find but I want to look for everything in here I want to find it and then just execute it and now that it execute this it's going to search the whole users table for get all that data and then if I say if user data responds.send and I say Jason dot stringify the user data that'll give me back Json data with that and inside there we'll have the website values we're returning this the same way as this right here we're returning all these values and then from our front page home page here it will know to pull it through our home page you go to front end Source inside of our Pages for the contact it's going to know how to pull it the same exact way from here from our fetch see it's fetching from the users and it's just going to process that data and it's going to set the select data that we did so that's see how easy this code is if we have all the data inside of our database table I just pull it display it and it's done and no longer hard coding the stuff everything is just very Dynamic now so there you go that is mongodb how to connect how to pull data how to insert data I'll let you figure out go to if you go to mongoosejs.com right here documents is going to give you all of the commands right here that you can just look up everything in it so over here see schemas types models the API how to uh query stuff has all of it in here so go ahead and browse that to do everything you need and yeah very simple database actions that is mongodb cloud database if you want to see how to connect to a local database on your own computer here go ahead and view my older tutorials I did create a react with a mySQL database show you how to do that it's a little bit more you have to install a workbench in your system that will activate and run the MySQL on your local machine and then you connect it through code and and then you just query it just like MySQL code but I really suggest Cloud database because with Cloud it's just very easy everything is just set up for you very easy in documents searching for it inserting deleting and then everything is just online for you and all of my projects you'll notice that I've I've just only do Cloud database now but you know there's different situations if you want to use an internal database that's more for companies that are very private with their data they don't want it on the cloud and they want to internally and that's when you set up your MySQL and internal database so hope this helped you out with understanding database how to connect to it how to interact how to route it and to know that databases only work in the back end you can't install the database on the front end the front end is only for the client and then you have to Route it to the back end to put all your data so hope you enjoyed this video and that is the end of our react JS tutorial series I hope you enjoyed this whole series if you followed it from the beginning you should know how to program in react very well and create your own application a full running application for any company business your own portfolio anything you want so yeah I hope you give this video a like And subscribe and I'll see you in the next tutorials code chayout thank you

Channel: Codr Kai

Views: 8,979

Keywords: react js, react js tutorial, react js mongodb, react js database connection, node js database connection, node js mongodb, node js cloud database, react js cloud database

Id: Bxagh8EG-ak

Length: 23min 24sec (1404 seconds)

Published: Wed Apr 05 2023