title: How to serve up JSON files in MERN stack app
body: <p>I am currently working on building a MERN stack application that is serving as an admin center/backend for a game. My front end dev needs to be able to connect his end to my end points from the database.</p>
  <p>My question is how do I set up a route in my application that serves up a json file from my MongoDB to the webpage? I don't want to render the json file to a table or anything like that, just need it to be raw json. Any advice is much appreciated!</p>
  <p>Here's a small example of what I mean:</p>
  <p><a href="https://i.stack.imgur.com/Qpw7z.png" rel="nofollow noreferrer">JSON file in web browser example</a></p>
  <p>Here is my server side server.js:</p>
  <pre><code>const express = require('express');
  const connectDB = require('./config/db');
  const path = require('path');
  
  const app = express();
  
  //Connect Database
  connectDB();
  
  //Initialize Middleware - Allows for us to use 'req.body'
  app.use(express.json({ extended: false }));
  
  //Define Routes
  app.use('/api/users', require('./routes/users'));
  app.use('/api/auth', require('./routes/auth'));
  app.use('/api/userplayers', require('./routes/userPlayers'));
  
  //Serve React in Production
  if(process.env.NODE_ENV === 'production') {
      //Set static folder
      app.use(express.static('client/build'));
  }
  
  app.get('*', (req, res) =&gt; {
      res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
  
  const PORT = process.env.PORT || 4000;
  
  app.listen(PORT, () =&gt; console.log(`Server started on port ${PORT}`));
  </code></pre>
  <p>and here is my client side app.js:</p>
  <pre><code>import React, { Fragment } from &quot;react&quot;;
  import { BrowserRouter as Router, Route, Switch } from &quot;react-router-dom&quot;;
  import Navbar from &quot;./components/layout/Navbar/Navbar&quot;;
  import Home from &quot;./components/pages/Home&quot;;
  import Players from &quot;./components/pages/Players.js&quot;;
  import Login from &quot;./components/auth/Login&quot;;
  import General from './components/pages/General';
  import ContactState from &quot;./context/contact/ContactState&quot;;
  import AuthState from &quot;./context/auth/AuthState&quot;;
  import AlertState from &quot;./context/alert/AlertState&quot;;
  import setAuthToken from './utils/setAuthToken';
  import Test from &quot;./components/pages/Test&quot;;
  
  if (localStorage.token) {
    setAuthToken(localStorage.token);
  }
  
  const App = () =&gt; {
    return (
      &lt;AuthState&gt;
        &lt;ContactState&gt;
          &lt;AlertState&gt;
            &lt;Router&gt;
              &lt;Fragment&gt;
                &lt;Navbar /&gt;
                &lt;div className=&quot;container&quot;&gt;
                  &lt;Switch&gt;
                    &lt;Route exact path=&quot;/&quot; component={Login} /&gt;
                    &lt;Route exact path=&quot;/home&quot; component={Home} /&gt;
                    &lt;Route exact path=&quot;/players&quot; component={Players} /&gt;
                    &lt;Route exact path=&quot;/general&quot; component={General} /&gt;
                    &lt;Route exact path=&quot;/test&quot; component={Test} /&gt;
                  &lt;/Switch&gt;
                &lt;/div&gt;
              &lt;/Fragment&gt;
            &lt;/Router&gt;
          &lt;/AlertState&gt;
        &lt;/ContactState&gt;
      &lt;/AuthState&gt;
    );
  };
  
  export default App;
  </code></pre>