Learn How to Deploy MERN Stack App to Heroku with Redux
Table of Contents
- Introduction
- Preparations for Deployment
- Creating the Procfile
- Deploying with Heroku Post Build
- Adding Environment Variables to Heroku
- Testing the Deployed App
- Alternative Deployment Method
- Conclusion
Introduction
Welcome back to Roadside Coder! In this last video of our Merge Stack Tutorial series, we will be focusing on deploying our full-stack MERN application to Heroku. If You've been following along with the series, you're already familiar with the functionality of our Node Zipper application. But if you're new here, don't worry! You can always catch up by checking out the playlist on our YouTube Channel.
Preparations for Deployment
Before we get into the deployment process, there are a few preparations we need to make. First, let's navigate to the backend folder and open the server.js file. Here, we'll be adding some commands to enable the deployment. We'll start by defining the Current directory's path using the path.resolve
module in Node.js. Then, we'll check if our app is in production mode by accessing the process.env.NODE_ENV
variable, which we have defined in our .env file.
If our app is in production mode, we will use the express static Middleware to serve the static files from our front end. To do this, we'll need to Create a build folder in the front end by running the command npm run build
. Once the build is complete, we'll join the current path with the path to the build folder using the path.join
module. Finally, we'll add a app.get
route to handle all other routes and serve the index.html
file from the build folder.
Creating the Procfile
To deploy our application on Heroku, we need to create a Procfile
. This file tells Heroku how to start our server. In the Procfile, we simply need to write web: node backend/server.js
. This specifies that We Are using the node
command to run our server.js file located in the backend folder. Save the Procfile and close it.
Deploying with Heroku Post Build
Now that we have set up the necessary files and configurations, we can proceed with the deployment. First, we need to install the Heroku CLI. If you're using macOS, you can use the command provided in the documentation. For Windows users, you can download the appropriate installer Based on your system architecture.
Once the Heroku CLI is installed, make sure to restart your VS Code for the changes to take effect. Now, in the terminal, Type heroku login
to log in to your Heroku account. Follow the instructions and return to the CLI after logging in successfully.
Next, we will push our project to the Heroku repository using the command git push heroku master
. This will start the deployment process. Heroku will install the necessary binaries and build our front-end folder, creating an optimized production build.
Adding Environment Variables to Heroku
After the deployment process is complete, we need to add our environment variables to the Heroku app. To do this, go to the Heroku dashboard, click on the settings tab, and select "Reveal Config Vars". Here, you can add the key-value pairs from your .env file.
Testing the Deployed App
Now that everything is set up and our app is deployed, let's test it out. Refresh the Heroku app URL, and you should see your app up and running. However, if you encounter an "application error" message, it may be because you forgot to add the environment variables. Go back to the Heroku settings and make sure they are properly configured.
Alternative Deployment Method
If the Heroku post build command causes any issues during the deployment process, there is an alternative method you can try. In this method, you manually build the front-end folder and push it to the Heroku repository. To do this, remove the "frontend/build" directory from your .gitignore file and include it in your git repository. Then, you can simply push the build folder to Heroku with each deployment.
Conclusion
Congratulations! You have successfully deployed your MERN application to Heroku. This concludes our Merge Stack Tutorial series. If you enjoyed this video, please give it a thumbs up and consider subscribing to our YouTube channel, Roadside Coder. Your support motivates us to create more informative and engaging content for you. You can also Show your support by buying us a coffee or becoming a member for access to one-on-one web development lessons. Thank you for watching, and we'll see you in the next video!
Highlights
- Learn how to deploy a full-stack MERN application to Heroku
- Preparations for deployment, including adding the necessary commands and configurations
- Creating the Procfile to define the server startup command
- Deploying with Heroku post build process
- Adding environment variables to Heroku for secure configuration
- Testing the deployed application
- Alternative deployment method for handling build folders
FAQ
Q: What is Heroku?
A: Heroku is a cloud platform that allows developers to deploy, manage, and scale applications.
Q: How can I install the Heroku CLI on Windows?
A: To install the Heroku CLI on Windows, you can use the appropriate installer for your system architecture. Download the 64-bit or 32-bit installer from the Heroku website and follow the installation instructions.
Q: Can I deploy my application to Heroku without using the Heroku CLI?
A: While using the Heroku CLI is the recommended method, there are alternative deployment methods available. You can also deploy your application to Heroku using Git or by connecting directly from your Git repository.
Q: How do I add environment variables to Heroku?
A: To add environment variables to Heroku, go to your Heroku dashboard, navigate to the settings tab, and select "Reveal Config Vars". Here, you can add the key-value pairs from your .env file to ensure proper configuration.
Q: What if the Heroku post build command fails?
A: If the Heroku post build command fails during the deployment process, you can try an alternative method. Simply remove the frontend/build directory from your .gitignore file and include it in your Git repository. Then, push the build folder to Heroku with each deployment.
Q: Can I deploy a MERN application to other hosting platforms?
A: Yes, you can deploy a MERN application to various hosting platforms, such as AWS, Azure, or Google Cloud. The process may differ slightly, but the key steps remain the same.