title: Express static css not served
body: <p>I have been trying to figure this out for hours and my head is about to explode. I really hope it's not some stupid little detail I missed...</p>
  
  <p>I have a server-side rendering react application set-up. Everything is going fine. The only problem I have is that I can't seem to get the css to load. </p>
  
  <p>Here is my file tree (without node_modules): <a href="https://i.stack.imgur.com/xevUb.png" rel="nofollow noreferrer">https://i.stack.imgur.com/xevUb.png</a>'</p>
  
  <p>I have the following code in my server.js file </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>app.use('static', express.static(__dirname + '/public'));
  app.use('dist', express.static(__dirname + '/dist'));
  
  app.get('*', (req, res) =&gt; {
        match({
            routes,
            location: req.url
          }, (error, redirectLocation, renderProps) =&gt; {
            if (error) {
              res.status(500).send(error.message)
            } else if (redirectLocation) {
              res.redirect(302, redirectLocation.pathname + redirectLocation.search)
            } else if (renderProps) {
              var html = renderToString( &lt; RouterContext { ...renderProps
                }
                /&gt;);
                res.status(200).send(template({
                  body: html
                }));
              }
              else {
                res.status(400).send('Not found.')
              }
            });
        });</code></pre>
  </div>
  </div>
  </p>
  
  <p>And this is my template.js file :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default ({ body }) =&gt; {
    return `
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;title&gt;test&lt;/title&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /&gt;
          &lt;link rel="stylesheet" href="/static/css/style.css" /&gt;
        &lt;/head&gt;
  
        &lt;body&gt;
          &lt;div id="root"&gt;${body}&lt;/div&gt;
        &lt;/body&gt;
  
        &lt;script src="dist/client.js"&gt;&lt;/script&gt;
      &lt;/html&gt;
    `;
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I go on my local server. I get the html delivered and the bootstrap styles are applied to it. However, I get a 400 bad request error for the style.css and client.js linked in my template.js file.</p>
  
  <p>I really hope someone can help me out on this one...</p>
  
  <p><strong><em>EDIT</em></strong></p>
  
  <p>Here is what I see on the developer console :
  <a href="https://i.stack.imgur.com/rnfwd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rnfwd.png" alt="Developer console screenshot"></a></p>