CODEWITHSUNDEEP
javascripturl-routing
Norbert Hüthmayr
Norbert Hüthmayr

Reputation: 525

Client-side Website Localization Using URL Path

I'm working on localizing a website that I recently built - https://xmllint.com

The project is rather small, and I mostly use it to teach myself javascript along with Webpack and other web-related technologies/frameworks.

The website is 100% browser-based and does not have a lot of content. For that reason, I decided to go with this approach to translate the content itself.

The replacement of the placeholders with the 'real' content happens via javascript that is at the bottom of the HTML. Ultimately I want to have the content ready before the page renders. Just so that that search engines can index the new pages nicely.

What I want to achieve is that the page itself detects the language code (e.g., https://xmllint.com/es/ for Spanish) from the URL and then performs the translation based on that value.

What I'm struggling with is how to handle the part of the URL in the web page itself as the directory itself does not exist on the server directly.

So far, I tried redirecting all HTTP 404 codes to the index.html file itself (on the hosting side) - As suggested for SPAs. This leads me to problems loading the resources as the relative paths now include the language code part of the URL.

Two ideas came to mind.

  1. Improve the current Webpack build so that I only deliver a single file including all assets. That way I would not have problems with relative paths and I should be good. (Is Single page application just one page using for entire web application?)
  2. Should I introduce a routing framework like Vue?

What I'm not asking for is

  1. How to parse the URL itself.
  2. For SEO reasons I also don't want to use URL parameters.
  3. Hacky ideas or workarounds. I have no time pressure and want to know how this is done best.

Any help/ideas are greatly appreciated.

Upvotes: 1

Views: 452

Answers (1)

Ronald Blüthl
Ronald Blüthl

Reputation: 351

Under the circumstances that you have no time pressure, I'd personally recommend to use a JavaScript framework - or more specifically - Vue.js. Since you already mentioned it, I assume you have basic knowledge of it.

I see various ways to benefit from choosing this path:

  • The actual problem you're facing will no longer be an issue. The application will handle all the routing, so all you have to do is return the index.html and you're good to go
  • The developer experience (build process, hot reload, deployment, ...) will dramatically improve your daily work
  • Your bundle size will very likely reduce
  • You're prepared for future growth of your application
  • Best of all: you're challenging yourself by using a technology you probably have not much experience with. Speaking for myself, that should be reason enough. :-)

Happy coding!

Upvotes: 1

Related Questions