title
Learn The MERN Stack [8] - Prepare & Deploy

description
In this video we will prepare our application for deployment to Heroku. We will create a heroku post build script so that we do not have to manually run "npm run build" for React. It will happen on the server once we push to it. Code: https://github.com/bradtraversy/mern_shopping_list MERN Stack Front To Back Udemy Course: https://www.udemy.com/mern-stack-front-to-back/?couponCode=TRAVERSYMEDIA 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia The Developer Hangout: Public Discord Server https://discord.gg/developers

detail
{'title': 'Learn The MERN Stack [8] - Prepare & Deploy', 'heatmap': [{'end': 363.68, 'start': 331.443, 'weight': 0.71}, {'end': 541.593, 'start': 529.298, 'weight': 0.737}, {'end': 638.743, 'start': 606.318, 'weight': 0.868}, {'end': 698.095, 'start': 659.249, 'weight': 0.858}, {'end': 805.305, 'start': 710.8, 'weight': 0.766}], 'summary': 'Learn to deploy a mern app with heroku, covering processes like modifying the app title, building react application into static assets, editing server.js, automating post-build process, setting up post build script in package.json, and deploying the app on heroku with considerations for custom domain and security measures.', 'chapters': [{'end': 129.475, 'segs': [{'end': 34.592, 'src': 'embed', 'start': 0.202, 'weight': 1, 'content': [{'end': 5.325, 'text': "All right, guys, so we've built our full-stack MIRN app, and now I want to deploy it.", 'start': 0.202, 'duration': 5.123}, {'end': 10.968, 'text': "All right, but before we do that, there's just a couple small things I want to deal with.", 'start': 5.865, 'duration': 5.103}, {'end': 15.93, 'text': 'So right here you see on an item reducer, UUID is defined but never used.', 'start': 11.028, 'duration': 4.902}, {'end': 20.813, 'text': "So I'm just going to go to my item reducer and get rid of that import because we don't need that.", 'start': 16.431, 'duration': 4.382}, {'end': 34.592, 'text': "And then another thing I'm going to do is go to my public folder index HTML and just change the title from React app to Mern Shopping list.", 'start': 22.814, 'duration': 11.778}], 'summary': 'Developed a full-stack mern app, making minor adjustments before deployment.', 'duration': 34.39, 'max_score': 0.202, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k202.jpg'}, {'end': 85.173, 'src': 'embed', 'start': 54.209, 'weight': 0, 'content': [{'end': 55.15, 'text': 'Package. Jason,', 'start': 54.209, 'duration': 0.941}, {'end': 67.278, 'text': "we have this build so we can do NPM run build and that'll take our react application and build it out into static assets that we could just upload to any server if it was just a front end app.", 'start': 55.15, 'duration': 12.128}, {'end': 69.539, 'text': 'But this is not this is a full stack app.', 'start': 67.478, 'duration': 2.061}, {'end': 74.322, 'text': 'We have an entire node server that an API that we have to deal with as well.', 'start': 69.579, 'duration': 4.743}, {'end': 77.024, 'text': "So that's where Heroku comes in.", 'start': 75.263, 'duration': 1.761}, {'end': 81.027, 'text': "Now, I'm going to just stop this server here with control C.", 'start': 77.644, 'duration': 3.383}, {'end': 85.173, 'text': 'And this is the, by the way, this was the npm run dev.', 'start': 82.372, 'duration': 2.801}], 'summary': 'The build process creates static assets for a full stack app with a node server and api, to be deployed on heroku.', 'duration': 30.964, 'max_score': 54.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k54209.jpg'}], 'start': 0.202, 'title': 'Deploying mern app with heroku', 'summary': 'Discusses the process of deploying a full-stack mern app using heroku, including removing unused imports, changing the app title, and building the react application into static assets for deployment.', 'chapters': [{'end': 129.475, 'start': 0.202, 'title': 'Deploying mern app with heroku', 'summary': 'Discusses the process of deploying a full-stack mern app using heroku, including removing unused imports, changing the app title, and building the react application into static assets for deployment.', 'duration': 129.273, 'highlights': ['The chapter discusses the process of deploying a full-stack MERN app using Heroku. Deployment of a full-stack MERN app with Heroku is the central theme of the chapter.', 'Removing unused imports and changing the app title from React app to Mern Shopping list are highlighted as pre-deployment tasks. The chapter emphasizes the importance of removing unused imports and updating the app title before deployment.', "Building the React application into static assets for deployment is explained, including the use of 'npm run build' to generate the assets. The process of converting the React application into static assets for deployment is detailed, involving the 'npm run build' command."]}], 'duration': 129.273, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k202.jpg', 'highlights': ['Deployment of a full-stack MERN app with Heroku is the central theme of the chapter.', 'The chapter emphasizes the importance of removing unused imports and updating the app title before deployment.', "The process of converting the React application into static assets for deployment is detailed, involving the 'npm run build' command."]}, {'end': 399.987, 'segs': [{'end': 184.685, 'src': 'embed', 'start': 153.456, 'weight': 4, 'content': [{'end': 158.622, 'text': "and then we've had the the, the front end dev server that create react app gives us.", 'start': 153.456, 'duration': 5.166}, {'end': 162.186, 'text': "that's that 3000 port server.", 'start': 158.622, 'duration': 3.564}, {'end': 167.171, 'text': "now on heroku, we're not going to have access to that dev server, that front end dev server.", 'start': 162.186, 'duration': 4.985}, {'end': 173.817, 'text': "it's going to look at our back end server js file which will run on on Heroku's port.", 'start': 167.171, 'duration': 6.646}, {'end': 184.685, 'text': "but what we need to do is basically say, unless we're hitting our API, which is API slash items or anything, any other API routes we had in here,", 'start': 173.817, 'duration': 10.868}], 'summary': "On heroku, the front-end dev server won't be accessible, and the app will run on heroku's port for the back-end server.", 'duration': 31.229, 'max_score': 153.456, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k153456.jpg'}, {'end': 226.551, 'src': 'embed', 'start': 200.998, 'weight': 0, 'content': [{'end': 206.822, 'text': 'What I want to do is create a post build script that will make it so that, once we push to Heroku,', 'start': 200.998, 'duration': 5.824}, {'end': 212.387, 'text': "it'll then automatically do the build there instead of us having to do it and push it to Heroku.", 'start': 206.822, 'duration': 5.565}, {'end': 215.289, 'text': 'So we can actually go ahead and delete this build file.', 'start': 212.887, 'duration': 2.402}, {'end': 217.25, 'text': "If you've been following along, we can delete that.", 'start': 215.329, 'duration': 1.921}, {'end': 217.891, 'text': "We don't need it.", 'start': 217.29, 'duration': 0.601}, {'end': 226.551, 'text': "Let's see delete build from shore and then we're going to edit this server JS file just a little bit.", 'start': 219.629, 'duration': 6.922}], 'summary': 'Create a post build script for automated heroku builds, delete build file and modify server js.', 'duration': 25.553, 'max_score': 200.998, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k200998.jpg'}, {'end': 314.05, 'src': 'embed', 'start': 248.849, 'weight': 1, 'content': [{'end': 261.976, 'text': "OK. So the way that we can do this is by using an if statement and we can check to see if we're in production by using process dot ENV,", 'start': 248.849, 'duration': 13.127}, {'end': 265.177, 'text': 'dot node underscore ENV.', 'start': 261.976, 'duration': 3.201}, {'end': 269.64, 'text': "So we're going to look at our node environment if it equals production.", 'start': 265.317, 'duration': 4.323}, {'end': 278.404, 'text': 'OK So if it equals production then we want to set a static folder.', 'start': 269.66, 'duration': 8.744}, {'end': 284.133, 'text': "Now, to set this static folder, we're just going to say app.use.", 'start': 280.532, 'duration': 3.601}, {'end': 287.913, 'text': 'And you guys have probably done this if you have experience with Express.', 'start': 284.173, 'duration': 3.74}, {'end': 291.514, 'text': 'We say express.static.', 'start': 288.393, 'duration': 3.121}, {'end': 298.715, 'text': 'And we want the folder that to load to be client slash build.', 'start': 293.054, 'duration': 5.661}, {'end': 303.036, 'text': "So it'll load the index.html in client build, which is what I just showed you.", 'start': 299.175, 'duration': 3.861}, {'end': 306.597, 'text': 'And then down here, we want to say app.get.', 'start': 304.036, 'duration': 2.561}, {'end': 314.05, 'text': 'so basically app dot, get anything, so we can use an asterisk here.', 'start': 309.361, 'duration': 4.689}], 'summary': 'Using an if statement to check if in production and set static folder for express, loading index.html in client/build.', 'duration': 65.201, 'max_score': 248.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k248849.jpg'}, {'end': 363.68, 'src': 'heatmap', 'start': 331.443, 'weight': 0.71, 'content': [{'end': 337.684, 'text': "We're going to any requests that we get that's not this should load up that index HTML.", 'start': 331.443, 'duration': 6.241}, {'end': 344.465, 'text': "Now I'm going to bring in a another module called path which is core node JS module.", 'start': 338.064, 'duration': 6.401}, {'end': 347.946, 'text': "So it's not we don't have to do NPM install path or anything like that.", 'start': 344.525, 'duration': 3.421}, {'end': 352.329, 'text': "So we're going to just require it path.", 'start': 348.986, 'duration': 3.343}, {'end': 354.111, 'text': "And it's just to deal with file paths.", 'start': 352.37, 'duration': 1.741}, {'end': 363.68, 'text': "And what we want to do is we want to take the response here and we're going to do dot send file.", 'start': 356.053, 'duration': 7.627}], 'summary': 'Using path module to handle file paths for sending a response.', 'duration': 32.237, 'max_score': 331.443, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k331443.jpg'}, {'end': 399.987, 'src': 'embed', 'start': 371.608, 'weight': 3, 'content': [{'end': 377.592, 'text': "so we're using that path module and then we want the current directory, so double underscore, dir name,", 'start': 371.608, 'duration': 5.984}, {'end': 387.659, 'text': 'and then we want to go into client and into build and then we want to load the index html file.', 'start': 377.592, 'duration': 10.067}, {'end': 395.824, 'text': "okay, so we kind of load these as parameters and it's just basically directing it to that index html file and it should load it,", 'start': 387.659, 'duration': 8.165}, {'end': 399.987, 'text': "unless it's hitting the api, okay and as long as it's in production.", 'start': 395.824, 'duration': 4.163}], 'summary': 'Using path module to load index.html file from client/build directory.', 'duration': 28.379, 'max_score': 371.608, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k371608.jpg'}], 'start': 129.475, 'title': 'Heroku deployment and automation', 'summary': 'Covers the deployment process of front end and back end applications on heroku, including editing the server.js file, and automating the post build process by creating a script, deleting unnecessary files, and modifying the server.js file to serve static assets, leveraging process.env and express.', 'chapters': [{'end': 200.958, 'start': 129.475, 'title': 'Heroku deployment process', 'summary': "Discusses the process of deploying a front end and back end application on heroku, including the need to edit the server.js file to load the front end and the deployment of the back end server on heroku's port.", 'duration': 71.483, 'highlights': ["The need to edit the server.js file to load the front end and the deployment of the back end server on Heroku's port.", 'The process of deploying a front end and back end application on Heroku']}, {'end': 399.987, 'start': 200.998, 'title': 'Automate post build process for heroku', 'summary': 'Explains how to automate the build process for heroku by creating a post build script, deleting unnecessary build files, and modifying the server.js file to serve static assets in production, leveraging process.env and express.', 'duration': 198.989, 'highlights': ['Automating the build process for Heroku by creating a post build script and eliminating the need to manually push the build to Heroku. Automation of build process, elimination of manual build push', 'Deleting the unnecessary build file to streamline the build process for Heroku deployment. Optimization of build process, removal of unnecessary file', 'Modifying the server.js file to serve static assets in production by using an if statement to check if the environment is in production and setting a static folder using Express. Modification of server.js, serving static assets in production', "Utilizing the 'express.static' method to load the index.html in the client build folder and handling requests for any other files by loading the index.html file. Usage of 'express.static' method, handling requests for files", "Implementing the 'path' module to handle file paths and using 'response.sendFile' with 'path.resolve' to direct to the index.html file within the build directory, ensuring its loading in production. Implementation of 'path' module, directing to index.html file, loading in production"]}], 'duration': 270.512, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k129475.jpg', 'highlights': ['Automating the build process for Heroku by creating a post build script and eliminating the need to manually push the build to Heroku. Automation of build process, elimination of manual build push', 'Modifying the server.js file to serve static assets in production by using an if statement to check if the environment is in production and setting a static folder using Express. Modification of server.js, serving static assets in production', "Utilizing the 'express.static' method to load the index.html in the client build folder and handling requests for any other files by loading the index.html file. Usage of 'express.static' method, handling requests for files", "Implementing the 'path' module to handle file paths and using 'response.sendFile' with 'path.resolve' to direct to the index.html file within the build directory, ensuring its loading in production. Implementation of 'path' module, directing to index.html file, loading in production", "The need to edit the server.js file to load the front end and the deployment of the back end server on Heroku's port.", 'Deleting the unnecessary build file to streamline the build process for Heroku deployment. Optimization of build process, removal of unnecessary file', 'The process of deploying a front end and back end application on Heroku']}, {'end': 980.571, 'segs': [{'end': 515.813, 'src': 'embed', 'start': 458.626, 'weight': 0, 'content': [{'end': 462.309, 'text': 'So we have to set that to false just for this script.', 'start': 458.626, 'duration': 3.683}, {'end': 464.791, 'text': "Once this is done, it'll be in production.", 'start': 462.449, 'duration': 2.342}, {'end': 467.933, 'text': 'But we have to set this flag right here for this to work correctly.', 'start': 464.851, 'duration': 3.082}, {'end': 470.014, 'text': 'So we want to set that to false.', 'start': 468.653, 'duration': 1.361}, {'end': 471.936, 'text': 'Then we want to run npm install.', 'start': 470.034, 'duration': 1.902}, {'end': 474.993, 'text': 'Should only be one space here.', 'start': 473.632, 'duration': 1.361}, {'end': 476.994, 'text': 'So npm install.', 'start': 475.673, 'duration': 1.321}, {'end': 480.596, 'text': 'And we want to make sure this is happening in the client folder.', 'start': 477.674, 'duration': 2.922}, {'end': 484.618, 'text': "So we're going to do prefix dash dash prefix client.", 'start': 480.656, 'duration': 3.962}, {'end': 492.183, 'text': 'And then we want to do double ampersand because we also want to do npm run build.', 'start': 486.179, 'duration': 6.004}, {'end': 494.044, 'text': 'And this is going to happen on the server.', 'start': 492.223, 'duration': 1.821}, {'end': 497.026, 'text': 'And we want to, again, make sure this is in the client folder.', 'start': 494.424, 'duration': 2.602}, {'end': 500.548, 'text': 'So we want to prefix with client.', 'start': 497.106, 'duration': 3.442}, {'end': 505.761, 'text': 'OK, so hopefully that makes sense.', 'start': 502.256, 'duration': 3.505}, {'end': 506.622, 'text': 'One second.', 'start': 506.121, 'duration': 0.501}, {'end': 508.164, 'text': 'Let me just make sure this is right.', 'start': 506.662, 'duration': 1.502}, {'end': 511.529, 'text': 'So prefix client.', 'start': 510.307, 'duration': 1.222}, {'end': 515.813, 'text': 'All right.', 'start': 511.769, 'duration': 4.044}], 'summary': 'Set flag to false, run npm install, prefix client, & run npm build for server in client folder.', 'duration': 57.187, 'max_score': 458.626, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k458626.jpg'}, {'end': 558.743, 'src': 'heatmap', 'start': 529.298, 'weight': 0.737, 'content': [{'end': 532.222, 'text': "It's going to then run npm run build.", 'start': 529.298, 'duration': 2.924}, {'end': 535.747, 'text': "So now let's get Heroku ready.", 'start': 533.764, 'duration': 1.983}, {'end': 536.948, 'text': "So we'll close this up.", 'start': 535.827, 'duration': 1.121}, {'end': 541.593, 'text': "Close that up, and let's go to Chrome.", 'start': 538.131, 'duration': 3.462}, {'end': 544.975, 'text': "And you're going to want the Heroku CLI.", 'start': 542.734, 'duration': 2.241}, {'end': 547.096, 'text': 'And this is cross-platform.', 'start': 544.995, 'duration': 2.101}, {'end': 549.938, 'text': "I'm on a Mac, so I'm going to click Download the Installer.", 'start': 547.516, 'duration': 2.422}, {'end': 551.179, 'text': 'You can also use Homebrew.', 'start': 549.978, 'duration': 1.201}, {'end': 553.74, 'text': 'I think I might actually have it installed.', 'start': 551.739, 'duration': 2.001}, {'end': 558.743, 'text': "I'm not sure, because I can't remember the last time I used Heroku on this particular machine.", 'start': 553.78, 'duration': 4.963}], 'summary': 'The speaker discusses setting up heroku using npm run build and heroku cli, mentioning cross-platform compatibility and installation options.', 'duration': 29.445, 'max_score': 529.298, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k529298.jpg'}, {'end': 638.743, 'src': 'heatmap', 'start': 606.318, 'weight': 0.868, 'content': [{'end': 609.44, 'text': "You'll probably if you just signed up, you won't have anything here.", 'start': 606.318, 'duration': 3.122}, {'end': 613.503, 'text': 'But then what we want to do is go to our terminal.', 'start': 610.301, 'duration': 3.202}, {'end': 625.312, 'text': "OK, so you want to be in your not in your client folder, you want to be in the server and we're going to say Heroku log in.", 'start': 613.523, 'duration': 11.789}, {'end': 631.781, 'text': 'Login credentials, so that is correct.', 'start': 629.26, 'duration': 2.521}, {'end': 633.641, 'text': 'Then my credentials.', 'start': 632.481, 'duration': 1.16}, {'end': 637.803, 'text': "So you're just going to want to put your Heroku ID in.", 'start': 635.322, 'duration': 2.481}, {'end': 638.743, 'text': 'Whoops, that was wrong.', 'start': 637.823, 'duration': 0.92}], 'summary': 'Instructions to log into heroku using terminal for account setup.', 'duration': 32.425, 'max_score': 606.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k606318.jpg'}, {'end': 698.095, 'src': 'heatmap', 'start': 659.249, 'weight': 0.858, 'content': [{'end': 667.699, 'text': "Create And then it's going to give you some weird ass name like this secure cove or whatever.", 'start': 659.249, 'duration': 8.45}, {'end': 671.584, 'text': 'And now if I go back to my Heroku dashboard and reload it.', 'start': 667.839, 'duration': 3.745}, {'end': 675.173, 'text': 'You can see right here, Secure Cove.', 'start': 673.291, 'duration': 1.882}, {'end': 677.455, 'text': 'So you should now have this in your dashboard.', 'start': 675.273, 'duration': 2.182}, {'end': 680.298, 'text': 'And not Secure Cove, some other weird-ass name.', 'start': 677.755, 'duration': 2.543}, {'end': 682.6, 'text': "You can see some of the other ones that they've given me.", 'start': 680.318, 'duration': 2.282}, {'end': 685.202, 'text': 'But we want to click on that and go to Deploy.', 'start': 683.02, 'duration': 2.182}, {'end': 689.186, 'text': 'Now, the method that we use to deploy to Heroku is with Git.', 'start': 685.222, 'duration': 3.964}, {'end': 698.095, 'text': 'So make sure you have Git installed, whether you installed it on a Mac with Homebrew or you used Git Bash or whatever it may be.', 'start': 689.827, 'duration': 8.268}], 'summary': 'Using git, deploy to heroku and access secure cove on dashboard.', 'duration': 38.846, 'max_score': 659.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k659249.jpg'}, {'end': 805.305, 'src': 'heatmap', 'start': 710.8, 'weight': 0.766, 'content': [{'end': 721.103, 'text': 'but you want to do git init to initialize the Git repository and then you want to add your Heroku repository as a remote repository.', 'start': 710.8, 'duration': 10.303}, {'end': 722.344, 'text': 'so I want to copy this', 'start': 721.103, 'duration': 1.241}, {'end': 724.525, 'text': 'You want to copy whatever is right here.', 'start': 722.784, 'duration': 1.741}, {'end': 735.83, 'text': "and go back to your terminal and let's clear this up and let's you know what.", 'start': 725.985, 'duration': 9.845}, {'end': 743.194, 'text': "so you again you want to do, get in it if you haven't already, and then what I'm gonna do is just add what I, what I haven't added yet.", 'start': 735.83, 'duration': 7.364}, {'end': 744.835, 'text': "so I'm gonna say at all.", 'start': 743.194, 'duration': 1.641}, {'end': 757.772, 'text': "and then let's do a git commit, I'm gonna add the am flag and then I'm just gonna say version 1.0.0, whatever.", 'start': 744.835, 'duration': 12.937}, {'end': 758.873, 'text': 'You can put whatever you want.', 'start': 757.812, 'duration': 1.061}, {'end': 764.157, 'text': "And then let's paste in what we just copied from Heroku.", 'start': 759.574, 'duration': 4.583}, {'end': 774.584, 'text': 'Okay, so now we should be able to push to Heroku by saying get push Heroku master.', 'start': 764.177, 'duration': 10.407}, {'end': 781.308, 'text': 'And now once I hit enter and we push to it, it should run that post build script, hopefully.', 'start': 775.044, 'duration': 6.264}, {'end': 782.189, 'text': "So let's try it.", 'start': 781.388, 'duration': 0.801}, {'end': 790.755, 'text': 'Okay, so building dependencies, installing node modules.', 'start': 786.732, 'duration': 4.023}, {'end': 794.137, 'text': 'We should see something about the build script.', 'start': 790.795, 'duration': 3.342}, {'end': 805.305, 'text': 'Right here, so this is the, right here, Heroku post build, running Heroku post build.', 'start': 799.761, 'duration': 5.544}], 'summary': 'Initialize git repository, add heroku as remote, push changes to heroku.', 'duration': 94.505, 'max_score': 710.8, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k710800.jpg'}, {'end': 805.305, 'src': 'embed', 'start': 764.177, 'weight': 2, 'content': [{'end': 774.584, 'text': 'Okay, so now we should be able to push to Heroku by saying get push Heroku master.', 'start': 764.177, 'duration': 10.407}, {'end': 781.308, 'text': 'And now once I hit enter and we push to it, it should run that post build script, hopefully.', 'start': 775.044, 'duration': 6.264}, {'end': 782.189, 'text': "So let's try it.", 'start': 781.388, 'duration': 0.801}, {'end': 790.755, 'text': 'Okay, so building dependencies, installing node modules.', 'start': 786.732, 'duration': 4.023}, {'end': 794.137, 'text': 'We should see something about the build script.', 'start': 790.795, 'duration': 3.342}, {'end': 805.305, 'text': 'Right here, so this is the, right here, Heroku post build, running Heroku post build.', 'start': 799.761, 'duration': 5.544}], 'summary': "Pushed to heroku using 'git push heroku master', post build script ran.", 'duration': 41.128, 'max_score': 764.177, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k764177.jpg'}, {'end': 980.571, 'src': 'embed', 'start': 961.281, 'weight': 3, 'content': [{'end': 969.045, 'text': 'and again, i do have a 16 hour course where we go into more depth and we use you know, we protect our back end routes.', 'start': 961.281, 'duration': 7.764}, {'end': 971.866, 'text': 'we use jwt for authentication.', 'start': 969.045, 'duration': 2.821}, {'end': 975.368, 'text': "so if you're interested more in the mern stack, check that course out.", 'start': 971.866, 'duration': 3.502}, {'end': 978.89, 'text': "i'll put a link for just 10 bucks in the description, and that's it.", 'start': 975.368, 'duration': 3.522}, {'end': 980.571, 'text': 'thanks for watching, guys, i appreciate it.', 'start': 978.89, 'duration': 1.681}], 'summary': 'Offering a 16-hour course on mern stack with in-depth content and jwt for authentication, available for $10.', 'duration': 19.29, 'max_score': 961.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k961281.jpg'}], 'start': 401.099, 'title': 'Setting up post build script and deploying mern stack app on heroku', 'summary': 'Explains setting up post build script in package.json for the server, including setting npm production to false, running npm install in the client folder, and executing npm run build in the server. it also covers deploying a mern stack application on heroku, including the installation of heroku cli, creating a new heroku app, deploying the application using git, and accessing the deployed application online with related considerations for custom domain and security measures.', 'chapters': [{'end': 515.813, 'start': 401.099, 'title': 'Setting up post build script in package.json', 'summary': 'Explains the process of setting up a post build script in package.json for the server, including setting npm production to false, running npm install in the client folder, and executing npm run build in the server.', 'duration': 114.714, 'highlights': ['Setting NPM Production to false is necessary to ensure the build script runs correctly in non-production environment.', 'Running npm install in the client folder is a crucial step in the post build script setup.', "Executing npm run build in the server's client folder ensures the correct build process for the application."]}, {'end': 980.571, 'start': 515.833, 'title': 'Deploying mern stack application on heroku', 'summary': 'Covers the deployment of a mern stack application on heroku, including the installation of heroku cli, creating a new heroku app, deploying the application using git, and accessing the deployed application online with related considerations for custom domain and security measures.', 'duration': 464.738, 'highlights': ['The process of deploying a MERN stack application on Heroku is explained, including the installation of Heroku CLI, creating a new Heroku app, and deploying the application using Git.', "The deployment process involves running commands such as 'heroku create' and 'git push heroku master' to deploy the application, and it includes building dependencies, installing node modules, and running the post build script.", 'The accessibility of the deployed MERN stack application online is demonstrated, along with considerations for custom domain registration and security measures such as protecting backend routes and using JWT for authentication.', 'The presenter also mentions a 16-hour course for a more in-depth understanding of MERN stack development, including the use of JWT for authentication and protecting backend routes, and provides a link for interested viewers to access the course at a discounted price.', 'The presenter emphasizes the instructional nature of the series, highlighting that the purpose was to demonstrate the integration and functioning of components within the MERN stack, rather than solely creating a shopping list application.']}], 'duration': 579.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/71wSzpLyW9k/pics/71wSzpLyW9k401099.jpg', 'highlights': ['Running npm install in the client folder is a crucial step in the post build script setup.', "Executing npm run build in the server's client folder ensures the correct build process for the application.", "The deployment process involves running commands such as 'heroku create' and 'git push heroku master' to deploy the application, and it includes building dependencies, installing node modules, and running the post build script.", 'The accessibility of the deployed MERN stack application online is demonstrated, along with considerations for custom domain registration and security measures such as protecting backend routes and using JWT for authentication.']}], 'highlights': ["The deployment process involves running commands such as 'heroku create' and 'git push heroku master' to deploy the application, and it includes building dependencies, installing node modules, and running the post build script.", 'Automating the build process for Heroku by creating a post build script and eliminating the need to manually push the build to Heroku. Automation of build process, elimination of manual build push', 'The chapter emphasizes the importance of removing unused imports and updating the app title before deployment.', 'Modifying the server.js file to serve static assets in production by using an if statement to check if the environment is in production and setting a static folder using Express. Modification of server.js, serving static assets in production', "The need to edit the server.js file to load the front end and the deployment of the back end server on Heroku's port.", 'Running npm install in the client folder is a crucial step in the post build script setup.', "Executing npm run build in the server's client folder ensures the correct build process for the application.", 'The process of deploying a front end and back end application on Heroku', 'The accessibility of the deployed MERN stack application online is demonstrated, along with considerations for custom domain registration and security measures such as protecting backend routes and using JWT for authentication.', "The process of converting the React application into static assets for deployment is detailed, involving the 'npm run build' command."]}