Monday, 13 March 2017

server side rendering 404 not found on all my images

I am rendering my react app on my server but I get a 404 not found when trying to retrieve images. When I try to go to the directory of my images I get a 404. Why? 404 Not found on localhost:8000/src/img this is where my images live.

server.js

app.use(express.static(path.join(__dirname, './src', '/img')));

app.get('*', (req, res) => {

  const error = () => res.status(404).send('404');
  const htmlFilePath = path.join(__dirname, './', 'index.html');
  fs.readFile(htmlFilePath, 'utf8', (err, htmlData) => {

    if(err) {
      error()
    } else {
      match({ routes, location: req.url }, (err, redirect, renderProps) => {

        if(err) {
          error()
        } else if(redirect) {
          res.redirect(302, redirect.pathname + redirect.search);
        } else if(renderProps) {
          const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
          const store = createStoreWithMiddleware(reducers);
          const RouterContext = react.createElement(reactRouter.RouterContext, renderProps);
          const provider = react.createElement(Provider, { store: store }, RouterContext);
          const ReactApp = renderToString(provider);
          const RenderedApp = htmlData.replace('', ReactApp);
          res.status(200).send(ReactApp);
        } else {
          error(); //Always enters this when trying to render images.
        }
      });
    }
  });
});



via joethemow

No comments:

Post a Comment