How to deploy MERN project (NodeJS, React) using render and netlify. PART 1.

hello guys I am mohas I'm a full stack web developer I'll be today showing how to deploy our site uh Moon site actually through two websites okay I mean in the sense we will be using render for backend and amplify for the front-end deploy okay so I'll just step into that and show the procedure how we are going to do that so first of all uh you need to make sure let me open the project this I have created the main project is my react crud okay so I'm going to this is just a demo project by the way I'll be uploading I mean I am trying to deploy this project so the in you have to make sure that this one is our server side and this one is a front editor client side of these things so first thing you have to make sure that you have to add in a backend file Json package.json you have to add a script okay one more script uh this one is for no demo most of the time it will be automatically added by button in case if it's not added then you can add bits like this which is a build script okay you need to build those things right so for that uh simple npm I can you can give anything your npm IR npm install both things are correct okay so after this you have to check whether the everything is updated in our GitHub or not or if you don't know what you GitHub menu let's just let me know in the comment I'll create a separate video for git guess git bash and GitHub everything what are the commands we have to use uh to upload our folders to the GitHub okay how to create repositories and everything so anyways I'll let me just I'll check whether the water now I have just now added this new line right so you can see this new it is it will be letting you know that uh whether the whether there is any kind of updates you have made since after the recent you push recent push okay so to check the uh with status of the GitHub whether it is updated or not we need to give uh status okay okay so there are a bunch of files here uh we need to push that anyways I'll push everything all at once you can give like a git add and you can specify this file folder by folder if you want to commit uh by giving particular message you can do like that also or you can just if you want to push everything all at once you can use a DOT or maybe a hash or capex a so you can do anything like that also I'll be preferring.r Dot okay so now everything got added so after that I have to commit this one with commit iPhone and I'll be here message okay so now I have committed everything and make sure your uh hiding these modules okay through dot EnV files sorry not DOT EnV dot ignore uh because what happens is this node modules is such a large file it will take time to upload to our get repository and moreover it is a time of space consuming also so while deploying it will be an issue it has to check everything now so it's better if you are just hiding those files using this dot you have nothing to do you have to just create this dot ignore file and you have to name those folders or files which you don't want to uh add include in your GitHub okay so anyways I'll just push now so the data has been pushed right now I'll just um Open my GitHub and I'll show you I can see this is the latest one one minute ago so anyways I'll just go to close this one I have first I'll be deploying my backend server okay using render.com you can see it's a render.com I'll be providing the links in description also you can just check over that after that you have to sign in or it's already signed in my case so if it's not signed in you can just sign in it's a simple one you can sign in the login through either using a GitHub or you can use your Gmail address also anything is fine I'm using here my GitHub only so that it will be easy to access for me to X the repositories okay so after that there are a bunch of options here are the static site in the sense if you are uploading only one Pages or not uh this is benefit for that and if you want to upload a whole server database things then you have to use this web service so I'll just go here and here you can see that it is uh there is a i since I have logged in through uh Gmail uh sorry GitHub it is already showing here so if you if you don't find any data here you can just take here and you go to here your git repositories and open this thing you can just copy this thing over here okay now you have to give any name here so you can give any kind of name I'll be giving here uh react correct only okay so then after that you can specif specify the which branch you are using for example I'm I'm using in a main branch here or if there is if you are using any if your folders are present inside any other branches then you can specify that thing or else since I am using this one in the main you can tell like that only then in the root directory in the sense uh which one or which folders you want to uh deploy so in this case I am I want to deploy backend right so I have to type that name here packing okay so environment uh default it will be in a node if you are using any other things like python or go you can select those things also then the build command uh if you are using npm in my case I'm using npm here okay in my case I'm using npm so if you are using ER you can it is a default yarn only you can add yarn or npm whatever it is okay uh so you have to give the command also by the way then you have to give this command which will be which is providing you to start the server so you can just go to the package.json you can see which one you have provided here in my case it is a Dev so I'll just give that same thing over here and PM run div okay so after that after it's getting builded so you have to select the free if you want to if you have my if you want to just check a free trial you can use this free ones okay so after that in the advanced if there is any kind of environment variables amount for example I am using here few things like my mongodb server clusterlins and JWT secret cores key ID or many things are there right here so I have to upload everything so I'll take this one byte to just add the file so the for the security for extract here you can just add that one here only dot in well by uploading the file also here base all electrons so it will take from there only then these are the health checks and auto reply keep it yes in the default so that whenever you are committing a new changes it will be deployed automatically okay so if you want to ignore the pass in specific if you forgot to push that uh add that inside your node modules then you can add here also okay so now I'll just create web service uh and another thing it might take few times okay it will take few minutes uh since it has to check build the run the API and everything you can see the process here what an online is happening I guess it's in progress by the way I mean oil I'll just uh don't I won't waste the time and let's go to our front-end deployment section okay so for the deployment of front end we'll be using netlify you can just use call this netlify.com uh I'll be providing the link of this one also you have to sign up here okay after signing up uh they will be asking some okay so I have been redirected to login page directly I am a dashboard anyways so let me check the process what happened okay going on anyways so after coming here uh you have to just go here and add new site import from existing project in the sense if you are uh coming from starting you have to add from Project here then using your GitHub you can go here and you have to authenticate I have authorized already I've given permission for this network so I wasn't asked for permissions and all so after that you can just I have already for example show you earlier only you have to give the password Here okay so we just scroll down and you can either give all repositories for two security reasons I'm giving only only selected repositories and from here I am specifying which is that um um the repository I want to upload that one will be shown here okay so I have already uh uploaded that one so I'll just close this one here it will be shown here once you are uploading okay so once if it's uploading then you will it will be asking you to add new owner name or Branch everything so like we did here it is the same thing like that only so yeah this one is working here yeah okay so you can see now the server is running and mongodb is connected okay so the connection is successful and it is waiting to deploy uh completely or you will get a message here until then we'll look into here okay so coming here now you have to add the base directory in this has folder name in this case we are having a front-end rate so you have to give this front end then build command 4 it will be when you're clicking on that automatically it will be showing you or if you want to add in a year then you can just change that thing over there only okay so anyways after that uh just you need to give the deploy oh by the way if you have any kind of uh environment variables like we did here you have to add there uh since I don't have any uh I just started to deploy directly so you can see the logs here if there is any errors or if there is coming any kind of error it will show so we just wait for a while okay so you can see that it's live by the way or maybe server is getting restarted so just wait for a while okay so after this now you can see that our front end is also deployed I'm showing here messages also like completed everything you can see the option here preview okay so just open that one okay so you can see the front end part is also working right now so after this we will just go to this our render and we will see that it is our backend is also uploaded or not okay no error we are fine so and it is showing a live also option here so in order to access this one just go to this paste here link okay so this one is a default route because there is no such route no so to start to check that you just need to go back here and just close everything go to router and select one of the get API from here okay we'll just open this one copy and I'll just paste here whether it to check whether it is working or not okay so you can see the datas are getting fetched from our database also all the datas are being shown here okay so now just check whether it is showing in here also uh we'll go for proceed proceed and I'll just give my stuffs here okay so you can see the databases are showing everything is fine here you can add employee credit you can even delete yeah everything is working fine right now yeah and don't forget to subscribe to my channel and like this video if you're having any kind of adults furthermore so you can just ping me through the mail or let me know in comment section uh if you want any kind of other videos just inform me there also or regarding that one I'll be happy to help you and share with your friends if they are also having any kind of issues regarding this one okay so yeah until then bye

Channel: git unemployed

Views: 87,392

Keywords: MERN, deploy, nodejs, react, express, razorpay, html, css, web, developer, it, computer

Id: AjaGmTVBIfI

Length: 13min 35sec (815 seconds)

Published: Thu Feb 02 2023