CODEWITHSUNDEEP
node.jsreactjsexpressroutesreact-scripts
Arihant
Arihant

Reputation: 4047

React App giving 404 on main js and css

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.

Upvotes: 3

Views: 5330

Answers (1)

rsp
rsp

Reputation: 111268

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:

instead of:

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

Upvotes: 2

Related Questions