How to deploy MERN stack to a hosting service?

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

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",
  },