# How to deploy a MERN stack application on Heroku

A full-fledged application is the calming tune of every developer. As the functionality of the application and feature grow, the application demands a database and a backend to interact with it too.
A newbie learning to develop applications suffers the over-diverse pool of syntax, one for the frontend, one for the backend, and another level of understanding to establish a concurrent run of both frontend and backend. But if you are a javascript enthusiast, that's not the case for you.

You can learn to code and develop a full-fledged application within the realm of your javascript syntax. The solution is the MERN stack which comprises [MongoDB](https://university.mongodb.com/) ( a NoSQL database), [Express](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#introducing_express) (a backend server framework), [React](https://reactjs.org/docs/getting-started.html) (a frontend javascript framework), and [Node](https://nodejs.org/en/docs/) ( a javascript runtime environment out of browser).

[*We are using MongoDB atlas -a cloud database*](https://cloud.mongodb.com/)

After building your MERN stack application, seeing it running locally on your machine at localhost://3000 certainly good, but to make it employer-ready, you should host it. I will show you how to deploy it on [Heroku](https://signup.heroku.com/) (container-based cloud Platform as a Service (PaaS) used to deploy, manage, and scale modern apps). Make your account.

*  Folder Structure
You should follow the same folder structure to run scripts effectively.
![Folder structure for MERN stack.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1621923165886/NNTN8ybTP.png)

Your backend files and modules should be in the root folder directory (:/project_folder/) and your frontend in a folder in your root folder (:/project_folder/client_folder) Client folder is react frontend folder in the above image.

* Scripts for starting, building, and deploying your project
```
   "scripts": {
        "start": "node server.js",
        "server": "nodemon server.js",
        "client": "cd client && npm start ",
        "dev": "concurrently -n 'server,client' -c 'red,green' \"npm run server\" \"npm run client\"",
        "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
    }
```
* Edit the server.js  to deploy only in production environment mode
```
if(process.env.NODE_ENV === 'production'){
  //set static folder
  app.use(express.static('client/build'));
  app.get('*',(req,res) => res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html')));
}
```

 * Install the [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli#download-and-install)
    Check installation success with ``heroku -v`` in the command line. It will show you the version.
* Go to your project directory and ``heroku login``. This will invoke login in your browser.
*  Run ``heroku create``. It will create a domain name for your project to get hosted. 
* Git repository
You should make a local git repository for your project initialized in the root folder. Learn [git](https://vickyikechukwu.hashnode.dev/introduction-to-git-in-16-minutes) here.
Your changes should be up to date with the repository. To make sure,
```
git init
git add .
git commit -m "Preparing to Deploy 
```

* Now you need to add Heroku as a remote repository. Go to your [Heroku dashboard](https://dashboard.heroku.com/apps) and open your project with the same domain name. Go to the deploy section and you will see a command like
```
heroku git remote -a  {heroku-project-name}
```
* After adding Heroku as remote repository, you can push your project to Heroku by 
```
git push heroku master
```
It will run that post-build script that's going to build our react static assets and create the build folder
and our backend will load that index.html file and our application will deploy. You can see your deployed application by ``heroku open``.
To deploy the updated features, you must follow the same.