Serving the same Angular build with different URLs

TWISTING ANGULAR LOCALIZATION

The current i18n packages provided by Angular for that purpose serve the purpose well. In this series of articles I want to create an alternative solution for smaller scale apps.

www.site.com/en/content/details

I can think of two benefits for having the language in the URL:

But then again, Google does not document everything, I have a hunch, that it does make a difference.

Great, two benefits, in three bullet points. I hope you’re convinced. Let’s get on with it.

We need to accomplish the following:

Starting with the language middleware:

We had no issues in the browser-only app in the previous article; letting the index.html be served by the express static module, since we served a static file. Now that we are going to develop a template engine to change the index.html, we need to disable the default index for root URLs in the static middleware. So site.com/en/ should not be served by the static middleware, thus we pass index: false option:

app.use('/:lang', express.static(config.rootPath + '/client', {index: false}));

There are less direct methods, renaming index.html and changing the default file; to name a few.

The other challenge is finding a non supported language and rolling back. In the language middleware, we need to find the language first, compare it to supported languages list, if not found, return a default language. Let’s first add a list of supported languages to our config (again, this is a personal choice, that looks a bit all over the place, but for the scope, it should do).

In our language middleware:

In our routes, we need to take care of one route only, the one that decides the language. So for the index.html route, we’ll pass an array of all supported languages as a path:

The last bit is to redirect the root URL to an existing language. The best choice is to try and fetch a cookie first before defaulting to some language. Thus the cookie bit is still useful in our language middleware.

Then in the routes, the last route to add:

(This also takes care of any URLs that were not previously prefixed with language, or prefixed with a non supported language; a scenario we do not wish to dive into.)

Pretty much the same as browser only routes. We do not need to create a new engine, the template engine is already provided by Angular. Reading the documentation of the ngExpressEngine, the property that renders the HTML file is document.

Thank you for reading this far, I have been typing with a makeshift bandage around my index finger. Forgive my mizbells.

Related posts:

I used to think it was a tragedy that my faith disappeared. After years of working on religious trauma recovery, (and still working), I do not think that my faith leaving me is such a tragedy…

Spending game after game on the bench and getting 10–15 minutes on the pitch can be very frustrating when you’re trying to make the starting first team. You feel as if you’re never going to be given…

Being clear about your values, strengths and priorities is the key to creating change, whether you declare New Year’s resolutions or not. Since yesterday likely felt like the real new beginning, as…