How to set up a MERN (MongoDB, Express, React, NodeJS) Stack Project

uh welcome to you suck at coding let's try and change that shall we [Music] so today we'll be learning how to set up a mern stack project burn is an acronym for mongodb express react and node.js so in order to get started we will open up chrome and go to the node.js official website which is nodejs.org it automatically detects my operating system and brings me to the download page we'll be using the long term support version which at this time is 14.18.0 recommended for most users clicking on this should download the package automatically and then this brings us to the installer which is a fairly easy process i already have a version of node installed so i won't be doing that so assuming that we have node already installed just close this and open up the terminal all right here we go let's make this full screen so now what we're going to do is go to the directory where we want to set a project the project is going to be set up in two parts uh the front end being client and the back end being server so let's get started with that cd youtube projects let's do an ls to see if it's clean all right so i'm going to make a directory and call it mon dash setup and now let's go inside setup and we'll get started with react first so for that we'll be calling it client client as i mentioned earlier we'll be using a command npx and px if you have npm you have it px in px create react app and now you can enter the name of the project whatever you want to call it we'll go with client and press enter and this should basically do all of the heavy lifting and give us a nice and clean version of the app setup uh it'll take probably 20 to 30 seconds to do this so we'll be back once that is done all right so we have uh the create react app project set up now uh let's go to cd client and open up vs code which is the code editor that we'll be using today so for that i'm going to use a command code space dot and this is going to vs to open vs code inside the client directory let's make this full screen so it has the node modules public and source inside of source there is a file called app.js you'll see that it is capitalized which means that it's a react component and not just javascript file i mean it is just file but it's a react component so what i like to do is rename it with an extension of dot jsx just so there's a clear distinction between the javascript and the react files so we'll name it app.jsx and open this up let's fire up the terminal and we'll do an npm start which basically starts the project and opens it up in google chrome or whatever your default browser is get this to the right open vs code in the left and this is the start of files for the react app so we'll now what we're going to do is clean up the project a bit so what i like to do is clear everything between the main diff and then perhaps what we could do is add an h1 so we know it's working so we add h1 let's go with the classic hello world and it's at the center which means that there's some css so we get rid of the logo as well now that we're cleaning it uh let the app.css file uh be there inside of it let's get rid of all the styling and it brings it to the left there's still some margin at the top what i like to do is go to index.css and inside of that just add star curly brickets and then add a margin auto and that should get rid of the margin top from here and now let's get rid of some of the extra files we'll delete the logo just delete that and there are some test files that we can just leave although we won't be writing any tests for this tutorial and that is about it for cleaning up and setting the react app that is fairly simple and now what we're going to do is move on to the backend which we'll be calling server all right let's open up the terminal uh i'm just gonna minimize that for now since we won't be needing this here is the terminal let's bring it back let's go back to the month setup and create a directory called server inside of the server uh we'll be using a command npm init which is now that i click it it says package name server that's fine we press enter version description let's call it backend for man setup youtube tutorial perfect entry point index.js you could name it anything else what i like to call it is app.js just so there's a similarity between the front and the backing so i'll be calling it app.js no test commands you can connect it with the kit repository we won't be doing that today press enter no keywords author go with the channel name licenses and this this is how the package.json file is going to look and yeah that looks pretty good let's go and type yes press enter and we have the initial files for the server ready now so what i'm going to do is do now is open the vs code inside of the mern setup project and not the server of the client so that we have access to both of them so i'll do a code dot here this opens up a new vs code window we can get rid of the earlier one and i guess we won't be needing the terminal now so i'm going to close this one let's get rid of this and let's open this up and make this photo screen all right so we have a folder server here now which has a package.json but this information that we saw earlier so how we'll be starting is create that file app.js and we can get to coding so inside of app.js how i like to divide this is add some comments first so let's write import modules it will be importing all of the packages like express mongoose over here let's do an app this is where we'll be adding the mongodb using mongoose middleware and then we have the routes this is where we'll be importing the routes and then using them and then there's an extra step of port all right so let's get started with the first one which is module so we'll be needing express mongoose uh obviously for uh the back end and the database i will be installing some middlewares as well uh like so before we import that we have to install them and for that i'm gonna open up the terminal inside of this code and this time go inside server and here i'm going i'm going to do npm install with the short form of which is npmi and the installing express mongoose we need morgan which basically logs the requests so it helps us you know during debugging and checking the results we'll be using cores or communicating between the front and the back end also be using dot env which is basically a good practice to store all of the sensitive information that you don't want to upload to the repository if you're connected to github gitlab or any of the other we also need nodemon so nodemon basically what it does is it allows the back-end to continuously run so that if there's any changes we don't have to do an npm start again and again it's basically a hot reloading similar to what react has but for node.js so we'll be installing all of these dependencies that should not take long and yeah perfect you could also open multiple terminals so i'm gonna keep this one for server open up a different one for client do an npm start there just so it's it's running already so this is where it is just gonna minimize this for now and then yeah that's about it so inside of server we can now start importing the modules that we just installed but they can also be seen inside of the packet.json now this is where they are i'm going to go to app.js and start with importing some of the modules so express let's go with mongoose next let's do morgan and then the dot enb where we will be storing the port and the uri for this tutorial so dot env dot config and that should set it up nice and clean let's create an app so it's it'll be const app is equal to express that creates an app we'll be dealing with db a little later first let's do app.use and set up the middlewares so morgan let's do dev inside of it is an argument app.use let's do course so like i said before it's so that we could communicate from this back into the front end that we set up earlier origin true let's do credentials include that is if you're sending some information and what else i guess that's it for the middlewares for now uh we'll deal with routes a little later once we create one create a test api and inside of the port let's do a const if i can type consport is equal to so uh i like to use 8080 for the back end so you could just leave it here but if you have a port that you are defining inside of your dot env file which i'll be creating next what you can do is access it via process dot env and then whatever it is that you have to find it with so i'll be using capital p o rt so if it's available then use that otherwise it could just simply refer to 8080 as the port and now let's set up the i forgot the listener let's do a const server and app.listen so this is where the port goes and then we have a function an arrow function now we don't need the curly traces that basically does a console log so that we know it's working so console.log can be server is running on board whatever the port is okay so we could do an npm start but i mentioned nodemon earlier so what node mod does is hot reloading so in order to add that what i like to do is in the scripts add the key start and inside of that i am going to add the command so that will be node 1 app.js so every time we run npm start which will be similar for the client and the server now uh for the back end it will do nodemon app.js automatically so let's do an npm start and see this in the works yes it says server is running on port 8080 perfect now we can get started with setting up the database so for this one we'll be using the mongodb atlas which is the cloud solution and let's get started with that i'll be opening up chrome now let's make this full screen open up a new tab and we'll be going to mongodb.com now you need to sign in for this i am already logged in so it's going to take me directly to the mongodb atlas portal inside of there this is going to show you the name of the organization and it already has a project zero by default because it needs to have one so what we'll be doing is creating a new project we click here and press the button that says new project inside of the new project you can add the name of the project here let's call this one server mon setup that's fine also youtube perfect go next and then we can press the button create project hopefully this won't take much time all right so it brings us here uh now the first thing that we need to do which is also going to take some time is build a database so we press builder database uh since this is a personal project you guys could also use the free shared version and i'll be using the same let's go with create create a shared cluster it gives us uh some of the information you could choose a particular cloud provider and some of the other information but it doesn't really make a difference so we're gonna skip through that and press the create cluster button and that should get it started so it says your cluster is being created new cluster takes between one to three minutes provision meanwhile we can do two things so what we need is to access this database from our project so there's to uh so the first thing would be to allow to whitelist the ips which for which we'll go to network access inside of that it says add an ip address so press add ip address so if you're working in a team you could white list some of your ip addresses or if you're just a single person you can add your ip uh or if you're somebody like me who's just doing this for the youtube and won't be continuing with the project i'll just say allow access from anywhere and this way anybody can access this project now it automatically adds uh the ip address and i can just simply press confirm and all right it says you'll only be able to connect yeah perfect so this should be enough for that so we also need to create a database user which is basically how we connect the project so for that let's create a new ad add a new database user uh let's give this the name your subject coding for the password you can enter something of your own or if you don't like to do that you can press auto generate secure password which basically creates a random password that you could just copy and keep you need to make sure that you don't forget it because it's not going to give you the password again and you will have to create a new user delete this one however that works so we'll be copying it i've saved it in my notes and i'll be doing add user now so this has created a user use circuit coding with admin access has all of the resources and that's enough now let's go back to the databases and see where that is so it's still taking some time so i'm going to wait for this one to complete and we will be back once it is done all right so the cluster is now successfully created what i'm going to do is press this button that says connect and it gives me a bunch of options uh to connect it and what we're going to do today is basically connected application so we press the second option and says driver node.js version 4.0 later perfect so this is the mongodb uri that will be needing in order to connect the application we can simply copy it from here and it says that we need to replace the keyword password with the actual password which was given to us for this user that we created earlier which i have copied in my notes problems let's let's copy this let's make sure we copy it and we can close this now so now let's get rid of this we'll come back to it so here we are in the app.js again and now what we can do is go ahead and add this uri so let's see mongoose.connect now to connect the mongoose this is where the uri goes so i'm just going to call it uri for now because what we want is to access the uri from the dot env file so we'll leave this for now add an object with some of the info some of the options that are needed uh use new url parser like that and use genified topology set to true what we want now is to promise we do not need the response from here but what we want is to validate that the db is connected so we'll add a console log that will be seeing down in the terminal once it's connected which will say db connected all right and if it is not connected or there's an error let's do a catch catch the error basically and we'll do a console log again that says db connection error and rinse the error so that we can debug it so where the uri is what i'm going to do now is create a file it's called dot env and inside of that oh forgot let's add the port too i forgot that we did that i was doing that so there's the port and i'm gonna say right uri and this is where i'm gonna paste the entire uri uh where the password is i am going to quickly add the password over here and then i'm gonna move on to the app.js all right so we've added the password okay so let's now similar to the port the process dot env and we call it underscore uri now it says server is running on port 8080 and it also says db connected that means that we've successfully connected uh the mongodb atlas the cloud solution to this application we won't be creating an api that tests the db as well but what i'm going to do next is to create a test api just so we can see that the front end and the back end are coming together and you know communicating with each other so for that let's create some folders so this is how i like to set up the backend inside of the server i'm going to call controllers right we have controllers let's do models for the schemas let's do middlewares for any of the auth checks or whatever middleware that you're using for your application and then the routes perfect so inside of the routes i'm going to create a file let's call it test.js and let's set up a route so we'll be importing express again cons require express they'll set up a router which is from express and over here what i like to do is import any of the controllers and then import any middleware that is needed for the api middlewares and finally this is where we write the apr so let's uh do a get request we'll just be sending some sample data and see it in the front end so let's do router dot get slash test and over here we'll be adding the controller so what we could do is write the function in itself over here with a request response and an arrow function and this would run for the test but what i like to do is divide things into controllers and middlewares and routes so so that it's nice and clean when the size of the code base increases significantly so we won't be doing this for now i'm just going to leave it here and go back to go to actually controllers inside of controllers let's create a file with the same name which is test.js and over here let's write controller that says get test that should be fine let's do an async function as the arguments request response and what it's going to do is simply give a status of 200 and give a message in json from that test api is working perfect so that's a controller that now will be importing inside of the routes test.js file so i do const curly brackets get test which is the name of the controller it's equal to require so we want to move back a file so it's this is where we'll find controllers and test and over here rather than adding the controller itself what i'll be doing is just write get test and that should do it all right so what we need to do is complete the routes file i still have to export it so that it's accessible inside of the app.js where we'll be adding the test route so all of the routes that we create inside of this test.js file which could be post uh get put delete multiple of those files uh would be accessible inside of the routes and i'll be showing now how to do that so we do a module or exports router and now we are going to access this inside of the app.js file over here so inside of routes what we do is const let's call them so all of the routes will be accessible this way i'll write test routes for the name do a require route test and all of the routes that are right inside of this would be accessible by doing app dot use slash and then test routes okay let's see what the problem is it says oh messed up the spelling for require which is inside the desktop chairs my pad okay so service is running on port 888 db connected that means everything's working fine we could test the api using postman but i think it's a fairly simple one and i'm almost certain that it'll work so let's just simply go to the front end and call this api and see if it's working so this is all that we have for back-end let's now make it to the left open up the react app move this one to the right and inside of the react app i'm going to minimize or collapse the server inside of source app.jsx so what i'll be doing is uh fetching uh the results from the api slash test that we created and for that i'm going to use define a function let's create a folder and call it functions inside of functions let's do a file again that says test.js and over here we'll be writing the function that fetches it and the workflow is going to be that as soon as we hit the api slash test this text hello world should change to the message that we get and for that we'll be needing a state and we'll be needing the use effect hook to fetch the api so i'm gonna do import so use state use effect from react perfect let's do a state let's call it data set data in the state and we can keep the initial value equivalent to hello world all right let's see if we can get the data so this is the initial value and this is going to change with the results that we get from the server so let's do a use effect shall we we want this to runs just once we'll add a dependency and empty dependency array inside of here we'll be running the function so for that let's go ahead and write the function in test.js so i'll do export const get test let's keep the name same and async and we'll be doing it adding it inside the try catch for any errors you might get let's do a const response and we do fade fetch which is the javascript way of communicating with an api you could also use like xeos or any of the other packages that are really popular but i like to keep things simple and use the javascript way of doing it so this is where we can actually write uh the api for that we could use the dot env again where we can store the react app uh the react backend url but for simplicity sakes i'm going to skip that for front end and simply write what the api url is it's http localhost 8080 slash test and let's add some options now we'll do a method get and add some headers say accepts json let's do content type application json we get the results convert this to so we return this to the file this this function returns the response converts it to json basically and then returns the response now we can go back to app.jsx this is what we needed to fetch it inside of the use effect hook which runs as soon as uh the app loads we oh first of all we import the function let's do functions import get test from functions test perfect so inside of the use effect what i want is to [Music] call this method oh if it gave us a top then too also do a dot catch in case there's an error we'll just simply add a console log for this one and inside of then what i'm going to do is set the data to the like that let's do response response start message which was the message that we were getting okay i'm just gonna fix this quick error that we got oh sales test api is working all right so that is about it thank you so much for watching and have a good one [Music]

Channel: You Suck At Coding

Views: 21,893

Keywords: MongoDB, Express, React, NodeJS

Id: N09oazS6vvs

Length: 31min 27sec (1887 seconds)

Published: Mon Oct 04 2021