CODEWITHSUNDEEP
javascriptreactjsexpress
Andy Wilson
Andy Wilson

Reputation: 121

Express server not loading js and css

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.

Upvotes: 0

Views: 2260

Answers (2)

B_CooperA
B_CooperA

Reputation: 659

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

  1. Use an absolute path in your server.js file:

    app.use('/public', express.static(path.join(__dirname, '../client/dist')));

  2. 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>

Upvotes: 0

peetya
peetya

Reputation: 3628

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>

Upvotes: 2

Related Questions