Many students face problems hosting the MERN projects. I will discuss the easiest and beginner-friendly way to host the MERN projects. Now, Let’s start.
I assume you deployed your database in Mongo Atlas and created a separate git repo for your backend project. First, add a compression middle wire. Run the command, npm i compression to install the package and import it to your server file. The middleware will attempt to compress response bodies.
var compression = require('compression')
app.use(compression())
Now go to the package.json file and add the following code.
"engines": {
"node": "14.17.1"
}
Write your node version instead of 14.17.1. If you don’t know your node version then go to the command prompt or VS code terminal and write the command node -v.
We host our backend project on Heroku. Heroku always tries to run the project using npm start command. Write the npm start command in the package.json file.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon server.js",
"start": "node server.js" //for heroku
},
you write your main file instead of server.js. Heroku understand with this command which file has to run. Make sure Mongoose is installed in your project, not globally. Run npm install in your terminal. This command updates the package-lock.json according to the package.json file. Now our project is ready to deploy.
Getting Start With Heroku: Go to the Heroku website. Sign up with your information. Now you can find the create new app button. But we don’t create any app here. We are using The Heroku CLI . We manage Heroku from the terminal using this CLI. Go to the Heroku CLI website and download it. Install the CLI. Write heroku -v and you find the Heroku version. That’s means, everything is okay till now. If you don’t get your version, then restart your command prompt and write this command again. Now hopefully, you get your Heroku version. Write another command heroku login, this command is used to log in to Heroku using the terminal. Check your browser, a new tab opens. Just follow the steps.
Deploying to Heroku: Go to the VS code again. Create a .gitignor file and ignore the node module and .env file. We can not upload .env file. Because there is my secret information in this file. Heroku doesn’t need .env file, it has its own environment system. Intailase your project and update the git repo. Write these commands
git init
git commit -m "message.."
git push
Now, we create a heroku app by using heroku create. We get a domain and a public heroku repo link. (Ignore the warning message in the following picture)
Deploy the project to the heroku repo. git push heroku main
You get the heroku deployed link in the last part of the message.
You can use this link instead of https://localhost:port. You can check all the API using postman or your frontend.
If you face any error to deploy the project, you find the error message on the terminal using heroku logs — tails and also on heroku website. Go to the Heroku website and log in. You get your project there, click on the project. Then find a button moretop-right corner. Click on the button, you get theview logs` option, and click on it.
On that page, you get all your heroku activities logs as well as error messages too.
If your error is about mongoose, port, or key related, then you have to config the environment.
heroku config:set NODE_ENV=production
Config your all .env file’s property like this. You can get all your configuration using heroku config.
Hopefully, now everything is perfect and we sucessfully deployed our backend project.
Frontend Project:
Preparing Frontend Project: Change all backend url with Heroku url in the frontend project. Suppose your code is
axios.get('https://localhost:port/user')
change this like
axios.get('heroku url/user')
Now your frontend connected to your deployed backend server. Now update the git repo.
git init
git commit -m "message.."
git push
Frontend Deployment: We will use netlify for our frontend deployment. Go to the netlify website and signup manually or singup with github account. We can deploy frontend in two different ways.
Run the command npm build and bulid the project. Then go to the netlify website-> go the sites option -> drop the build floder of your project. Sometimes it doesn’t work. let’s jump to the next method.
After login in the netlify website, you get a button new site from Git . Click on the button -> select github -> select your git repo. After couple of time, they provide your project link.
You can also change your project name. Your link will be similar to your project name. Go the sites option -> click on your project->site setting->click on change the site name button->change the name.
Now, both backend and frontend are deployed and I really hope your app works perfectly.
Thank you for reading.