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.
- Live: https://translations---qa-kqi3a5uahytim.bc.platform.sh/test-app (we use test-app just to get a different result)
- Test: https://translations---qa-kqi3a5uahytim.bc.platform.sh/olc
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
ordocument
. - 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 userequire("path/to/file")
and instead ofexport
you usemodule.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!).
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.