How to deploy MERN stack to a hosting service?

Question

I am new to web development and I have a hosting service on which I want to deploy my reactjs/node project. To deploy it previously, I had been simply uploading the build folder created from running npm run build. I have since added a connection to a mongodb database using the MERN stack.

The project was initially created using create-react-app, then I set up my backend node/mongodb following this tutorial: https://appdividend.com/2018/11/11/react-crud-example-mern-stack-tutorial/. All of my server code is contained within the project folder in an api folder.

I am able to run the project on local host by running npm start, nodemon server.js (from the api folder) and connecting to the mongodb in terminal. When I try to run it from the hosting service in the same way I did previously, it says it cannot connect to the database, which I assume is due to the fact that the connection is not open on my machine.

Currently, all the API calls are using axios post to http://localhost:4000/, which I would also assume will not work on the server. I have looked online for information regarding deploying the MERN stack, but all of the ones I have found discuss it in terms of hosting on AWS EC2, which is not what I will be doing.

How would I be able to deploy to my hosting service? Are there any references or places I should look for this information?

Edit: I have connected to the database using MongoAtlas, so am using a SRV address. I think the issue is the axios posts using the localhost address, as the app on the server only works if I have nodemon running on my local machine. What address should I use instead of this?

Solution 1

Currently, all the API calls are using axios post to http://localhost:4000/, which I would also assume will not work on the server.

You're correct, that will not work. That's because if users get your React app, all API calls will be redirect to their localhost. Which doesn't hold your API

When I try to run it from the hosting service in the same way I did previously, it says it cannot connect to the database, which I assume is due to the fact that the connection is not open on my machine.

That is probably because the MongoDB URL is probably still set to something like 'mongodb://localhost:27017/myapp. There are 2 main options here.

1. Use a "database hosting service" like MongoDB Atlas, you will then need to change your database's URL to point to the one provided by the service
2. Host the database on your server, which will work with the localhost URL

I have looked online for information regarding deploying the MERN stack, but all of the ones I have found discuss it in terms of hosting on AWS EC2, which is not what I will be doing.

• Any server where you have control and flexibility will work in this scenario. You can host all your stuff (server, front-end and database) on it if you want. EC2 can do all of that but it's not your only option. You can also check out similar products from Microsoft and Google, etc...
• Another way to go is to deploy each artifact separately which is more scalable but also introduces its own complexity. If you're going this way you may want to look into Docker containers and Kubernetes which are useful to orchestrate distributed systems

Edit

Since you're using MongoDB Atlas make sure you white-listed the IP adress of your server

Solution 2

On the front-end, you'll want to set up an axios configuration that'll point to the correct URL based upon the running environment:

utils/axiosConfig.js (I like using the name app to keep it inline with express, but you can name it whatever)

import axios from 'axios';

const env = process.env.NODE_ENV; // current environment

export const app = axios.create({
  baseURL:
    env === 'production'
      ? 'http://example.com/api/' // production
      : 'http://localhost:5000/api/', // development
});

Then you can utilize this configuration wherever you do an API call:

import { app } from '../utils/axiosConfig.js';

app.get("example");
app.post("example");
...etc

Now, it can send requests to http://localhost:5000/api/example or http://example.com/api/example.

In your client package.json, you can specify the environment:

 "scripts": {
    "start": "NODE_ENV=development webpack-dev-server",
    "build": "NODE_ENV=production webpack",
    "stage": "NODE_ENV=staging webpack",
    "test": "NODE_ENV=testing jest --watchAll --coverage",
  },

Comments

[Meghan King]

I have connected to the database using MongoAtlas, so am using a SRV address. I think the issue is the axios posts using the localhost address, as the app on the server only works if I have nodemon running on my local machine. What address should I use instead of this? (Edited post to include this)

[molamk]

Your front-end needs to call your back-end's URL. For example if it's hosted on backend.com then something like https://backend.com:your_port/api @MeghanKing

[Meghan King]

Does mongodb need to be installed on the server for this to work?

[Meghan King]

Does mongodb need to be installed on the server for this to work?

[molamk]

@MeghanKing nope. The only condition is that the server needs to know the correct URL of the database. So if you're using Atlas then it's srv..., if it's on the same server then localhost.... On your front-end though it has to point to the server's URL

[Matt Carlotta]

No. It's up to you. You can use a 3rd party hoster or you can set up Mongodb on your hosting machine.