Refresh throws 404 when using @nrwl/web:file-server

[reamerNC]

Current Behavior

When using @nrwl/web:file-server I get a 404 on browser refresh for any route other than the root. This does not happen when using @angular-devkit/build-angular:dev-server

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "test-app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "test-app:build:production"
            }
          }
        },
        "serve-nx": {
          "builder": "@nrwl/web:file-server",
          "options": {
            "buildTarget": "test-app:build",
            "browserTarget": "test-app:build",
            "withDeps": true,
            "parallel": true
          },
          "configurations": {
            "production": {
              "buildTarget": "test-app:build:production",
              "browserTarget": "test-app:build:production"
            }
          }
        },

[ronnetzer]

as a workaround you can add "proxyUrl": "http://localhost:4200?" to redirect all 404 back to index.html (source)

"serve-nx": {
          "builder": "@nrwl/web:file-server",
          "options": {
            "buildTarget": "test-app:build",
            "browserTarget": "test-app:build",
            "proxyUrl": "http://localhost:4200?", // <--
            "withDeps": true,
            "parallel": true
          },
          "configurations": {
            "production": {
              "buildTarget": "test-app:build:production",
              "browserTarget": "test-app:build:production"
            }
          }
        },

[Maximaximum]

This is quite an annoying bug. One of the main reasons that made me decide to migrate to Nx was to speed up the builds. Unfortunately, computational caching is not enabled by default, so I had to spend almost a day to find out how to turn it on.

And now I realize that the feature is completely unusable due to this bug.

I hope this will be fixed sooner than the majority of bugs at angular :)

[zdegner]

This is a major blocker for us as well. We use routes other than "/", passing in contextual parameters even in the primary application routes. We are still able to use Nx's incremental compilation for builds, but we cannot use it when serving the application during local development.

[workcomped]

Another vote here to see this improved.

For the time being, I went a crude route and wrote a Node script to run a proxy server that handles this situation and consumes the standard Angular proxy config. An extra step but gives us incremental serve without this issue.

[yannickglt]

Unfortunately, the solution suggested by @ronnetzer does not work while working with HTTPs (due to an http-server issue). I hope this is something that can be handled at file-server level.

[reamerNC]

Another vote here to see this improved.

For the time being, I went a crude route and wrote a Node script to run a proxy server that handles this situation and consumes the standard Angular proxy config. An extra step but gives us incremental serve without this issue.

@workcomped - can you provide any additional details on how you implemented your workaround?

[workcomped]

@reamerNC,

In my particular case, I needed to proxy to specific calls to a backend server as shown here

I made my own proxy server and pass that as the proxyUrl parameter. If my proxy JSON matches the request URL, we'll redirect to that; otherwise, I redirect to "localhost:4200?" as outlined earlier in the thread. I should note I wrote this quite quickly as I was on a time crunch and only needed a functional proof of concept, but I didn't see another immediate way to address our specific case. Since http-server doesn't have the proxying power of weback dev-server (only a single param for a proxy url), I imagine you could build something similar into the file-server executor as it seems you are otherwise limited to the current features of http-server

Note: this was not made to work with SSL and we've since moved away from @nrwl/web:file-server for the time being due to issue 5324

// sloppy proxy
const http = require('http');
const httpProxy = require('http-proxy');
const fs = require('fs');
const path = require('path');

const proxyConfigPath = path.resolve(__dirname, process.argv[2] || 'proxy.conf.json');
let proxyConfig = JSON.parse(fs.readFileSync(proxyConfigPath));

proxyConfig = Object.keys(proxyConfig).map(key => [new RegExp(key), proxyConfig[key]]);

// for now, hard-coding this
const defaultTarget = 'http://localhost:4200?';


const proxy = httpProxy.createProxyServer({});
const server = http.createServer((req, res) => {
    console.log(req.url);
    const targetInfo = proxyConfig.find( config => config[0].test(req.url));
    proxy.web(req, res, { target: targetInfo ? targetInfo[1].target : defaultTarget });
});

// port also hardcoded
server.listen(4201);
console.log(`Proxy server started using ${proxyConfigPath}`);

[reamerNC]

@workcomped - thanks a lot! that was helpful.

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[Maximaximum]

I believe this issue should not be closed unless it's fixed. Everyone is just using a workaround, as far as I understand

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.