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

/
├── 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;
    }
}

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
```
index.html
```
index.html
```
index.html
is located under
```
/en-us/
```
/en-us/
```
/en-us/
```
/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

rewrite

rewrite

rewrite or

try_files

try_files

try_files

try_files rules similar to those in my Nginx setup. So I attempted to configure a

_redirects

_redirects

_redirects

_redirects file to achieve the same result:

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

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

/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

/en-us/xxx

/en-us/xxx

/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

_redirects

_redirects

_redirects file suffice, or is there another way to accomplish this?

Many thanks.
Best, Ben

How to setup Redirects for SPA with multiple directories?

Similar Threads

Similar Threads

Similar Threads