Language Redirect + Fallback to index.html (Cloudflare Worker + Angular i18n)
Budget: $30 – $250 USD
OUR PROJECT SETUP:
- Angular 12, can be found on Whydonate.net
- The UI is hosted on Cloudflare Pages (https://pages.cloudflare.com/)
- Language setup is done with i18n for Angular (https://angular.io/guide/i18n-common-deploy)
- Whydonate.net domain is handled by Cloudflare. Therefore, we can use Cloudflare workers for any language detection and redirects.
TO DO
LANGUAGE REDIRECT LOGIC
1. If the user visits our domain without a language extension. For example / or /fundraising/,
redirect the user to /$lang/ based on the following:
1a. First, check if we already saved the preferred language of the user in a cookie. If not, use the Accept-Language header. We have the following languages available for the user: NL, EN, DE, FR, ES. If non of the languages is found redirect to /nl/ (FIX WITH CLOUDFLARE WORKER)
1b. Save the language preference in a cookie. (FIX WITH ANGULAR PROJECT)
1c. Update the cookie when the language switcher is used to change the language. (FIX WITH ANGULAR PROJECT)
- Cloudflare Worker documentation: https://developers.cloudflare.com/workers/tutorials/localize-a-website
- NPM package: https://github.com/opentable/accept-language-parser
- Similar NGINX problem with a solution: https://constructors.nl/en/blog/2014/07/30/accept-language-redirects-with-nginx-and-lua/
FALLBACK TO INDEX.HTML
2a. The second issue that needs to be resolved is the Server Configuration to Fallback to the index.html file when a direct request is made to a "deep link" (for example https://whydonate.nl/en/search/). Because we use i18n setup with multiple subdirectories, this is currently not working. If you go to https://whydonate.nl/en/search/, it won't work. But if you go to https://whydonate.nl/ and then click on Search, you will see it does work. (FIX WITH CLOUDFLARE WORKER)
2b. After completing the work, we will have a knowledge transfer session with our development team. You will also need to write some documentation on what you exactly have done.
We can give you access to the repository, but not to our Cloudflare account. You would need to setup your own test environment.
- Angular 12, can be found on Whydonate.net
- The UI is hosted on Cloudflare Pages (https://pages.cloudflare.com/)
- Language setup is done with i18n for Angular (https://angular.io/guide/i18n-common-deploy)
- Whydonate.net domain is handled by Cloudflare. Therefore, we can use Cloudflare workers for any language detection and redirects.
TO DO
LANGUAGE REDIRECT LOGIC
1. If the user visits our domain without a language extension. For example / or /fundraising/,
redirect the user to /$lang/ based on the following:
1a. First, check if we already saved the preferred language of the user in a cookie. If not, use the Accept-Language header. We have the following languages available for the user: NL, EN, DE, FR, ES. If non of the languages is found redirect to /nl/ (FIX WITH CLOUDFLARE WORKER)
1b. Save the language preference in a cookie. (FIX WITH ANGULAR PROJECT)
1c. Update the cookie when the language switcher is used to change the language. (FIX WITH ANGULAR PROJECT)
- Cloudflare Worker documentation: https://developers.cloudflare.com/workers/tutorials/localize-a-website
- NPM package: https://github.com/opentable/accept-language-parser
- Similar NGINX problem with a solution: https://constructors.nl/en/blog/2014/07/30/accept-language-redirects-with-nginx-and-lua/
FALLBACK TO INDEX.HTML
2a. The second issue that needs to be resolved is the Server Configuration to Fallback to the index.html file when a direct request is made to a "deep link" (for example https://whydonate.nl/en/search/). Because we use i18n setup with multiple subdirectories, this is currently not working. If you go to https://whydonate.nl/en/search/, it won't work. But if you go to https://whydonate.nl/ and then click on Search, you will see it does work. (FIX WITH CLOUDFLARE WORKER)
2b. After completing the work, we will have a knowledge transfer session with our development team. You will also need to write some documentation on what you exactly have done.
We can give you access to the repository, but not to our Cloudflare account. You would need to setup your own test environment.