Why does angular2-webpack-starter work with:'

Question

I am using the 'angular2-webpack-stater' project and am ready to integrate with with my back end server. I setup nginx with two proxy-passes to connect to the front-end and the back-end:

server {
    listen [::]:443 ssl;
    listen 443 ssl;
    server_name xxxxxxxxx.com;
    add_header Strict-Transport-Security "max-age=31536000; 
          includeSubdomains";
    root /var/www;
    index index.php index.html index.htm;
    autoindex off;
    rewrite_log on;

  location ^~ /server/ {
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   Host      $host;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass https://127.0.0.1:9000/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

  location ^~ /front/ {
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   Host      $host;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass https://127.0.0.1:3000/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
...
}

The back-end works as expected. And when I run the front-end with 'npm run server', the browser opens at 'localhost:3000/#/' and all works as expected.

BUT when I attempt to access the frontend with:

https://xxxxxxx.com/front/#/ 

(instead of using localhost:3000/#/) I see:

<% if (webpackConfig.htmlElements.headTags) { %> <%= webpackConfig.htmlElements.headTags %> <% } %> Loading... <% if (htmlWebpackPlugin.options.metadata.isDevServer && htmlWebpackPlugin.options.metadata.HMR !== true) { %> <% } %>

because there is an error when attempting the GET of:

https://xxxxxxx.com/webpack-dev-server.js

from the index.html file. This fails at: <script src="/webpack-dev-server.js"></script> since it cannot locate the webpack-dev-server.js file.

Why in the world is there any difference? For anyone who been down this path, your help would be greatly appreciated. I have looked high and low, and no solution has yet been found. What is magic about access through the localhost and not the host name? I have linked:

/var/www/front --> project/src or project/dist and had no luck!

This doesn't feel like it should be this hard! Clearly I don't understand how webpack and webpack-dev-server serve static files.

THANKS!!

---

Aside: For anyone attempting to solve the cors issues on the server side (the express server) I needed to add this code in my app.js file:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  next();
});

app.options("/*", function(req, res, next){
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With, x-xsrf-token');
  res.sendStatus(200);
});

This then allowed complete communication from the front-end to the back-end on a different port.

Answer 1

The front-end requires additional resources, which it requests relative to the root. You are trying to force it into a subdirectory.

Clearly the URI /webpack-dev-server.js works at //127.0.0.1:3000, but needs to be /front/webpack-dev-server.js when accessed from //example.com.

This is a very common problem, and some applications can be very stubborn about being forced into a subdirectory.

Depending on how much control you have over the application, you might consider:

1) Using path-relative URIs rather than path-absolute URIs. For example:

src="webpack-dev-server.js"

2) Configuring your application to use the correct subdirectory (which will of course break //127.0.0.1:3000 instead). For example:

src="/front/webpack-dev-server.js"

3) If this is a single purpose server, move the front-end into the root. For example:

location ^~ /server/ {
    proxy_pass https://127.0.0.1:9000/;
    ...
}
location / {
    proxy_pass https://127.0.0.1:3000;
    ...
}