Heroku url routes can only be reached programmatically

Question

Sorry if this question is vague but I really don't know what code to present.

I have a Heroku webpage which is running fine. I am using reach-router to navigate from one page to another on button clicks: <button onClick={() => navigate('/intro')}>Click</button>. When I do this the url changes appropriately and my content is visible. However if I type in the exact same url I get an error saying Cannot GET /intro. This error even happens if I use the button click to navigate and then reload the page.

It's my understanding that app.use(express.static('build')); will serve my static files.

So why can I visit pages if I start at my root url and navigate from there but I can't enter a url and travel to that page?

The website is live here https://build-a-wedding.herokuapp.com/

Adding more details on my server.js

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const cors = require('cors');
const sessionMiddleware = require('./modules/session-middleware');
require('dotenv').config();

const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(sessionMiddleware);

app.use(cors());

// Serve static files
app.use(express.static('build'));
app.use(express.static(path.resolve(__dirname, '..', 'build')));

const users = require('./routes/users.router');
const dataFetch = require('./routes/data.router');
const venues = require('./routes/venues.router');

app.use('/users', users);
app.use('/location', dataFetch);
// app.use('/', auth);
app.use('/venues', venues);

const PORT = process.env.PORT || 3001;

app.listen(PORT, () => {
  console.log(`Listening on port: ${PORT}`);
});

When I navigate programmatically here is what i see for my sources

When I type in the same URL here is the source tree

Means server not configured for the virtual directories. Have you used any heroku buildpacks? Is your react app based on create-react-app? If it is installing buildpack for it should fix issue — charlietfl, Sep 13 '20 at 22:28
@charlietfl I used npx create-react-app. I don't think I am using any buildpacks. How do I install those? — tdammon, Sep 13 '20 at 22:36
For prior to deploy : https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack . You can also install after deploy, I think from dashboard but has been a long time so read buildpack docs — charlietfl, Sep 13 '20 at 22:39
I did it from the CLI. I have initiate Heroku Apps from the Dashboard before and never ran into this issue. — tdammon, Sep 13 '20 at 23:11
At least was easy fix. Things like that can be frustrating when not sure what to do and have to spend hours researching — charlietfl, Sep 13 '20 at 23:13
Now that I look at this more I don't think it will work for me because I need a Node server for my database connection. — tdammon, Sep 14 '20 at 00:50
So should be able to configure express or other framework to server create-react-app and serve as api — charlietfl, Sep 14 '20 at 00:53
@charlietfl I have app.use(express.static('build'). shouldn't this serve my static files? — tdammon, Sep 14 '20 at 01:15
Does this answer your question? [React Routing works in local machine but not Heroku](https://stackoverflow.com/questions/41772411/react-routing-works-in-local-machine-but-not-heroku) — Alvaro, Dec 14 '20 at 23:08

Alvaro · Answer 1 · 2020-12-04T17:39:17.527

0

Just create a static.json file at the root of your React project with the following content:

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

This question is possibly duplicated

edited Dec 04 '20 at 17:39

answered Dec 04 '20 at 17:35

Alvaro

1,853
18
24

I have that already. Is it not being referenced properly? – tdammon Dec 04 '20 at 17:36
Is it at the same level of `package.json` file and pushed to heroku? – Alvaro Dec 04 '20 at 17:38
It is at the same level as `package.json`, I am assuming it is pushed to heroku since it isn't in my `.gitignore` – tdammon Dec 04 '20 at 17:40
I am using `@reach/router` for my front end navigation. I'm not sure if that could be the issue? – tdammon Dec 04 '20 at 17:43

score -1 · Answer 2 · answered Sep 14 '20 at 01:06

-1

Make sure that your express app are listening to these routes and sending response to them. Example:

app.get('/intro', function (req, res) {
  res.send(pathToPage);
});

answered Sep 14 '20 at 01:06

Yaser

103
6

I can try this. Shouldn't app.use(express.static('build')) handle this? Also what is the pathToPage in this example? – tdammon Sep 14 '20 at 01:09
This has nothing to do with client side routing – charlietfl Sep 14 '20 at 01:13
Alright, so instead of navigating to '/intro' try navigating to 'intro.html' I think this is the final solution :). – Yaser Sep 14 '20 at 01:14

Heroku url routes can only be reached programmatically

2 Answers2