Cloudflare Developers•15mo ago

How to setup Redirects for SPA with multiple directories?

Hi there. I have recently migrated an Angular application (SPA) to Cloudflare Pages. - Project: stream-portal.pages.dev - Deployment: e177e4f8.stream-portal.pages.dev - Account ID: b68c8e0fb165972eae029b7998838ca9 The application was previously hosted using Nginx and supports multiple languages, which is why its build directory is structured as follows:

/
├── dist/
│   └── en-us
│   └── fr-ca
│   └── zh-cn

/
├── dist/
│   └── en-us
│   └── fr-ca
│   └── zh-cn

In Nginx, I had set up proxy rules to accommodate the multi-directory structure:

server {
    listen       80;
    server_name  localhost;

    if ($accept_language ~ "^$") {
        set $accept_language "en-us";
    }

    rewrite ^/$ /$accept_language permanent;

    location ~ ^/(zh-cn|fr-ca|en-us) {
        alias  /app/;
        index  index.html;
        try_files $uri /$1/index.html?$args;
    }
}

server {
    listen       80;
    server_name  localhost;

    if ($accept_language ~ "^$") {
        set $accept_language "en-us";
    }

    rewrite ^/$ /$accept_language permanent;

    location ~ ^/(zh-cn|fr-ca|en-us) {
        alias  /app/;
        index  index.html;
        try_files $uri /$1/index.html?$args;
    }
}

Everything worked well with this setup. However, after migrating to Cloudflare Pages, I have encountered some routing issues. Specifically: - Navigation to https://funds.benwk.app/en-us/ works as expected because index.html is located under /en-us/. - Direct navigation (without accessing the first one, better in an Incognito Window) to https://funds.benwk.app/en-us/auth/sign-in returns a 404 error. I understand that this is likely due to the absence of rewrite or try_files rules similar to those in my Nginx setup. So I attempted to configure a _redirects file to achieve the same result:

/en-us/*  /en-us/index.html  200

/en-us/*  /en-us/index.html  200

Although I can see this redirect rule in the Deployment details, direct navigation to any /en-us/xxx route (e.g., https://funds.benwk.app/en-us/auth/sign-in) still returns a 404 error. My question is: How should I handle route rewrite for an Angular SPA with a multi-directory structure? Can the _redirects file suffice, or is there another way to accomplish this? Many thanks. Best, Ben

2 Replies

benwkOP•15mo ago

Thank you for the clarification regarding the redirect rule. Applying /en-us/* /en-us/ 200 did solve the original routing issue; however, it has introduced a new problem. Now, the browser console reports an error:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

It appears that all .js and .css files are also being redirected to /en-us/index.html, which is causing the MIME type mismatch. This has rendered even previously working URLs non-functional. Any ideas on how to resolve this while maintaining the intended routing behavior? Yeah...got it. That makes sense for new projects, but Angular builds a lot of things in the root as default and this project has been around for several years. It puts a lot of stuff, like ngsw-worker.js right in the root as well. Tried tweaking it, but it's a pain with all the legacy code. 😩

benwkOP•15mo ago

Raised, hope it makes it clear: https://github.com/cloudflare/workers-sdk/issues/3920

GitHub

🚀 Feature Request: Add File Type Filtering to Redirects in Pages · ...

Describe the solution Background One of my projects involves migrating an Angular Single Page Application (SPA) with multiple language support to Cloudflare Pages. This necessitates a directory str...

Gaming

Programming

How to setup Redirects for SPA with multiple directories?