-
If you don't have an account yet, create a Heroku account (you might have already done this in Module 2)
- Heroku is a cloud platform for hosting apps
- Signup here https://signup.heroku.com/ and follow next steps until you arrive to Heroku Dashboard
-
In the Heroku Dashboard, select Create new app
- provide a name for your app (it will be shown in the app access url => https://cool-potato.herokuapp.com) and click Create app
This MERN Stack deployment method consist in adding your full Frontend Application to the Backend Repository. Allowing for a single Deployment (the Backend) that will read both type of requests (FE & BE). To that end, this guide will consist in two main segments
- Adding the Frontend application to the Backend repository.
- Deploying the Backend repository in Heroku (Similar as we did in Module 2)
Before we move on, remember to remove all API_KEYS and secrets from your code if you have them. Create environment variables for them inside the .env file. All environment variables in your client side must start with REACT_APP_
-
If you haven't done so already, change the name of your
.envfile to.env.development.local -
Create a new file names
.env.production.localthat's a copy of.env.development.local -
Update the
.env.production.localfile with your real heroku app url- Replace
REACT_APP_SERVER_URL=http://localhost:5005/api - With
REACT_APP_SERVER_URL=https://cool-potato.herokuapp.com/apiexcept with the name of your application.
- Replace
In the end, .env.production.local should be exactly the same as .env.development.local except for the SERVER_URL.
**IMPORTANT: Make sure your .env files are in the root directory (do not create them inside src)
IMPORTANT: Don't forget to add the /api prefix of your backend routes
IMPORTANT: Ensure that you don't put that / at the end after /api
- Go to the terminal and run
npm run build. - The above command will bundle your whole React App inside the build folder so we can add it to the Server Repository
- Copy the contents inside the build folder in the client side code and paste it inside the public folder inside your server side code
- Note: If you have created your server side code with
ironlauncheryou may not see apublicfolder. If so, simply create one and paste all the contents that you copied from the client side
- make sure package.json is in the root of the project
- make sure package.json contains a start script
- Check the example :
"scripts": {
"start": "node server.js"
},
DO THE FOLLIWING STEP TO SET UP ENGINE ONLY IF NEEDED
- add engines to package.json if needed
"engines": {
"node": "x.x.x",
"npm": "x.x.x"
}
- In
app.js, ensure your server middleware is set up to correctly to look at static files. Add this code right above all your routes are defined in your app.js
const path = require('path');
app.use(express.static(path.join(__dirname, 'public')));
- Now, we need to let the server know to send React code if none of the routes match. Add this code in
app.jsbelow all your routes but above your error handling middleware
app.use((req, res, next) => {
// If no routes match, send them the React HTML.
res.sendFile(__dirname + "/public/index.html");
});
Your server app.js might look something like this
The next steps will be almost identical to the process of deploying a Server to Heroku we did on Module 2. If you have already deploy a Module 2 app, you can continue with this guide, as we will skip any settings for newly created accounts. Otherwise, follow the steps on M2 Deployment instructions
- Go to the Deploy section in the Heroku app dashboard
- As the Deployment method, choose Github, then click on Connect to Github and authorize heroku app to access your Github Repositories (One time only)
- Search for the repository name you wish to deploy in Heroku and connect it with your Heroku account
- Select the branch you wish to deploy (master or main) and enable Automatic deploys. (This will ensure that every time any code is pushed/merged to the master/main branch, it will automatically deploy to your heroku app)
-
Go to Mongo Atlas page and sign in. Access here.
-
Note: Mongo Atlas only allows you to have one free cluster (a group of Databases), but we can use the same cluster already created in Module 2 for the new database. Remember that if you have not signup to Atlas yet or created a cluster, follow the M2 Deployment instructions instead.
-
Go to the Atlas dashboard where you see your cluster and click on connect .
- Choose
Connect your application
- Copy that url that you see
-
The URL looks something like this:
mongodb+srv://username:<password>@cluster0-st12d.mongodb.net/<dbname>?retryWrites=true&w=majority
-
Paste the URL somewhere where you can modify it
-
Change
<password>with your real password and<dbname>with the database name you want for your project (can be same as app name) -
Note if you forgot you mongo atlas password, go to the Mongo Atlas Dashboard, go to Database Access and click on edit of the user and edit password.
-
Make sure you remove the
<and>symbols -
When you are done, it should look similar to this:
mongodb+srv://jorgeberrizbeitia:Test@123@cluster0-st12d.mongodb.net/cool-potato?retryWrites=true&w=majority
- Go to your heroku dashboard app page and go to the Settings Tab, then click on Reveal Config Vars
- Since the
.envfile should never be pushed to Github, this is where your Heroku app Enviromental Variables will be located. Add all of them as needed. for Example:- Mongo Atlas connection => MONGODB_URI => Paste the Mongo Atlas URL here
- Session Secrets => SECRET_SESSION
- External API credentials => API_KEY
- Once you have finish adding all enviromental variables, click on the Open app button in your Heroku DashBoard App Page, you should see your app running.
And that's it! Your app should be deployed! 🚀
- Note: The URL to access the deployed app will always be the same
- https://name-of-your-app.herokuapp.com/
- For example: => https://cool-potato.herokuapp.com/
- To deploy again, you will need to do a new build of your React App and add it to your Backend (Step 1), then push your backend to Github. Remember to add any new Server .env variables to your Heroku Config Vars.
3.1 If there are problems while launching the Heroku App, we'll need to check the logs from heroku and see why it might be crashing.
- In the Heroku Dashboard for the App, go to the More section of your app, then click on View logs
- Read the logs, scroll and analyze what the error is and why it might be occurring
3.2 If you are having whitelisting Errors. Ensure you've allowed any website to connect to your database
- In your Mongo Atlas Dashboard, go to the Network Access tab and make sure you IP address 0.0.0.0/0 (all IP addresses) is added. If not, add it to the list.
- On the Mongo Atlas Dashboard, go to Database Access and click on edit of the user
- Click on Edit Password and add a new one.
3.4 You can share your cluster with other team members so that they can check the data in MongoDB Compass
- In the Mongo Atlas Dashboard, wile connecting, choose mongoDB Compass.
- Copy the URL, add your password and share this with your team members
- To access the Cluster in Compass, open Mongo Compass app, add the shared URL (including the password) in the input field and click connect
- In case your app requires a seed file located on your Server App code. Follow the next steps:
- In VS code go to the
.envfile. - Add the following variable: MONGODB_URI
- The value of the MONGODB_URI variable should be the Mongo Atlas URL (including the password and DB name)
- Run your seed file as usual => example:
node seeds/seedFile.js - In the Mongo Atlas Dashboard, check the database. The data should have been added.
- Remove the MONGODB_URI variable from the
.envfile - NOTE: By keeping the above MONGODB_URI variable in the
.envfile, your app will connect to the Mongo Atlas Database instead of the local database while running locally.
- In VS code go to the