1

I've built a react/webpack app with a public directory dist that contains index.html and bundle.js. index.html links to the bundle with <script src="./bundle.js /> and I want to serve index.html up for all routes (as react-router handles the routing). However for /demos/:name, when name has a value I want to send a static file. For example, while /demos renderings as react component (the server sends index.html), /demos/one would be interpreted by my server as requesting /demos/one.html from the server. So far I've attempted that like this:

var express = require('express');
var app = express();

app.get("demos", (req,res) => {
    res.sendFile(__dirname + "/dist/index.html")
})

app.get("demos/:name", (req,res) => {
    const { name } = req.params
    res.sendFile(__dirname + `./demos/${name}.html`);

})

app.use("*", express.static('dist'));

var server = app.listen(8080, function () {
   var {host, port} = server.address()
   console.log(`listening at http://${host}:${port}`)
})

However, I keep getting Uncaught SyntaxError: Unexpected token < in the browser console.

Alex Bollbach
  • 4,370
  • 9
  • 32
  • 80

1 Answers1

0
app.get("demos/:name", (req,res) => {
  const { name } = req.params
  res.sendFile(__dirname + `./demos/${name}.html`);
})
app.get("*", (req,res) => {
  res.sendFile(__dirname + "/dist/index.html")
})
Koray Gocmen
  • 674
  • 6
  • 18