3

I'm trying to combine my static landing page with the express.js app (react.js single page app).

On my landing page, I set up proxy using http-proxy-middleware My server.js for the static page looks like that:

var express = require('express');
var app = express();
var path = require('path');
var proxy = require('http-proxy-middleware');

var options = {
        target: 'http://localhost:9000', // the app
        changeOrigin: true
    };
var exampleProxy = proxy(options);

app.use('/app', exampleProxy);
app.use(express.static(__dirname + '/'))

app.listen(8080);

The problem is that when I get to localhost:8080/app/ I have access to correct index.html, but I cannot fetch the resources, the bundle.js is being fetched like that: http://localhost:8080/bundle.js, but apparently it is available on localhost:9000, not 8080

How do I make it so as the app has access to its static files?

lipenco
  • 1,358
  • 5
  • 16
  • 30

1 Answers1

3

You can use the wildcard path matching of http-proxy-middleware module. You can implement the app.use without passing the path parameter.

app.use(proxy('/*.js', exampleProxy));
app.use(proxy('/api', exampleProxy));

This will serve your ".js" file through port 9000. Similarly, you can serve other assets as well by using this wildcard matching.

amanpurohit
  • 1,246
  • 11
  • 19
  • Thank you, is there any magic trick for taking care of the routes? it says `Location "/app/template/vintage" did not match any routes` because only `/template/vintage` exists on the single page. – lipenco Nov 13 '17 at 21:41
  • You can use the pathRewrite property in proxy options. You can then rewrite any path that you want. pathRewrite: {'^/api/remove/path' : '/path'} – amanpurohit Nov 14 '17 at 09:19