Skip to content

Instantly share code, notes, and snippets.

@robinedman
Last active May 26, 2017 09:45
Show Gist options
  • Save robinedman/34142289f3c1e47333fed42809c52c20 to your computer and use it in GitHub Desktop.
Save robinedman/34142289f3c1e47333fed42809c52c20 to your computer and use it in GitHub Desktop.

In the "reduce page weight" story we changed so that we only load moment locales for countries that we've deployed the OLC to. We accomplished this with some Webpack trickery and reading the names of the locales in the translations/ folder.

With SOLAS-5735 we've moved the translations to the API, so this folder no longer exists. We insead get the list of locales from a new translations API endpoint which we created.

So far so good. The issue is that we've hardcoded the translations API URL. This will have to be different depending on if we build for test or for deploying to production.

We haven't deployed the Translations REST API to live yet so let's fake the URL for now.

The hardcoded code is in scripts/fetchMomentLocales.js. This script runs in node not in the browser! That means it's JavaScript just like normal but with a couple of differences.

  • Browser APIs (DOM API etc) are not available. So there is no window or document.
  • There are however other APIs available which makes it possible to for example access the filesystem on the computer. You won't have to do anything complicated here but see Node.js documentation if interested. For this, all you should need is process.env.NODE_ENV which is part of a Node .
  • Importing and exporting is a little bit different. instead of import you use require("path/to/file") and instead of export you use module.exports. You can Google for more info.

To know whether the npm start or npm run build script is running in production you can check process.env.NODE_ENV. I recommend putting all the code in scripts/fetchMomentLocales.js, at least to start with (make it work, then make it pretty!).

To sum up:

If we're running in...

  • test – connect to the Test endpoint.
  • production – connect to the Production endpoint.

Write the code in fetchMomentLocales.js. Have a look at process.env.NODE_ENV.

To test, run the scripts npm start and npm run build and inspect the results. You might be able to use console.log or the bundle analyzer that we used in the reduce page weight story to check what moment locales actually made it into the bundle file. Or you might be able to set debug: true for moment and check the browser console. Try things out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment