title: Routing with an Express API and a ReactJS SPA
body: <p>I recently deployed a site using React on Heroku. In the console of the browser I received an output of html text rather than my user interface javascript.</p>
  
  <p>Link to my <a href="http://www.gittrack.ml/" rel="nofollow noreferrer">site</a>
  Link to <a href="https://github.com/dchicchon/GitTrack" rel="nofollow noreferrer">repository</a></p>
  
  <p>I think that the issue is rooted in my server.js route to serve my index.html</p>
  
  <p>server.js</p>
  
  <pre class="lang-js prettyprint-override"><code>// Allows us to place keys and sensitive info in hidden .env file
  require("dotenv").config();
  
  // Require Packages
  const express = require("express");
  const app = express();
  const morgan = require("morgan")
  const db = require("./models");
  const routes = require("./routes");
  const passport = require("passport");
  const session = require("express-session")
  const path = require("path");
  
  const MySQLStore = require("express-mysql-session")(session);
  
  require("./config/passport")(passport)
  app.use(express.urlencoded({ extended: true }));
  app.use(express.json());
  
  let options = {};
  if (process.env.NODE_ENV === 'production') {
      options = {
          host: process.env.HOST,
          port: 3306,
          user: process.env.USER,
          password: process.env.PASSWORD,
          database: process.env.DB
      }
  } else {
      options = {
          host: 'localhost',
          port: 3306,
          user: 'root',
          password: process.env.DB_PASSWORD,
          database: 'tracker'
      }
  }
  
  
  // Options for mysql session store
  
  let sessionStore = new MySQLStore(options);
  
  // Pass in mysql session store
  app.use(session({
      key: 'surfing_dogs',
      secret: 'surfing_dogs',
      store: sessionStore,
      resave: false,
      saveUninitialized: false
  }))
  
  app.use(passport.initialize());
  app.use(passport.session());
  
  app.use(morgan('common'))
  
  
  // THIS IS REALLY IMPORTANT FOR ROUTING CLIENT SIDE
  // We want to have our app to use the build directory 
  app.use(express.static(__dirname + '/client/build'))
  
  // For every url request we send our index.html file to the route
  app.get("/*", (req, res) =&gt; {
      res.sendFile(path.join(__dirname, "client", "build", "index.html"));
  });
  
  app.use(routes)
  
  
  db.sequelize.sync({ force: false }).then(() =&gt; {
      let server = app.listen(process.env.PORT || 5000, function () {
          let port = server.address().port;
          console.log(`Server is listening on PORT ${port}`)
      })
  })
  
  </code></pre>
  
  <p>To elaborate, I placed this route in my server.js because I have client-side routing and I want to trick the browser in always serving the index.html</p>
  
  <p>Another reason that I want to solve this issue is because I am currently unable to login to my site using credentials.</p>
  
  <p>Here is a small bit of the login process front-end wise. My goal was based on the login state, but unfortunately the login state is not changing.</p>
  
  <pre class="lang-js prettyprint-override"><code> if (this.state.loggedIn === true) {
        return (
          &lt;Router&gt;
            &lt;Navbar user={this.state.user} logout={this.logout} /&gt;
            &lt;Switch&gt;
              {this.state.userType === 'administrator' ? &lt;Route path='/' exact component={() =&gt; &lt;AdminHome user={this.state.user} /&gt;} /&gt; : ''}
              {this.state.userType === 'instructor' ? &lt;Route path='/' exact component={() =&gt; &lt;InstructorHome user={this.state.user} /&gt;} /&gt; : ''}
  
              {/* Path for student profile based on it */}
              &lt;Route exact path='/student/:id' exact component={StudentProfile} /&gt;
  
              {this.state.userType === 'student' ? &lt;Route path='/' exact component={() =&gt; &lt;StudentHome user={this.state.user} /&gt;} /&gt; : ''}
              &lt;Route exact path='/settings' exact component={() =&gt; &lt;Settings user={this.state.user} /&gt;} /&gt;
              &lt;Route component={NoPage} /&gt;
            &lt;/Switch&gt;
          &lt;/Router&gt;
        )
      } else {
        return (
          &lt;Router&gt;
            &lt;Switch&gt;
              &lt;Route path='/' exact component={SplashPage} /&gt;
              &lt;Route path='/login' exact component={Login} /&gt;
              &lt;Route path='/signup' exact component={Signup} /&gt;
  
              {/* Go to signup based on cohortID */}
              &lt;Route path='/signup/:id' exact component={CohortSignup} /&gt;
  
              &lt;Route component={NoPage} /&gt;
  
            &lt;/Switch&gt;
          &lt;/Router&gt;
        )
      }
  </code></pre>
  
  <p>Hope someone out there could help me out!</p>