Express server not loading js and css

Question

So whats happening is I have a reactjs project that has react router. So when I try and hit /dashboard/stream it's getting the index.html off the server but then the css and js are getting 301 errors and it's not displaying anything.

express server

const express = require('express');
const {
  createServer
} = require('http');
const io = require('socket.io');
const haiku = require('./haiku');

const app = express();
const server = createServer(app);
const userIds = {};
const noop = () => {};

app.use('/*', express.static(`${process.cwd()}/../client`));

/**
 * Random ID until the ID is not in use
 */
function randomID(callback) {
  const id = haiku();
  if (id in userIds) setTimeout(() => haiku(callback), 5);
  else callback(id);
}

/**
 * Send data to friend
 */
function sendTo(to, done, fail) {
  const receiver = userIds[to];
  if (receiver) {
    const next = typeof done === 'function' ? done : noop;
    next(receiver);
  } else {
    const next = typeof fail === 'function' ? fail : noop;
    next();
  }
}

/**
 * Initialize when a connection is made
 * @param {SocketIO.Socket} socket
 */
function initSocket(socket) {
  let id;
  socket
    .on('init', () => {
      randomID((_id) => {
        id = _id;
        userIds[id] = socket;
        socket.emit('init', {
          id
        });
      });
    })
    .on('request', (data) => {
      sendTo(data.to, to => to.emit('request', {
        from: id
      }));
    })
    .on('call', (data) => {
      sendTo(
        data.to,
        to => to.emit('call', { ...data,
          from: id
        }),
        () => socket.emit('failed')
      );
    })
    .on('end', (data) => {
      sendTo(data.to, to => to.emit('end'));
    })
    .on('disconnect', () => {
      delete userIds[id];
      console.log(id, 'disconnected');
    });

  return socket;
}

module.exports.run = (config) => {
  server.listen(config.PORT);
  console.log(`Server is listening at :${config.PORT}`);
  io.listen(server, {
      log: true
    })
    .on('connection', initSocket);
};

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <link href="/dist/css/app.min.css" rel="stylesheet">
</head>

<body>
  <div id="root"></div>
  <script type="text/javascript" src="/dist/js/app.min.js"></script>
</body>

</html>

how come my index.html is loaded but then the js and css isnt.

folder structure is this:

server ... client dist css js index.html ...

To me I can't see if it's loading that index.html file how it can't load the css and js that are linked to it.

it is not about express , express does not handle Frontend , be sure that path is true , open "view page source" and click on css and js files , check that , it is 404 or not , also you can test this path : "./dist/js/app.min.js" — Nima habibkhoda
– Nima habibkhoda, Commented Aug 7, 2018 at 13:44
@peetya yes dist is in the client folder as that is where webpack builds it — Andy Wilson
– Andy Wilson, Commented Aug 7, 2018 at 13:46
Check the Network tab in the chrome developer tools that what is the route of the static files and copy them here please. — peetya
– peetya, Commented Aug 7, 2018 at 13:55

peetya · Accepted Answer · 2018-08-07 14:02:16Z

2

The problem is that you are using absolute path for the static files because they start with a / so if the url is /dashboard/stream then it will tries to load the css and js file from /dashboard/dist/....

To fix it remove the / from the beginning of the path to have a relative path.

<link href="dist/css/app.min.css" rel="stylesheet">

and

<script type="text/javascript" src="dist/js/app.min.js"></script>

answered Aug 7, 2018 at 14:02

peetya

3,6282 gold badges18 silver badges30 bronze badges

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

3 Comments

Andy Wilson Over a year ago

it needs to load them from localhost:5000/dist/js/app.min.js as localhost:5000/dashboard/stream is a js route not a physical route

peetya Over a year ago

are you using react-router for the routing, or something on the backend?

Andy Wilson Over a year ago

react router for routing on the frontend nothing on the backend

B_CooperA · Accepted Answer · 2018-08-07 14:33:01Z

0

This does the trick with Angular so why not with React considering that you are using front-end routing:

Use an absolute path in your server.js file:

app.use('/public', express.static(path.join(__dirname, '../client/dist')));
Serve your front-end routes in your server.js file:

app.get('*', function(req, res, next) { res.sendFile("../client/index.html", { root: __dirname }); });

Now you should be able to access all the files inside the dist directory.

f.e: <script type="text/javascript" src="./public/js/app.min.js"></script>

answered Aug 7, 2018 at 14:33

B_CooperA

6591 gold badge10 silver badges31 bronze badges

Collectives™ on Stack Overflow

Express server not loading js and css

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related