title: My react app on heroku opens home page but will not open other pages
body: <p>My react app runs fine locally, and deploys to heroku.  However, from the home page, any link to another page shows a blank page with 'not found' on it.  There are no other error messages.</p>
  
  <p>Here is my server-side package.json file:</p>
  
  <pre><code>{
    "name": "portfolio-generator",
    "version": "1.0.0",
    "description": "",
    "main": "server.js",
    "engines": {
      "node": "12.16.x"
    },
    "dependencies": {
      "axios": "^0.19.2",
      "bootstrap": "^4.5.0",
      "concurrently": "^5.2.0",
      "express": "^4.17.1",
      "if-env": "^1.0.4",
      "mongoose": "^5.9.13",
      "nodemon": "^2.0.4",
      "react-bootstrap": "^1.0.1",
      "react-bootstrap-validation": "^0.1.11",
      "styled-components": "^5.1.0"
    },
    "devDependencies": {},
    "scripts": {
      "start": "if-env NODE_ENV=production &amp;&amp; npm run start:prod || npm run start:dev",
      "start:prod": "node server.js",
      "start:dev": "concurrently \"nodemon --ignore 'client/*'\" \"npm run client\"",
      "client": "cd client &amp;&amp; npm run start",
      "build": "cd client &amp;&amp; npm run build",
      "heroku-postbuild": "cd client &amp;&amp; npm install &amp;&amp; npm install --only=dev --no-shrinkwrap &amp;&amp; npm run build",
      "seed": "node ./seeders/seed.js",
      "install": "cd client &amp;&amp; npm install"
    },
    "repository": {
      "type": "git",
      "url": "git+https://https://github.com/...../jtsy.git"
    },
    "author": "",
    "license": "ISC",
    "bugs": {
      "url": "https://https://github.com/...../jtsy/issues"
    },
    "homepage": "https://https://github.com....../jtsy#readme"
  }
  </code></pre>
  
  <p>Here's the client-side package.json:</p>
  
  <pre><code>{
    "name": "portfolio-generator",
    "version": "0.1.0",
    "private": true,
    "proxy": "http://localhost:3001/",
    "dependencies": {
      "@testing-library/jest-dom": "^4.2.4",
      "@testing-library/react": "^9.5.0",
      "@testing-library/user-event": "^7.2.1",
      "axios": "^0.19.2",
      "bootstrap": "^4.4.1",
      "react": "^16.13.1",
      "react-bootstrap": "^1.0.1",
      "react-bootstrap-validation": "^0.1.11",
      "react-dom": "^16.13.1",
      "react-router-dom": "^5.1.2",
      "react-scripts": "3.4.1",
      "semantic-ui-css": "^2.4.1",
      "semantic-ui-react": "^0.88.2",
      "styled-components": "^5.1.0"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "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>server.js</p>
  
  <pre><code>const express = require("express");
  import npm package mongoose, the ODM for mongo database
  const mongoose = require("mongoose");
  const routes = require("./routes");
  
  const app = express();
  // set the port for mongo connection to 3001 in development mode
  const PORT = process.env.PORT || 3001;
  
  app.use(express.urlencoded({ extended: true }));
  app.use(express.json());
  
  if (process.env.NODE_ENV === "production") {
    app.use(express.static("client/build"));
  }
  
  app.use(routes);
  
  // Connect to the Mongo DB (portfolio_db)
  mongoose.connect(
    process.env.MONGODB_URI || "mongodb://localhost/portfolio_db",
    {
      useCreateIndex: true,
      useNewUrlParser: true,
      useUnifiedTopology: true,
    }
  );
  
  
  app.listen(PORT, () =&gt;
    console.log(`  ==&gt; API Server now listening on PORT ${PORT}!`)
  );
  </code></pre>
  
  <p>Based on some research, I added a static.json file:</p>
  
  <pre><code>{
    "root": "build/",
    "clean_urls": false,
    "routes": {
      "/**": "index.html"
    }
  }
  </code></pre>
  
  <p>There is a default route in routes/index.js on the server side:</p>
  
  <pre><code>....
  router.use("*", (req, res) =&gt;
    res.sendFile(path.join(__dirname, "../client/src/index.html"))
  );
  
  module.exports = router;
  </code></pre>
  
  <p>In App.js (react top component), react router is used like this:</p>
  
  <pre><code>...
       &lt;Router&gt;
          &lt;Switch&gt;
            &lt;DevDataContext.Provider value={devDataProvider}&gt;
              &lt;SetupContext.Provider value={setupProvider}&gt;
                {setup.initialized ? (
                  &lt;Route exact path="/" component={Home} /&gt;
                ) : (
                    &lt;Route exact path="/" component={Signin} /&gt;
                  )}
                &lt;Route exact path="/contact" component={Contact} /&gt;
                &lt;Route exact path="/about" component={About} /&gt;
                &lt;Route exact path="/Developer" component={Developer} /&gt;
                &lt;Route exact path="/Signin" component={Signin} /&gt;
              &lt;/SetupContext.Provider&gt;
            &lt;/DevDataContext.Provider&gt;
            &lt;Route component={NoMatch} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
     ...
  </code></pre>
  
  <p>With all that, I'm at a standstill.  The home page loads and refreshes, but won't redirect anywhere.</p>
  
  <p>EDIT:  The path to index.html was wrong.  It resides in the 'public' folder under 'client', so in routes/index.js, it is now:</p>
  
  <pre><code> router.use("*", (req, res) =&gt;
        res.sendFile(path.join(__dirname, "../client/public/index.html"))
      );
  </code></pre>
  
  <p>Now all I get is a blank screen on the heroku page.  I assume my problem is based on how the routes are defined, but I still can't figure it out.</p>
  
  <p>My folder structure is:</p>
  
  <pre><code>/projectname
    server.js
    package.json
    ...
   /client
      package.json
        /public
          index.html
          ...
        /src
          App.js
          index.js
          ...
            /components
            /pages
   /controllers
   /models
   /routes
      index.js (this is where the path to index.html is defined)
        /api
          index.js
          ...
  </code></pre>
  
  <p>EDIT #2 SOLUTION
  Made a couple of key changes in server.js.  The most important was adding the 'path' package (rookie mistake).  I also had to put the 'app.use(routes)' ahead of the default react route code, which is now outside of the "production" code block.</p>
  
  <pre><code>const path = require('path');
  const express = require("express");
  const mongoose = require("mongoose");
  const routes = require("./routes");
  
  const app = express();
  // set the port for mongo connection to 3001 in development mode
  const PORT = process.env.PORT || 3001;
  
  // Configure body parsing for AJAX requests
  app.use(express.urlencoded({ extended: true }));
  app.use(express.json());
  
  // Serve up static assets
  **if (process.env.NODE_ENV === "production") {
    app.use(express.static("client/build"));
  }
  app.use(routes);
  app.get("*", function (req, res) {
    res.sendFile(path.join(__dirname, "./client/build/index.html"));
  });**
  
  // Connect to the Mongo DB (portfolio_db)
  mongoose.connect(
    process.env.MONGODB_URI || "mongodb://localhost/portfolio_db",
    {
      useCreateIndex: true,
      useNewUrlParser: true,
      useUnifiedTopology: true,
    }
  );
  
  // Start the API server on port 3001
  app.listen(PORT, () =&gt;
    console.log(`  ==&gt; API Server now listening on PORT ${PORT}!`)
  );
  </code></pre>
  
  <p>I also removed the reference to the default react route in /routes/index.js</p>