A guide for newbie to deploy a Full stack MERN app using Netlify and Heroku
What is MERN?
MERN stands for MongoDB - Express - React - Node.
MongoDB for the database
Node & Express for the server-side
React for the client-side
There's also the MEAN stack, which uses Angular instead of React, and the... MEVN(?) stack... whatever, it uses Vue instead of React or Angular.
Project Structure:
>.vscode : VS Code settings and extensions JSON files.
>client : Client-Side Code
>server : Server-Side Code
Configuration of Project
- client and server, both needs: .gitignore and package.json files.
.gitignore: To ignore the files and directories we don't want stored in our repo
package.json: To specify our separate dependencies and devDependencies
Process of Deployment
What we're going to do specifically is host our server code on Heroku and our client code on Netlify. So our React App hosted on Netlify will make API requests to our Express API hosted on Heroku.
This will assume that you have both client and server running correctly and that you have already connected your app to a hosted database on MongoDB.
Create both netlify and heroku account and login.
Install both netlify and heroku CLI to your pc(check on web) or in your project directory as npm i netlify-cli and npm i heroku-cli.
-
Go to netlify login in client side and heroku login in server side. * In heroku after login, This will prompt you to press any key, once you do it will take you to your browser where you will just need to click 'Log In'.
- Once this is successful you can close that browser window and navigate to your server folder of your project.
- In netlify just type netlify login in terminal and it will navigate to netlify account automatically and ask you to authorize it and once you click on authorize and you will be logged in and then you can close the browser window and navigate to your client folder in your project.
-
In MongoDB, We need to allow access to your MongoDB database now from a new IP address. For simplicity, I added all IP addresses to be allowed.
- Go to MongoDB site.
- Navigate to the Project you're deploying using the dropdown on the top left.
- Then click the Network Access tab on the left side bar.
- Click the green button on the right of the screen that says Add IP Address.
- A modal will popup. Click the button that says Allow Access from Anywhere. This will place 0.0.0.0/0 in the Whitelist Entry input. Then click Confirm.
Coming Back to project folder in server directory, If you are using Express the We must change what this Express server will listen for to app.listen(process.env.PORT || 5000) and add a file called Procfile and type web: npm run build and next edit index.js file as app.get('/', (req, res) => { res.send('Hello from Express!') because after deployment we can see this message.
Create a Heroku new app in Heroku.com and follow the steps whatever is displayed after creating a new app, like git init, git remote..., git add., etc. and then after successful deployment navigate to open app on top right corner there you can see the message which we have edited in index.js file in step.5
After step.6 Our server code is officially deployed and configured correctly. Now continue to client code with netlify.
After login to netlify from terminal in step.3 push your code to git repository(If you don't know how to push please go through YouTube), and open your netlify account click New site from Git and through GitHub proceed with deployment.
After deployment navigate to build and deploy option on left side of your screen and then click on edit settings and Change your Base directory to client, change your Build command to npm run build, and change your Publish directory to client/build. Then click the Save button on the bottom left.
After that, Near the top in the tabs located right under your team name and site name click on Deploys, Then click the Trigger deploy button which has a drop down with two options. Always use clear cache and deploy site to ensure a fresh build that has all changes we have made.
-
Lastly after we deploy our front-end React code we must ensure any requests we are sending from the client-side is changed to use our Heroku URL now instead of localhost.
- In my structure the requests were being made from client/api/index.js so navigate to that file and any request that contains http://localhost:5000 must be replaced by your Heroku URL, where we got a message on the browser after deployment.(step.5)
12.Ensure that you push these changes up to GitHub. netlify will trigger a redeploy when they detect changes to your master branch. So for this to work you must make those changes apparent to netlify essentially.
-------Successfully Deployed a MERN App------------
Thank You For Your Time.
if you get stuck anywhere feel free to comment below I'll help you.
Top comments (0)