feat(webpack): render for each locale (#26)

README.md

@@ -248,6 +248,39 @@ module.exports = {
 }
 ```
 
+### Locales
+
+Often we render multiple versions of our application for different locations, eg. Australia & New Zealand. To render an HTML file for each location you can use the locales option in `sku.config.js`. Locales are preferable to [monorepos](#monorepo-support) when you need to render multiple versions of your HTML file but only need one version of each of the assets (JS, CSS, images, etc). Note: You can use `locales` inside a monorepo project.
+
+The `locales` option accepts an array of strings representing each locale you want to render HTML files for.
+
+```js
+module.exports = {
+  locales: ['AU', 'NZ']
+}
+```
+
+For each locale, sku will call your `render.js` function and pass it the locale as a parameter.
+
+```js
+const render = ({ locale }) => (
+  `<div>Rendered for ${locale}</div>`
+)
+```
+
+The name of the HTML file that is generated will be suffixed by `-{locale}`.
+
+eg.
+```js
+module.exports = {
+  locales: ['AU', 'NZ']
+}
+```
+
+will create `index-AU.html` & `index-NZ.html`.
+
+Note: When running the app in dev mode only one HTML file will be created, defaulting to the first listed locale.
+
 ### Monorepo Support
 
 If you need to build multiple projects in the same repo, you can provide an array of config objects.

config/builds.js

@@ -37,6 +37,7 @@ const builds = buildConfigs
     const name = buildConfig.name || '';
     const env = buildConfig.env || {};
     const entry = buildConfig.entry || {};
+    const locales = buildConfig.locales || [''];
 
     const paths = {
       seekStyleGuide: path.join(cwd, 'node_modules/seek-style-guide'),
@@ -49,7 +50,8 @@ const builds = buildConfigs
     return {
       name,
       env,
-      paths
+      paths,
+      locales
     };
   });
 

config/webpack/webpack.config.js

@@ -94,7 +94,7 @@ const svgLoaders = [
   }
 ];
 
-const buildWebpackConfigs = builds.map(({ name, paths, env }) => {
+const buildWebpackConfigs = builds.map(({ name, paths, env, locales }) => {
   const envVars = lodash
     .chain(env)
     .mapValues((value, key) => {
@@ -222,7 +222,17 @@ const buildWebpackConfigs = builds.map(({ name, paths, env }) => {
       },
       plugins: [
         new webpack.DefinePlugin(envVars),
-        new StaticSiteGeneratorPlugin()
+        ...locales.slice(0, isProductionBuild ? locales.length : 1).map(
+          locale =>
+            new StaticSiteGeneratorPlugin({
+              locals: {
+                locale
+              },
+              paths: `index${isProductionBuild && locale
+                ? `-${locale}`
+                : ''}.html`
+            })
+        )
       ]
     }
   ];