feat(vue): Add VUE_APP_CURRENT_WEBSITE env on client side

Author: Romakita

docs/packages/vue-cli.md

@@ -28,6 +28,37 @@ Then install `@node-sitecore/cli-plugin-vue` with npm or yarn:
 $ npm install @node-sitecore/cli-plugin-vue
 ```
 
+## Cli
+
+This package add a new command:
+
+```bash
+Usage: nsc vue <build|check> [options]
+
+Options:
+
+  -V, --version            output the version number
+  --configPath <path>      Path to .nscrc file
+  --currentWebsite <code>  Default current website to compile source
+  -p, --pattern <cmd>      Glob pattern to list project
+  -l, --list <cmd>         Website code list (EU,FR,etc)
+  -e, --exclude <cmd>      Exclude Website code list (Common,etc)
+  -h, --help               output usage information
+
+Example:
+  nsc vue build                  // build only the default currentWebsite
+  nsc vue build --list EU,FR
+  nsc vue build --pattern "scr/Project/*" --exclude Hotfix,Common
+  nsc check                      // Check if entries exists for a given currentWebsite
+```
+
+Build command is a shortcut to compile multiple Sitecore Projects. It's an equivalent of:
+
+```bash
+vue-cli-service build --currentWebsite EU --production
+vue-cli-service build --currentWebsite FR --production
+```
+
 ## Configuration
 
 Now, edit the `vue.config.js` and copy this configuration:
@@ -79,7 +110,7 @@ const vueConfig = {
       /manifest\.json$/
     ],
     workboxOptions: {
-      swDest: '../../service-worker.js',
+      swDest: `../../service-worker.${config.currentWebsite}.js`,
       runtimeCaching: []
     }
   },
@@ -208,11 +239,177 @@ Finally, edit your `.nscrc` file and add Vue-cli configuration:
 
 > A project example is available on this repository [https://github.com/NodeSitecore/sitecore-vue-boilerplate](https://github.com/NodeSitecore/sitecore-vue-boilerplate).
 
+### Options
+
+- `scssMixinsPath`: Add the scss file which include all of your mixins/variables should be shared with Vue Component.
+- `outputDir`: Output directory where the source will be compiled.
+- `baseUrl`: Set the base url for the different profile.
+- `entries`: Configure the bundle compilation strategies (See Define entries section).
+- `alias`: Set alias list for webpack (See Define alias section).
+
 ## Getters
 
 ## Configuration fields
 
 Key | Default value | Tags | Description
 --- | --- | --- | ---
 vueCli | `{...}` | Vue-cli, Vue | Return the configuration dedicated to Vue-cli.
+entries | `[...]` | Vue-cli, Vue | Entries list which will be compilied by webpack
+
+
+## Define entries
+
+VueCli configuration accept multiple entries files. Webpack will create different bundles according to your configuration.
+Also, each entry can be configured by environment profile (production or development).
+
+Here three possible scenario (production, development and all profile):
+```json
+{
+  "vueCli": {
+    "entries": [
+      {
+        "mode": "production",
+        "name": "bundle",
+        "paths": [
+          "<projectDir>/<currentWebsite>/code/Scripts/polyfills.js",
+          "<projectDir>/<currentWebsite>/code/Scripts/entry.production.js"
+        ]
+      },
+      {
+        "mode": "development",
+        "name": "bundle",
+        "paths": [
+          "<projectDir>/<currentWebsite>/code/Scripts/polyfills.js",
+          "<projectDir>/<currentWebsite>/code/Scripts/entry.development.js"
+        ]
+      },
+      {
+        "name": "admin",
+        "extractVendors": false,
+        "paths": [
+          "<projectDir>/<currentWebsite>/code/Scripts/admin.entry.js"
+        ]
+      }
+   ]
+  }
+}
+```
+
+> This example generate two bundles `bundle.js` and `admin.js` but `bundle.js`.
+
+Entry options:
+
+- `mode`: NODE_ENV profile. Indicates for which profile the bundle should be generated
+- `name`: Bundle name generated by webpack
+- `extractVendors`: Compile NPM module in a separated file (`vendors.bundle.js`). By default `true`.
+- `paths`: List of files you want to compile for the bundle.
+
+
+## Define new alias
+
+Webpack provide a alias mechanism to facilitate javascript module import.
+By default, this package provide these following alias:
+
+```
+{
+  "vueCli": {
+    "alias": {
+      "@Foundation": "<foundationScriptsDir>",
+      "@Feature": "<featureDir>",
+      "@Project": "<projectDir>",
+      "@Themes": "<foundationDir>/Core/code/Styles/"
+    }
+  }
+}
+```
+
+Alias can be used in you Vue and Javascript file like that:
+
+```javascript
+import {something} from "@Foundation";
+import CarouselModule from "@Feature/Carousel";
 
