title: Express Uncaught SyntaxError: Unexpected token <
body: <p>My <strong>webpack-dev-server</strong> works just fine but I wanted to achieve something similar with <strong>express.js</strong>. However, I'm getting an <code>Uncaught SyntaxError: Unexpected token &lt;</code> error.</p>
  
  <p>Below is my server.js:</p>
  
  <pre><code>const express = require('express');
  const webpack = require('webpack');
  const path = require('path');
  const open = require('open');
  
  const port = 3000;
  const app = express();
  
  app.get('*', function (req, res) {
    res.sendFile(path.join(__dirname, '../app/index.html'));
  });
  
  app.listen(port, function (err) {
    if (err) {
      console.log(err);
    } else {
      open(`http://localhost:${port}`);
    }
  });
  </code></pre>
  
  <p>And below is my index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Yes boy&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;&lt;/div&gt;
    &lt;script type="text/javascript" src="transformed.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Index.js code:</p>
  
  <pre><code>/* eslint-disable no-unused-vars */
  
  import React from 'react';
  const ReactDOM = require('react-dom');
  const routes = require('./routes');
  const GlobalCSS = require('./styles/main.scss');
  
  /* eslint-disable no-unused-var */
  
  ReactDOM.render(routes, document.getElementById('app'));
  </code></pre>
  
  <p>routes.js</p>
  
  <pre><code>const routes = ( // eslint-disable-line no-extra-parens
    &lt;Router history={browserHistory} onUpdate={hashLinkScroll}&gt;
      &lt;Route path="/" component={App} /&gt;
      &lt;Route path="nav" component={Nav} /&gt;
      &lt;Route path="hero" component={Hero} /&gt;
      &lt;Route path="about" component={About} /&gt;
      &lt;Route path="/" component={Contact} /&gt;
      &lt;Route path="footer" component={Footer} /&gt;
      &lt;Route path="building" component={Building} /&gt;
      &lt;Route path="*" component={NotFound} /&gt;
    &lt;/Router&gt;
  );
  
  module.exports = routes;
  </code></pre>
  
  <p>My folder structure looks like:</p>
  
  <pre><code>project
    app/
      components/
        App.js
      index.html
      index.js
      routes.js
    build/
      index.html
      transformed.js
    tools/
      server.js
    webpack.config.js
  </code></pre>
  
  <p>Let me know if you guys have any suggestions.</p>
  
  <p>Thanks!</p>