Webpack config in dev and prod include copywebpack for static transla…

[oruburos]

This PR copies the translations in dist/static as suggested in
#1478 (comment)

Fixes #1478

I have verified that this pull request:

• has no linting errors (npm run lint)
• is from a uniquely-named feature branch and has been rebased on top of the latest master. (If I was asked to make more changes, I have made sure to rebase onto master then too)
• is descriptively named and links to an issue number, i.e. Fixes #1478

[andrewn]

Almost there, but the way that the server exposes the copied translations to the client needs to be updated.

[andrewn]

I think this should stay as '/translations/{{lng}}/translations.json', but the static file config in server/server.js needs to change...

[andrewn]

The path needs to point to the location of the copied translations...

app.use('/translations', Express.static(path.resolve(__dirname, '../dist/static/translations'));

[catarak]

@andrewn given your suggested fix here, I think this line may be unnecessary, given L79, which serves everything in /dist/static to /, which I think would include subfolders. Definitely double check and test this though!

[andrewn]

@catarak, you're right that L79 will serve /dist/static/translations but it will sent with a max-age of 1 day. Everything bundled by WebPack uses the file's content hash in the filename (e.g. app.c41b13c86f9f5577f9cc.js). The browser can cache this for a long time (in principle, forever) since it'll never change. If the bundle's updated, it has a new filename and the browser fetches the file at the new URL.

For now, we're not versioning the translations assets using a content hash in the filename so we should serve them from /dist/static/translations but with a different cache strategy. Using an E-Tag with no max-age means that the browser can make a quick conditional GET request to check if the file's been updated. If it hasn't been updated, no data is received but if it has, it will be sent the latest file.

In future we should probably use the same content-hash-in-filename strategy for these files too, but it's a bit more complex so this is a fix in the short-term that gets staging working again.

@oruburos this line (L78) needs to be:

app.use(
  '/locales',
  Express.static(
    path.resolve(__dirname, '../dist/static/locales'),
    {
      // Browsers must revalidate for changes to the locale files
      // It doesn't actually mean "don't cache this file"
      // See: https://jakearchibald.com/2016/caching-best-practices/
      setHeaders: res => res.setHeader('Cache-Control', 'no-cache')
    }
  )
);

[catarak]

This looks good to me! Thanks for working on this ✨