Learn The MERN Stack - Redux Goals & Deply

[Music] what's going on guys so this is the fourth and final video of the learn the mern stack series and i just want to say to those of you that have actually gone through all the videos and code along with me that i just want to thank you guys uh seriously because not a lot of people will go through an entire series like that and i really hope that you've benefited from it and you've really you know learned something from what we've what we've done so far but i i really appreciate you guys watching so there is uh something that someone brought to my attention and that is so in the back end here right when we we have our off middleware and we get the token from the from the authorization header we separate the token from the you know the bearer token and then we get the user by the id that's in the token and we set it to request.user so if we go into the user controller right here in the get me so our user slash me where we're returning the user which by the way we're not even using this in the front end but i actually got the user again so see how i find by id and then i passed in request.userid there's no re excuse me there's no reason to do this because we already got the user in the middleware someone pointed that out to me and i'm not really sure why i did it this way so what you can do is you could set you know request.user.i request.user.name but i'm just going to go ahead and just send back the entire thing so just request.user all right so there's no reason to find the user again and then also in the goal controller uh let's see where is it so i think it's in the update right here yeah so here again i did user find by d and request dot user id when all i really needed was the user id so there's no reason to do this so we can get rid of that and then just right here add on request dot user id and [Music] let's see right here where we check for the user we just want to check for a request.user like that and i think that's the only place yeah and then in the delete i think yeah i did the same thing so we can get rid of that and then we can just check for request dot user and then right here we just want to match to request dot user id and then we should be good so i'm just going to save that all right and thank you to the person that pointed that out so the first thing i want to do in the front end here is make it so that we can't come to this dashboard if we're not logged in you can see right now i'm not logged in if we look in our state the user is null so i shouldn't be be able to access this dashboard so let's go into frontend and let's go to source and pages and dashboard which we basically have nothing in here right now so let's go up top here and we're going to bring in use effect and that's going to be from react and then let's also import we're going to want to redirect the user so we're going to bring in use navigate from our react router dom and then we need to we need to grab the user from the state to see if we're uh to see if we're logged in or not so let's import uh use yeah use selector and that's going to be from react dash redux okay so in the function here we're going to initialize our navigate so const navigate set that to use navigate and then let's get the user so we'll say const user and set that equal to use selector and u selector as you guys know takes in a function and that function takes in state and we want to say this user is coming from state dot auth all right and then let's create our use effect so use effect which will take in a function and then our dependency array and in here we want to say user and navigate because we're using both of those in this use effect so in the use effect here i'm going to go ahead and check for the user so we'll say if no user then we want to navigate to the um the login page so slash login all right and then i think i think that should do it let's go ahead and save that and now if i come back over here you'll see we're already at the login page if i try to go to localhost 3000 without being logged in it redirects me so we have that done now we want to start to think about goals right so i'm going to actually log in all right so we're logged in we can access the dashboard so we have to add goals to our global state right so let's go to uh features and in features we'll have a folder called goals oops this should be in features not in the auth folder so we should have an auth folder and a goals folder and in goals we're going to go ahead and create a goal slice dot js and while we're at it let's create our service so goal service dot js and a lot of this stuff is going to be very similar to what we did with auth so if at any point you want to pause the the video and try to do some of this yourself you can do that of course and i i would i would recommend that you do stuff like that i think it helps you learn all right so in our goal slice let's start to set this up so we want to bring in create slice we want to bring in create a async thunk and that's going to be from redux toolkit react redux toolkit and then let's uh create our initial state so const initial state and that's going to be an object we're going to have a goals array and then we're going to have again our is error which will be false and we're gonna have the is success and is loading and then we also want our message so basically the way that i do this is every every redux resource that we have is going to have these you know and they might have other stuff obviously like we have goals but they're all going to have these at least that's the way i do it you can certainly do it in other ways as well so let's create the slice so we'll say export const goal slice and set that to create slice and then that takes in an object we're going to go ahead and give this a name of goal and then we have our initial state and then our reducers and the only reducer here we're going to have is our reset now this reset i actually want to set goals to back to an empty array as well so what we can do is uh have a function here it takes in the state and instead of just setting them uh all separately i'm just going to set it to the initial state okay so if we if we dispatch this reset function it's just gonna it's just gonna change it all to this the reason we didn't do this in the users slice is because the user persists right the user and the state has to persist we don't want that to go away we just want all the other the loading and all that success error to go away or reset now as far as uh dealing with our goals let's first we should probably create the components first um yeah let's let's do that for for now we're just going to do our exports down here so remember the reset has to be exported from the slice actions so we do export const reset and set that to goal slice and then dot actions okay and then we do want to export the reducer itself so export as default the goal slice dot reducer all right and then we can just add that to our store so if we go to app store js we want to we'll just copy that down and this is going to be our goal goal slice and then it's in the did i call it goalie i called it goals the folder and then let's change this right here to goal reducer and then we just want to add it here so we'll say goal and set that to goal reducer all right actually let's we'll say goals instead so now if we look over here in our redux dev tools you should see goals and then you should see that piece of state all right now we'll close that up and let's go into our dashboard and then down here where we have our jsx let's get rid of the div we'll just make that an empty fragment and then inside here we're going to have a section tag with the class of heading and then in there we'll have an h1 and i'll say welcome and we have access to the user so in here let's say if user then will show the user.name so now you'll see it'll say welcome and the username and then under that we'll just have a paragraph and we'll just say goals goals dashboard so the form i'm going to actually have in its own component so let's create that let's go into components and we'll create a component called new or we'll just call it goal form dot js sorry jsx you can do js if you want but i like to have jsx for my components so here let's do our fce that's not working our rfce and we don't need that okay so we want to create our form we're going to have some state for the form field so let's import use state from react and then let's also import use selector and use dispatch and that's going to be from react redux and in our slice we will have a function called create goal that we want to dispatch from here but we're not going to do that just yet for now let's just get this displayed so i'm going to save this and go to my dashboard and bring that component in so let's say import and bring in goal form and let's see we're going to put this right below the section so go form and we should now see that goal form so let's start to create some of the output for this goal form so down here in the return let's make this a section and we're going to give it a class name of form and then in here we're going to have our form tag which is going to have an on submit and we're going to set that to a function called on submit okay and we might as well create that now so up here above the return let's say const on submit set that to a function and for now we'll just do e dot prevent default all right and then let's see inside the form here we're going to have a just really just one field and that's our text field so let's do for our class of form dash group and inside that we'll have a label i'll say label for text and we'll say goal and then underneath the label let's have our input and i just want to add the piece of state for this form so we already brought a new state so right here let's say const const and then we want some brackets and text and then the function to update that piece of state is going to be called set text so use state and the default is just going to be an empty string all right so in this input here let's give it a we'll give it a name of text we'll give it an id of text and then the value is going to be from the state so curly braces text and then we do have to have an on change oops so on change and we'll just put a function right in here and we just want to call set text okay whenever we type in that we're going to set it with e dot target dot value so just whatever we we type in there so we should have this form we should be able to type in it and then we just need a submit button so under this div we're going to do another not go we're going to do a form dash what is it form dash group jesus i can't type so form group and then let's do a button with the class of btn and btn-block and let's make sure we give it a type of submit and then here we'll just say add goal okay so we should have our button now when we submit this we're going to want to call or dispatch a function a thunk function from our slice or from from from redux so up here we brought in use dispatch so let's um let's initialize that so we'll say const dispatch equals use dispatch and let's see in the in the submit here we're going to want to dispatch a function which we don't have this yet but we will have a function called create goal okay so we're going to want to call that and then we're going to want to pass in the text like that or an object with the text and then i just want to clear the form so we'll just call set text and set that to just an empty string now this create goal obviously we haven't created it yet but let's just bring it in and then we'll create it so we'll say import and it's going to be create goal and that's going to be from our slice so we want to go up one level into features and then we want our goals folder and then our goal slice okay we're going to get an error right now because we obviously we don't have that yet so let's see and i don't think we actually need to use yeah we don't need to use selector in here so we can get rid of that but let's go into our slice now let's create our thunk function for uh for creating a goal so right above where we created the slice let's say create new goal so const or we want to export so export const create not great create goal and we're going to set that to create async thunk which is going to take in our action name which is going to be goals slash create and then secondly we want to pass in an async function and then this is going to take in the goal data which is basically just the text and then we can also have this uh this thunk api that we want to pass in so let's do a try catch this is very similar to what we were doing in our other slice in our user slice actually i'm going to copy from that or not user off slice so i'm going to grab the in the catch here the message and then the thunk reject value reject with value i'm going to grab that because we're going to use that same uh where are we goal slice we're going to use that same thing here in our error now as far as what we want to put in the try if we look at our auth slice we're using a service right we're using our we're going to use our goal service and call the create goal function but remember these routes are protected the register and the login route those weren't protected so we didn't need to send our token so the way that we can do this is in our goal slice we are going to do the same thing where we return from the service so goal service we'll have a function there called create goal and we want to pass in our gold data but we also want to pass in our token and this is a real really easy way to get our token remember that's in local storage and that's in our user that's in our user state it's not in our goal state however this thunk api object actually has a get state method that we can use to get any anything we want in any part of the state including our auth so what i'm going to do is say right here const token and set that to our thunk api object and then we have a get state we have a get state method and from that we can say dot auth because that's the part that's the you know the part of the state we want and then we have a user in the in that state and then we have a token on that user so that's an easy way to get our token and then we're gonna pass it into our service like that all right now in the in the goal service let's open that up so here we're gonna import axios so just like we did in the auth service and same thing we'll do we'll create an api url for this part of our state which is going to be slash api slash goals slash then we'll have our create new goal so let's say const create goal and set that to an async function and that's going to take in our gold data and it's also going to take in our token all right now i'm going to create a variable here called config and in this config will be an object with our headers so our headers will be an object and remember we want to send it as an authorization header so authorization is going to be our token now the token that's stored it's going to be just the token itself but we want to send it as a bearer token so what we can do is set backticks here and we can say bearer space and then our token okay and that's when we were using postman like if we go to postman and we were choosing bearer token uh it gets sent we only put the token in but it gets sent as bearer space token so here we're just setting that for now it's just getting it's put get put into this config variable but now we're going to send our request so we want a variable to uh for the response and then we're going to await axios we're going to make a post request to the api underscore url we want to send our gold data and we also want to pass in our config which has the headers okay the headers with the authorization with the token if we don't send that then we're not going to be able to to access that route and then we just want to return the response dot data and of course we have to uh we have to export this so let's say const goal service and set that to an object and we want to pass in here create goal and then we can just export as default the goal service all right and then the last thing we want to do before we before we try this out is in our goal slice we want to come down here and we want to add our extra reducer which uh which i haven't yeah i haven't even added that yet so right here let's say extra reducers remember that's a function that takes in a builder okay and then what we can do is call builder and i'm just going to go on a separate line here and do an add case okay and uh yeah so we'll just do a case for the pending so let's say the function name which is create goal and then dot pending then we pass in a function takes in our state and what do we want to do when it's pending we want to set the state dot is loading we're going to set that to true all right then we want to add another case for create goal and this time it's going to be for fulfilled so for that we're going to pass in here the state as well as an action all right and as far as what we want to set we want to do state dot is loading and set that back to false we want to set state dot is success we're going to set that to true and let's do state dot and then remember we have our goals we can do dot goals push now this is another reason i like redux toolkit is we can just do a push this isn't something you could do with just you know your regularly with your immutable state but redux toolkit has um some helpers that allow us to to do things a little bit easier so we can just push on our action.payload which is going to be the goal uh the new goal that we just created that's what's sent back from the api and then for the rejected let's just uh let's just copy whoops let's copy this down and this is going to be for rejected and let's see the action is going to be the message because remember up there we have this reject with value message so is loading false we want to set is error to true so we can handle the error if we want and then let's set the uh message so state dot message we're going to set that equal to our action payload and then yeah that should do it so let's save and let's see our goal form is hooked up we're going to call that create goal yeah so once we create it whoops what's going on here goals go oh we didn't bring in our goal service so up here we need to import our goal service okay so once we create the goal we're not going to see it because we haven't created that that ui yet but we can check it in the database so let's let's just add a new goal here i'll say my first goal even though i think the brad user already has some goals but that's fine we'll just go ahead and see what happens all right so we get goals create pending goals create fulfilled all right and if we look down here we now have an array in goals with my first goal okay we see our created that and all that stuff the id we're not going to see it here because we haven't added that just yet so if i reload and i look in goals it's going to be empty again because we haven't set up anything to actually fetch the goals it's not gonna it's not gonna persist because we didn't put it in like local storage or anything like that um so it's not gonna persist in the front end so what we'll do is create another function to get the goals and we'll have that run when this page loads all right so let's go to our slice and we want to create a function to get goals so right under the create goal say get user goals and we're going to export const and let's call this get goals and set that to create async thunk and let's pass in here the string of goals slash and then we'll call this get all because we're not we're getting all goals not a single one and then we want to have our async function and that's going to take in so we don't we're just getting goals we're not passing anything in here but we do want the thunk api so like right here we're not passing anything in but we want the thunk api so what we do is pass in just an underscore as the first argument and then we can get the thunk api as the second so then we have our arrow and let's do a try catch so for the catch we're just going to do the same thing i'll just grab that and go ahead and paste that in so and we want to get the token in the same way i could have just copied this so we'll copy these two lines here and paste that in because we do need the token because remember all of these are protected we also need to know which user it is and the user id is in the token so we're going to call goal service and let's change this to get goals and let's see we're just going to pass in the token itself we don't need anything else so we'll save that let's go to our service now and let's see i'm just gonna copy this create goal function here so we'll go ahead and copy that let's go right underneath it and this is going to be to get let's say get user goals and this is going to be get goals okay and it's oh it only takes in the token so we'll get rid of that config this is going to be set up the same way just to have the authorization header and then the response we have the request which is going to be a get request to api url we don't need to send any data but we do want to pass in the config which has the token and then just return the response and then we'll just go ahead and export this and then the last thing we have to do in our slice is take care of our reducers so let's copy just copy these three cases right here and paste that in and we want to change that that and that to get goals so get goals pending we're going to set loading to true and then here if it's fulfilled we'll set success to true and then we just want to set goals to the action dot payload uh and then let's see for rejected we're gonna set loading to false and then message yeah so that's all good good so now we'll save that and we wanna go now into our dashboard and let's see there's a couple things that we're going to want here so in addition to use selector we also want use dispatch because we need to dispatch the cr sorry the get goals and then i also want to use a spinner so we'll go ahead and import the spinner from from the uh let's see where are we we're in we want to go into components and spinner so we'll bring that in and let's see we want to uh initialize our dispatch so dispatch set that to use dispatch and then as far as the state right here we got the user from the off part of the state but now we're dealing with the goals part so under here we're going to say const and then what i want to grab is the goals so we want goals let's get is loading and then we'll get is error and the message okay and that's going to be from use selector except now we're going to pass in a function that takes in state but we want to specify that we're dealing with state dot goals not the auth state and then down here in the use effect let's just let's check for an error so we'll say if is error then i'm just going to do a i'm just going to do a console log of the message if there's an error and then we want to dispatch our get goals so right here let's do our dispatch and say get goals okay so that'll fetch the goals from the from the back end and it'll put it in here so we'll have access to it and then let's see i do want to reset the state on unmount meaning when we leave the dashboard i want to i want the goals to clear so if you remember from the last video if you want to do something when the component unmounts then you just need to return from the use effect so return a function like this and then we're going to dispatch the reset which i don't think i brought in i don't do we even bring in get goals yes we want to dispatch reset and then for the dependencies we're also going to have is error we're going to have message and we're going to have our dispatch so reset and get goals we actually have to bring those in so let's say import get goals and reset and that's going to be from our slice so we want to do dot dot slash features slash goals slash our goal slice all right so i think yeah that should do it let's just do our spinner so right before this return let's just check for is loading and if it's loading then we want to return the spinner okay so we'll come over here now they're not going to show because we haven't we haven't output anything but if we look in our state you should see your array of goals okay so i already had one in there and then we have the one i just added as well so i'll add another one we'll say my second goal and add that and now if i look down here let's see let's close that out yeah so now you can see that that got added so now i have three goals in my in my state here so if we log in as a different user those should be different right so let's log out and let's log in as john at gmail and submit now if i look in here now you see i have two i have two goals and these are the ones that belong to john you can see this is john's goal one all right so now we want to show the goals on the screen and we're getting them from our state so we have them right here so down in the the main return here let's go underneath the the goal form and then we're going to have a section here and we're going to call this or give it a class of content and then let's add an expression and we're going to say if the goals dot length if it's greater than 0 because we want to check for goals then we're going to show something else then we're going to do something else so the something else is going to be just an h through what is that it's going to be an h3 and we'll say you have not set any goals and close that h3 okay so that'll show if there's no goals now if there if there are goals then we're going to have a div so i'm just going to add here a div with a class of goals and then inside there we're going to map through let's say goals dot map and in here we're going to say for each goal we're going to go ahead and create a goal item or display a goal item component which we haven't created yet so that's going to take in the key a unique key which is going to be our goal dot underscore id and then of course we need the actual goal so we'll set that to that particular goal all right now i'm going to get an error because i don't have a goal item component so let's create that next so in components let's create a goal item.jsx and rfce so this goal item is going to take in uh some props and i'm just going to destructure the goal and then let's see we're going to do a div here with the class our class name of goal and then we'll get rid of that and in here we're going to have a another div and i want to put the the date so in some curly braces we're going to say new date and then we can pass in here goal and remember we have a created at so we're going to do created at and then i want to format this so we'll do dot 2 locale string and then we'll pass in here en us or whatever formatting you want okay and then underneath that div will be in h2 and this is going to be the gold dot text so let's just save that and see what we get goal oh we didn't bring goal item into the dashboard so we need to do that so let's see we'll just copy this down and let's say goal item goal item and save okay so there we go we have this is john's goal one this is john's goal two cool now in order to delete these we're gonna want to have a little button so in the goal item let's add a button we're going to go right into the h2 and let's add a button i'm going to give this a class name of close and we'll just put an x in here if you want to use an icon or something you can but we're going to have a a function a thunk function in our slice to delete a goal so we need to basically make our request a delete request to the back end to delete the goal we're going to dispatch that from here now we haven't created it yet but we'll just add the code here and then we'll we'll create it so let's say on click and what we want this to do is then dispatch the delete goal function which we haven't created yet and that needs to know which one we're deleting so we're going to pass in the gold dot underscore id okay and up here we have to bring in two things we need to bring in dis or use dispatch so let's say use dispatch and that's going to be from react redux and then we also need to bring in the delete goal function itself which again we haven't created yet but that's going to come from dot dot slash features and then goals or goals and then our goal slice okay so right now we're going to see some errors but let's head over to our goal slice and let's go up here so we need to create a function a thunk function to delete the goal so i'm going to copy um we'll just we'll copy this actually create goal and then let's go down here and this is going to be the delete so let's change this to delete user goal and change that to delete goal let's see so goal slash delete and then as far as what we want to pass into this it's going to be just the id and then we want to get the token in the same way because it's a protected route and in the goal service we'll have a function called delete goal and that'll take in both the id and the token all right so let's go ahead and into our service now and let's make the request to delete okay so let's say const and say delete actually we'll just copy one of these so this will be delete oops delete goal and that's going to take in remember it takes in the id and the token and then we set up the config with the headers and then here we're going to make a delete request to our api url but we also need to add on the id so we're just going to add on to that id or let's let's say goal id and pass in right here goal id like that okay so go id we pass in our config we return the data and then let's uh export here delete goal and then down here we just need to handle it so we're going to go down to the bottom and let's copy the three get goals so paste that in and then we're going to change that that and that to delete goal pending we'll have is loading then we have on fulfilled so fulfilled we want to set is loading to false success to true and we could do this actually no we can't do this because remember in our back end when we make the delete requests we're just returning the id right so uh this action is just gonna it's gonna be action.payload.id so instead of just setting this directly to action payload what we're going to do is set it to state dot goals and then we're going to filter if we don't do this then what's going to happen is we'll click you can't see it but we'll click delete and it won't show it won't go right away in the ui until we reload so we want to make sure that we take it out of the ui by doing this so we're going to use filter that gets passed in a function and say for each goal close that up so uh yeah for each goal we're going to say where the goal dot underscore id is not equal to the action dot payload dot id so that the payload id that's going to be the the id of the goal we delete we get got that from the server if you remember that's what we returned so we're filtering out the goal that has that id okay so it's only showing goals that are not equal to that so that will directly filter it out of the ui when we delete it alright so we'll save that uh yeah this is fine the the rejected so let's try it out we'll come over here and let's see dispatch is not defined in goal item that's because we didn't initialize it so let's say const dispatch set that to use oops use dispatch okay so now i'm going to come over here i'm going to click that and there we go so it gets set to pending for a second that's why you see the this little spinner and now we have no goals so it says you have not set any goals and that's it all right so i know that you know it's very it's very simple functionality but you could add much more fields and use diff all different kind of resources um and use the same kind of workflow that we've done here with redux and the slices and all that so i think that that's that's good that's it now what i'd like to do is deploy this and there's so many different ways to deploy um you know so many different platforms i like to use heroku for simple pro for smaller projects just because we don't have to set up engine x and all that you know i do have videos where we do stuff like that but heroku is a simple way to deploy full stack uh you know mirn stack applications like this or anything with node.js nodejs let's change this title though i don't like that so i'm just going to go to um in my front end the html here and let's change that to we'll say goal setter app okay so i'm just going to close everything up now and we're going to get ready for deployment so first thing i'm going to do is completely stop the server from running because right now i have npm run dev which is both the the backing back and front end and now we have to go to our backend server.js because right now what's going on is we we run npm run dev and we're running our express server and then we're also using the front end dev server that we get with create react app well that front end dev server is not in production that's just for development so what we'll have to do is build build out our front end so i mean if you if you have any experience with react you know that if you do npm run build it then creates a build folder with all your static assets so what we need to do is point to that that's the static assets that index.html file that gets created in the build folder that is basically going to be the entry point to our front end so we have to add to this to the server.js file so you want to make sure that you go under our routes because those are our api routes so we're going to go under that and let's say serve front end okay and we want to first just make sure we're in production so we'll say if process dot env dot node underscore env if that is equal to production then we want to do this and i'm going to bring in up here the the path module which is just part of node.js it's a core package so we'll say const path equals require and path okay so let's uh first of all we need to set our our static folder so that's going to be the build folder for react so let's say app.use and here we're going to say express dot static and then here's where we want to put the location of our static folder which is going to be in the front end and then in the build folder so we're going to use path dot join here so in path.join we'll pass in double underscore der name which is the current directory and then we want to go to let's close that up we'll go to dot dot slash and then we want to go into the front end all right and then slash build so that that's going to be our static folder and that's where react builds out the static assets now as far as our route we're going to say app.get and then we can use the universal or we can use the asterisk to basically say any for anything any route aside from our api routes up here then we're going to have a function we'll say request response and what we're going to want to do here is return res so response and then dot send file so send file which is a oops should be dot not comma so send file and basically what we want is the index html file that is in this this build folder alright so here we set the static folder but now we want to point any route aside from our api routes to the index.html so in the send file i'm going to use the path.resolve method and then in there we'll pass in double underscore dur name and then we want to go up one level so dot dot slash and then let's put a comma after that then we want to go into front end and then a comma after that and then into build comma and then into index.html and yeah basically this is just going to load that index html that's in our static build folder so now we're ready to deploy to heroku um oh and just to show you right now 3000 is not running but if i do npm just npm start which is what is going to be run in production it's going to start on 5000 and now i should be able to go to localhost 5000 and that should be my pr my production version and it's not because we're not in production so what i'll do is just change you guys you don't have to do this i'm just showing you we can change the dot env change that to production and we should probably add in here and if on this if statement we should put an else and just say uh what should we put here we'll just do an app dot get just in case it is in production and they go to slash um yeah we'll just say request response and then i don't know we'll just do res dot send and say uh please please set to production or something like that okay so if i check it in development let's just see here so if we do that okay so please set to production and then we set to production and then i restart this and i go to logos 5000 okay so the reason this isn't working is because we don't have a build folder we didn't npm run build our you know react so i'm just going to go into my front end folder npm run build and then that will create a production build in the build folder now this npm run build we can make it so that that is actually run on heroku so you don't have to do this every time you want to deploy i'll show you how to do that but now that we have the build folder let's come back here and reload and there we go so now we have our application running in product well in production mode even if we look up here you'll say this page is is using the production build of react we're not using create react apps dev server all right so i'm just going to set that back to development and we can stop this now for heroku of course you'll have to create an account if you don't have one let's see i have a few accounts but we're going to use this one and you'll be able to see all of your apps that you have on that particular heroku account you can see i have a few here so i'm going to i'm going to leave this open obviously ours doesn't show because we haven't created it yet but i want to first of all show you how to install the heroku cli which you do need to install on your machine and really easy it shows you right here if you're on mac you can use homebrew if you're on windows you can use the installer ubuntu you can use snap so just get that installed and i should have it already installed you can check with heroku dash dash version i think this version is a little older but that should be fine let's close this up so once you get that installed just do a heroku login and it's going to open up click any key and it's going to open up a browser page click login okay so now we're logged in on our machine and we want to now create a heroku app so we can do that with heroku create and then you can name it and this it has to be a unique name so if someone else has it you can't use it so i'm just going to say mern i'll just say mirn app brad and yeah so we'll just go ahead and create that now it's going to give you your link right here so you can click on that and it's going to open up your url your custom url which obviously you can change later and it's just going to say welcome because we haven't actually done anything we haven't pushed anything to to our project but if you go back to your dashboard close that up if you go back to your dashboard you should now see that that app all right now we do have some environment variables in this dot env that we need such as our uri and our jwt secret so this dot env does not get pushed remember we put it in our dot get ignore so the way that we add those is if we go to our application we go to settings and then reveal config vars we just need to put those values here for production so let's grab the uri obviously you want to use your own and we'll say underscore uri and paste that in and then just click add and then we'll add our jwt secret and click add and then we'll add our node underscore env to production and add we don't need to put the port so one more thing we want to do before we actually push with git is in the core of the root package.json we want to add a heroku post build script because remember when we build our react app we have to run npm run build and you can do that on your own manually before every deploy if you want but with heroku you can actually add a post build script that will run that on the server which is nice so i'm just going to grab that i have it uh i have it here i'm just going to copy and paste that in so if we go right under dev just put a comma here and i'm going to paste it in so the script is called heroku dash post build and we set this config production to false but it actually uh has to be false for us to run this and then it it'll go to true um on its own after but basically it'll just run npm install and install the dependencies in the front end and then it will also run npm run build in the front end okay so it'll do that on the server rather than us having to do it so now we're ready to push to uh repository so if you go to deploy you'll see right here um uh where is it is it under deploy oh maybe because i already did a deploy i actually already did this so you should see something that says like get remote so you just want to copy that so grab that i mine's not showing because i already tried a deployment but grab that and then come over here and do a get add all and then a git commit and just put whatever you can say like prepare deploy or something like that and then you want to paste in that remote that get remote to add your repository once you do that you should be able to finally get push heroku and then the main branch and then it should go ahead and push your files and this might take a minute or two and you can see it's installing our dependencies and it should run the post build script as well okay so now our deployment is done and we can just do heroku open and that should open our url in the browser and there we go so at least we have this displaying now we can test it out let's register a new user let's say test all right so now we can see oops we can see our goal page cool and what's nice is with the with mongodb atlas you don't have to worry about having a database installed on your server or anything like that because we're using a cloud database all right cool so we can log in we can register we can create goals so now we're fully deployed and you could obviously add your own domain so that's going to be i believe in settings if you go yeah right here if you want to add a domain so you could look at the documentation to do that and to do other stuff but that's gonna be it guys i really hope that you learned a lot from this from the series i had a lot of fun doing it and that's it thanks for watching and i'll see you next time

Channel: Traversy Media

Views: 106,879

Keywords: MERN, MERN Stack, react, redux, react rudux, MERN deploy, MERN deployment, React deployment, React Heroku, Redux Toolkit

Id: UXjMo25Nnvc

Length: 58min 22sec (3502 seconds)

Published: Thu Feb 17 2022