Deploying a React + NodeJS + Express + MySQL App to Heroku only deploying the Server Not the React

Question

As the Title States I have a React + NodeJS + Express + MySQL that we are trying to deploy to a Heroku webpage. I have it set to auto deploy every time something is pushed to the master branch of GitHub.

The issue that we are running into is it is deploying the routes for the server and displaying all of the correct information but the react app isn't displaying at all. How can I make it so that the server routes aren't showing but the react frontend is?

Attached is the code for the Server.js as well as the script that I am running to build the client.

const express = require('express')
const cors = require('cors')
const app = express()
const path = require('path');
const port = process.env.PORT || 8080;


const homeRoute = require("./routes/home");
const allReviews = require("./routes/getAllReviews");
const mostRecentReviews = require("./routes/mostRecentReview");
const postReview = require("./routes/postReview");
const editReview = require("./routes/editReview");
const updateReview = require("./routes/updateReview");
const deleteReview = require("./routes/deleteReview");
const filterReview = require("./routes/getFilterReview");
const recentReviews = require("./routes/mostRecentReview");

const locationAverageRating = require("./routes/locationAverageRating");
const allLocations = require('./routes/allLocations');

app.use(cors())

app.use('/', homeRoute);
app.use('/review', allReviews);
app.use('/locations', allLocations);
app.use('/review/recent', mostRecentReviews);
app.use('/review/post', postReview);

app.use('/review/edit', editReview);
app.use('/review/update', updateReview);
app.use('/review/delete', deleteReview);
app.use('/review/filter', filterReview);
app.use('/carrier/recent',recentReviews);

app.use('/carrier/edit', editReview);

app.use('/carrier/locations', locationAverageRating);

app.use(express.static('client/build'));
app.get('*', (req, res) =>{
    res.sendfile(path.resolve(__dirname + "./client/build/index.html"));
});

const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`Example app listening on port ${port}!`)
});

Heroku build script:

  "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

Thank you in advance for the help and if you need any other files or have any questions feel free to reach out!

quicklikerabbit · Accepted Answer · 2019-11-19 01:24:22Z

1

When using app.use the order matters. Because all of the server routes are declared before the route to the react build, the server routes will take precedence.

Consider prefixing the server routes with something that distinguishes them from requests that should be handled by your front end build (/api is a common choice).

Another option would be to specify a route for your front end (/app maybe). You could redirect certain GET requests to this route inside your homeRoute so that if someone visits your site from the root URL, they end up in the right place (assuming you don't have other GET routes that you want homeRoute to handle).

So you could change the wildcard GET route to look something like this:

app.get('/app*', (req, res) => {
  res.sendfile(path.resolve(__dirname + "./client/build/index.html"));
})

and then inside 'homeRoutes'

app.get('*', (req, res) => {
  res.redirect('/app')
})
...other homeRoutes

answered Nov 19, 2019 at 1:24

quicklikerabbit

3,6166 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

quicklikerabbit Over a year ago

This is a blog post I referred to many times when I was doing something similar about a year ago, you may also find it useful: dev.to/nburgess/…

Striker Over a year ago

Thank you, I will take a look into this solution and get back to you!

Collectives™ on Stack Overflow

Deploying a React + NodeJS + Express + MySQL App to Heroku only deploying the Server Not the React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related