React App在主js和css上给出404

Question

I built a react app using "react-scripts". The application runs perfectly on my local development server but when I deploy to my actual server the applications seems to not find the main JS and CSS files being compiled. I get 404 on both.

Following is the information that might help. The files on the server are located at

ads/build/static/js and ads/build/static/css || respectively

The 404s I am getting are on the following files:

https://www.example.com/ads/build/static/css/main.41938fe2.css https://www.example.com/ads/build/static/js/main.74995495.js

Here is how my server is configured:

const express = require('express');
const path = require('path');
const app = express();
const favicon = require('serve-favicon');

//favicon
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));

app.get('/ads', function (req, res) {
app.use(express.static(path.join(__dirname, 'build/static')));
console.log(path.join(__dirname, 'build'));
res.sendFile(path.join(__dirname, '/build/index.html'));
});

app.listen(9000);

In my package.json I have also included the homepage parameter as: "homepage" : "https://www.example.com/ads

UPDATE When I run the app on the server itself with the following path: dedicated-server-host:9000/static/js/main.74995495.js that renders the JS file correctly

Is there some configuration that I am missing, the routing doesn't seem to be working. Please advise.

Answer 1

Use some indentation so you will see error like this:

app.get('/ads', function (req, res) {
  app.use(express.static(path.join(__dirname, 'build/static')));
  console.log(path.join(__dirname, 'build'));
  res.sendFile(path.join(__dirname, '/build/index.html'));
});

You are setting the static route inside of the /ads handler, will add a new express.static route handler on every GET /ads request.

This will set the static route on server startup:

app.use(express.static(path.join(__dirname, 'build/static')));
app.get('/ads', function (req, res) {
  console.log(path.join(__dirname, 'build'));
  res.sendFile(path.join(__dirname, '/build/index.html'));
});

or:

app.get('/ads', function (req, res) {
  console.log(path.join(__dirname, 'build'));
  res.sendFile(path.join(__dirname, '/build/index.html'));
});
app.use(express.static(path.join(__dirname, 'build/static')));

But make sure that you get the path right - for example you may need:

app.use('/ads/build/static', express.static(path.join(__dirname, 'build/static')));

if you want the URL in your question to work.

To make it much simpler, you could use just this single handler to make express.static handle both the css/js and index.html at the same time:

app.use('/ads', express.static(path.join(__dirname, 'build')));

and change your index.html to use:

• https://www.example.com/ads/static/css/main.41938fe2.css
• https://www.example.com/ads/static/js/main.74995495.js

instead of:

• https://www.example.com/ads/build/static/css/main.41938fe2.css
• https://www.example.com/ads/build/static/js/main.74995495.js

Sometimes getting your paths structure right in the first place can make your route handlers much easier.