+// ...
+```
+
+## PWA
+
+Vue-cli provide an extension to manage Progressive web application with webpack.
+To generate multiple serviceWorker per project/site, you have to configure PWA options in your `vue.config.js`
+and edit the `registerServiveWorker.js` generated by Vue-cli.
+
+In `vue.config.js` add this configuration:
+
+```javascript
+const config = require('@node-sitecore/config');
+
+const vueConfig = {
+  pwa: { // add this
+    exclude: [
+      /\.map$/,
+      /img\/icons\//,
+      /manifest\.json$/
+    ],
+    workboxOptions: {
+      swDest: `../../service-worker.${config.currentWebsite}.js`,
+      runtimeCaching: []
+    }
+  }
+}
+
+module.exports = config.buildVueConfig(vueConfig);
+```
+
+Then in the `registerServiceWorker.js:`
+
+```javascript
+/* eslint-disable no-console */
+import { register } from 'register-service-worker';
+
+if (process.env.NODE_ENV === 'production') {
+  const currentWebsite = process.env.VUE_APP_CURRENT_WEBSITE || 'Common';
+
+  register(`/service-worker.${currentWebsite}.js`, {
+    ready() {
+      console.log('App is being served from cache by a service worker.\n' +
+        'For more details, visit https://goo.gl/AFskqB');
+    },
+    cached() {
+      console.log('Content has been cached for offline use.');
+    },
+    updated() {
+      console.log('New content is available; please refresh.');
+    },
+    offline() {
+      console.log('No internet connection found. App is running in offline mode.');
+    },
+    error(error) {
+      console.error('Error during service worker registration:', error);
+    }
+  });
+}
+```
+
+And finally, edit your nuspec file and add this entry:
+
+```xml
+<?xml version="1.0"?>
+<package>
+ <files>
+   <file src="build\Website\service-worker.**.js"/>
+ </files>
+</package>
+```
+
+### Switch Project/Site
+
+Sitecore allow to have multiple site workspace like EU, GR, etc... the `npm run develop` compile only one localization
+to preview your code in Fractal for a given project. To change the default currentWebsite without change the `.nscrc` default configuration,
+ create a new file `.dev.nscrc` and copy this code:
+
+```json
+{
+  "currentWebsite": "EU"
+}
+```
+> Change the code according to the project code you want to preview in fractal then run `npm run develop`.

packages/cli-plugin-fractal/index.js

@@ -23,7 +23,7 @@ module.exports = (api, config) => {
         case 'serve':
           let port;
           if (commander.execute) {
-            port = await fractal.runDevBefore(commander.execute);
+            port = await fractal.runDevBefore(commander.execute, config);
           }
 
           await fractal.dev(config, port);

packages/cli-plugin-fractal/src/fractal/index.js

@@ -97,6 +97,7 @@ module.exports = {
     await execa(task, args, {
       shell: true,
       env: {
+        VUE_APP_CURRENT_WEBSITE: config.currentWebsite,
         FORCE_COLOR: true
       },
       stdio: 'inherit'
@@ -106,10 +107,16 @@ module.exports = {
     await fs.copy(config.vueCli.outputDir, path.join(config.fractal.outputDir, config.get('vueCli').baseUrl.production));
   },
 
-  async runDevBefore(cmd) {
+  async runDevBefore(cmd, config) {
     return new Promise(resolve => {
       cmd = cmd.split(' ');
-      const stream = execa(cmd[0], cmd.splice(1), { shell: true, env: { FORCE_COLOR: true } });
+      const stream = execa(cmd[0], cmd.splice(1), {
+        shell: true,
+        env: {
+          VUE_APP_CURRENT_WEBSITE: config.currentWebsite,
+          FORCE_COLOR: true
+        }
+      });
       stream.stderr.pipe(process.stderr);
       // stream.stdout.pipe(process.stdout);
       let hasError = false;

packages/cli-plugin-vue/index.js

@@ -8,25 +8,34 @@ module.exports = (api, config) => {
   api.registerCommand(
     'vue',
     {
-      usage: '<build|check> <pattern> [options]',
+      usage: '<build|check> [options]',
       description: 'Build multiple vue app',
       options: {
-        '-e, --execute <cmd>': {
+        '-p, --pattern <cmd>': {
           type: String,
-          description: 'Run command to build a vue application'
+          description: 'Glob pattern to list project'
+        },
+        '-l, --list <cmd>': {
+          type: Array,
+          description: 'Website code list (EU,FR,etc)'
+        },
+        '-e, --exclude <cmd>': {
+          type: Array,
+          description: 'Exclude Website code list (Common,etc)'
         }
       }
     },
     async (commander, args) => {
-      const [mode = 'build', pattern = path.join(config.projectDir, '**')] = args;
+      const [mode = 'build'] = args;
 
       switch (mode) {
         case 'build':
           info(`Starting build vue app...`);
 
           await multipleBuild(config, {
-            cmd: commander.execute || 'vue-cli-service build --mode production',
-            pattern
+            pattern: commander.pattern,
+            exclude: commander.exclude || [],
+            list: commander.list || [config.currentWebsite]
           });
           break;