title: GET request returns index.html doc instead of json data
body: <p>After deploying my mern app to Heroku, the <code>GET</code> request on the home page <code>('http://localhost:8000/post/')</code> is now returning <code>index.html</code> instead of <code>json data</code> from the request. I'm getting <code>200 status</code> code but the response is <code>html</code>. However, it works fine locally.<br/>All the other requests are working except this one.
  Whenever I think I've fixed it, Heroku displays the json data instead of the UI on this same route. I'm assuming that these issues are related.</p>
  <p>How can I solve this? Thanks!</p>
  <p>route/controller - list posts</p>
  <pre><code>router.get('/', (list)) 
  
  exports.list = (req, res) =&gt; {
    const sort = { title: 1 };
    Post.find()
      .sort(sort)
      .then((posts) =&gt; res.json(posts))
      .catch((err) =&gt; res.status(400).json(&quot;Error: &quot; + err));
  };
  </code></pre>
  <p>server.js</p>
  <pre><code>require(&quot;dotenv&quot;).config();
  
  // import routes
  ...
  const app = express();
  
  // connect db - first arg is url (specified in .env)
  const url = process.env.MONGODB_URI 
  mongoose.connect(url, {
    useNewUrlParser: true,
    useCreateIndex: true,
    useUnifiedTopology: true,
    useFindAndModify: false,
  });
  mongoose.connection
    .once(&quot;open&quot;, function () {
      console.log(&quot;DB Connected!&quot;);
    })
    .on(&quot;error&quot;, function (error) {
      console.log(&quot;Error is: &quot;, error);
    });
  
  // middlewares
  app.use(function(req, res, next) {
    res.header(&quot;Access-Control-Allow-Origin&quot;, '*');
    res.header(&quot;Access-Control-Allow-Credentials&quot;, true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header(&quot;Access-Control-Allow-Headers&quot;, 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
    next();
  });
  
  // middleware
  ...
  //  app.use(express.static(path.join(__dirname, './client/build')))
  app.use(authRoutes);
  app.use(userRoutes);
  app.use('/post', postRoutes);
  
  if (process.env.NODE_ENV === &quot;production&quot;) {
    app.use(express.static(&quot;client/build&quot;));
  }
  
  app.get(&quot;/*&quot;, function (req, res) {
    res.sendFile(path.join(__dirname, &quot;./client/build/index.html&quot;));
  });
  
  const port = process.env.PORT || 80;
  
  app.listen(port, () =&gt; {
    console.log(`Server is running on port ${port}`);
  });
  </code></pre>
  <p>ListPosts.js</p>
  <pre><code>class ListPosts extends React.Component {
      state = {
          title: '',
          body: '',
          date: '',
          posts: []
      }
  
      componentDidMount = () =&gt; {
          this.getPosts()
      }
  
     getPosts = () =&gt; {
          axios.get(`${API}/post`)
          .then((response) =&gt; {
              const data = response.data
              this.setState({posts: [data]})
              console.log(data)
          })
          .catch((error) =&gt; {
              console.log(error)
          })
      }
       
      displayPosts = (posts) =&gt; {
          if (!posts.length) return null;
        posts.map((post, index) =&gt; (
              &lt;div key={index}&gt;
             ...
              &lt;/div&gt;    
          ))
      }
  
  
      render() {
          return (
           &lt;div&gt;
             {this.displayPosts(this.state.posts)}
             &lt;/div&gt;
          )
      }
  }
  
  export default ListPosts
  </code></pre>