Browser refresh at any part of the website, with exception of the main page, causes GitHub 404.

[Gabriel Medeiros]

1. Go to angular.realworld.io
2. Click on Settings
3. Refresh. You get GitHub's 404 and this on the console:
   GET http://angular.realworld.io/editor 404 (Not Found)

I have the same issue in my project, no idea how to fix.

[Spiridon Kalamaris]

can i work on this issue?

[Gerome Grignon]

Hello, the issue has been fixed on the new domain used: angular.realworld.how
It includes adding a redirect configuration to the project.

[Shaiquie Zieye]

@geromegrignon care to elaborate how to fix this issue in my self-hosted instance? I'm trying to serve the directory generated by npm run build. I made sure that every requests causing 404 serve the index instead. But I get:

Error: Cannot match any routes. URL Segment: xxx

When I reload /article/xxx.

[Gerome Grignon]

Hi @shaiquie-zieye, how are you serving the directory generated by npm run build?

[Shaiquie Zieye]

Thanks for the quick response! Like this:

#!/usr/bin/env python3

import http.server
import socketserver
import os


class Handler(http.server.SimpleHTTPRequestHandler):
    def do_GET(self):
        path = self.translate_path(self.path)

        if not os.path.exists(path):
            self.path = '/'

        super().do_GET()


# start the server in the background
if os.fork() == 0:
    os.chdir('/path/to/frontend/')

    socketserver.TCPServer.allow_reuse_address = True
    with socketserver.TCPServer(('localhost', 80), Handler) as httpd:
        httpd.serve_forever()

Yes I know, there are better solutions (NGINX, Apache, etc.) but my current environment requires that. But as you can see, I'm just serving / whenever the URL's path is not found ion disk, apart from that it just serves files normally.

[Gerome Grignon]

I'm unfamiliar with python.

Angular is building the application as a SPA (Single Page Application).
Depending on the server, it usually requires some customization, like I had to do with Netlify for this issue.
Without that, the error usually happens on reload.

Google or ChatGPT might help you find the proper solution with Angular.

[Shaiquie Zieye]

I see, can you please then just outline what was your fix for this issue? I can work out the implementation, apparently just serving index.html for all the paths that are not files is not enough.

[Shaiquie Zieye]

OK so the issue was that npm run build ran ng build --base-href ., using / fixed the issue. I'm using an old fork of this repo. Thanks for your time and support.