Categories
Mastering Development

My react app on heroku opens home page but will not open other pages

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.

Here is my server-side package.json file:

{
  "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 && 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 && npm run start",
    "build": "cd client && npm run build",
    "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build",
    "seed": "node ./seeders/seed.js",
    "install": "cd client && 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"
}

Here’s the client-side package.json:

{
  "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": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

server.js

// load npm package express, primarily for the router
const express = require("express");
// import npm package mongoose, the ODM for mongo database
const mongoose = require("mongoose");
// set the /routes folder as default for any route declarations (defaults to index.js)
const routes = require("./routes");
// declare variable app to hold express methods
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"));
}

// Add routes, both API and HTML.  Defaults to /routes/index.js
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,
  }
);


// Start the API server on port 3001
app.listen(PORT, () =>
  console.log(`🌎  ==> API Server now listening on PORT ${PORT}!`)
);

Based on some research, I added a static.json file:

{
  "root": "build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

There is a default route in routes/index.js on the server side:

....
router.use("*", (req, res) =>
  res.sendFile(path.join(__dirname, "../client/src/index.html"))
);

module.exports = router;

In App.js (react top component), react router is used like this:

...
     <Router>
        <Switch>
          <DevDataContext.Provider value={devDataProvider}>
            <SetupContext.Provider value={setupProvider}>
              {setup.initialized ? (
                <Route exact path="/" component={Home} />
              ) : (
                  <Route exact path="/" component={Signin} />
                )}
              <Route exact path="/contact" component={Contact} />
              <Route exact path="/about" component={About} />
              <Route exact path="/Developer" component={Developer} />
              <Route exact path="/Signin" component={Signin} />
            </SetupContext.Provider>
          </DevDataContext.Provider>
          <Route component={NoMatch} />
        </Switch>
      </Router>
   ...

With all that, I’m at a standstill. The home page loads and refreshes, but won’t redirect anywhere.

Leave a Reply

Your email address will not be published. Required fields are marked *