title: MERN STACK Failed to load resource: net::ERR_CONNECTION_REFUSED
body: <p>I have been googling and cannot find a solution to my issue. </p>
  
  <p>I AM NEW to the MERN stack, mostly do front end stuff. </p>
  
  <p>This project is created using MongoDB ATLAS, React, Express and node.js</p>
  
  <p>I have the app deployed to heroku, and the app is displaying but I cannot use it, i get the error <code>Failed to load resource: net::ERR_CONNECTION_REFUSED</code>. But i can see and interact with the front end of it, but the back-end is not working i'm assuming.. I can navigate pages etc.. But when I enter information and try to store it to the server, nothing happens, just the front end portion, but nothing connects or sends to the server, i keep getting that connection refused error. 
  Then this error follows immediately after : <code>Uncaught (in promise) Error: Network Error</code></p>
  
  <p>I'm using mongoDB atlas, I'm not sure if that makes a difference there or not. I do believe I set it up to be accessed anywhere too, not just my IP.</p>
  
  <p>Now when I run on my local machine it all works totally fine. IF I'M ON the heroku deployed version, WITH MY local machine server running, it works fine. But as soon as i shut my local server down, that errors comes back on the heroku deployed version.</p>
  
  <p>This is my server.js file:</p>
  
  <pre><code>const express = require('express');
  const cors = require('cors');
  const mongoose = require('mongoose');
  /* for heroku deployment */
  const path = require('path');
  
  require('dotenv').config();
  
  const app = express();
  const port = process.env.PORT || 5000;
  
  app.use(cors());
  app.use(express.json());
  /* for heroku deployment */
  app.use(express.static(path.join(__dirname, "client", "build")));
  
  const uri = process.env.ATLAS_URI;
  mongoose.connect(uri, { useNewUrlParser: true, useCreateIndex: true });
  
  const connection = mongoose.connection;
  connection.once('open', () =&gt; {
      console.log("MongoDB database connection established successfully")
  })
  
  const exerciseRouter = require('./routes/exercises');
  const userRouter = require('./routes/users');
  
  app.use('/exercises', exerciseRouter);
  app.use('/users', userRouter);
  /* for heroku deployment */
  
  if(process.env.NODE_ENV === 'production') {
    app.use(express.static('client/build'));
  
    app.get('*', (req, res) =&gt; {
      res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
    })
  }
  
  app.listen(port, () =&gt; {
      console.log(`Server is running on port: ${port}`)
  });
  </code></pre>
  
  <p>I also tried:</p>
  
  <pre><code>app.get("*", (req, res) =&gt; {
     res.sendFile(path.join(__dirname, "client", "build", "index.html"));
  })
  </code></pre>
  
  <p>Instead of the conditional.</p>
  
  <p>This is my <strong>backend</strong> package.json file. </p>
  
  <pre><code>{
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "start": "node server.js",
      "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client &amp;&amp; npm run build --prefix client"
    },
    "engines": {
      "node": "10.15.3"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
      "cors": "^2.8.5",
      "dotenv": "^8.2.0",
      "express": "^4.17.1",
      "mongoose": "^5.7.12"
    }
  }
  </code></pre>
  
  <p>I also tried:</p>
  
  <pre><code>"heroku-postbuild": "cd client &amp;&amp; npm install --only=dev &amp;&amp; npm install &amp;&amp; npm run build"
  </code></pre>
  
  <p>here too.</p>
  
  <p>This is my <strong>Front-end</strong> package.json file:</p>
  
  <pre><code>{
    "name": "mern-stack-project",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "axios": "^0.19.0",
      "react": "^16.12.0",
      "react-datepicker": "^2.10.1",
      "react-dom": "^16.12.0",
      "react-router-dom": "^5.1.2",
      "react-scripts": "3.2.0"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "proxy": "http://localhost:5000",
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": {
      "production": [
        "&gt;0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }
  }
  </code></pre>
  
  <p>This is a link to the site deployed on heroku if you wish to see for yourself: <a href="https://full-stack-exercise-tracker.herokuapp.com/" rel="nofollow noreferrer">https://full-stack-exercise-tracker.herokuapp.com/</a></p>
  
  <p>If you need any more code files from me please just ask. Like I said this is my first ever MERN stack app and MERN stack deployment. </p>
  
  <p>I appreciate any help, thank you!</p>