@commercetools-frontend/mc-scripts 21.3.4 → 21.4.0

package/build/bin/cli.js

@@ -69,6 +69,10 @@ const applicationDirectory = fs.realpathSync(process.cwd());
 
 (async () => {
   try {
+    // Load dotenv files into the process environment.
+    // This is essentially what `dotenv-cli` does, but it's now built into this CLI.
+    loadDotEnvFiles(flags);
+
     switch (command) {
       case 'build':
         {
@@ -76,11 +80,21 @@ const applicationDirectory = fs.realpathSync(process.cwd());
           process.env.BABEL_ENV = 'production';
           process.env.NODE_ENV = 'production';
           const shouldAlsoCompile = !flags['build-only'];
+          const shouldUseExperimentalBundler = process.env.ENABLE_EXPERIMENTAL_VITE_BUNDLER === 'true';
+
+          if (shouldUseExperimentalBundler) {
+            console.log('Experimental Vite bundler enabled! 🚀');
+            console.warn('NOTE that the "cdnURL" value is not supported at the moment when using Vite.');
+            console.log('');
+          }
+
           proxyCommand(command, {
-            noExit: shouldAlsoCompile
+            noExit: shouldAlsoCompile,
+            fileName: shouldUseExperimentalBundler ? 'build-vite' : 'build'
           });
 
           if (shouldAlsoCompile) {
+            console.log('');
             proxyCommand('compile-html');
           }
 
@@ -112,7 +126,16 @@ const applicationDirectory = fs.realpathSync(process.cwd());
           // Do this as the first thing so that any code reading it knows the right env.
           process.env.BABEL_ENV = 'development';
           process.env.NODE_ENV = 'development';
-          proxyCommand(command);
+          const shouldUseExperimentalBundler = process.env.ENABLE_EXPERIMENTAL_VITE_BUNDLER === 'true';
+
+          if (shouldUseExperimentalBundler) {
+            console.log('Experimental Vite bundler enabled');
+            console.log('');
+          }
+
+          proxyCommand(command, {
+            fileName: shouldUseExperimentalBundler ? 'start-vite' : 'start'
+          });
           break;
         }
 
@@ -166,10 +189,7 @@ function proxyCommand(commandName, {
   fileName,
   noExit
 } = {}) {
-  // Load dotenv files into the process environment.
-  // This is essentially what `dotenv-cli` does, but it's now built into this CLI.
-  loadDotEnvFiles(flags); // Spawn the actual command.
-
+  // Spawn the actual command.
   const result = spawn.sync('node', [require.resolve(`../commands/${fileName || commandName}`)].concat(commandArgs), {
     stdio: 'inherit'
   }); // Handle exit signals.

package/build/commands/build-vite.js

@@ -0,0 +1,95 @@
+"use strict";
+
+/* eslint-disable react-hooks/rules-of-hooks */
+const fs = require('fs-extra');
+
+const path = require('path');
+
+const {
+  build
+} = require('vite');
+
+const pluginGraphql = require('@rollup/plugin-graphql');
+
+const pluginReact = require('@vitejs/plugin-react').default;
+
+const {
+  generateTemplate
+} = require('@commercetools-frontend/mc-html-template');
+
+const {
+  packageLocation: applicationStaticAssetsPath
+} = require('@commercetools-frontend/assets');
+
+const paths = require('../config/paths');
+
+const DEFAULT_PORT = parseInt(process.env.HTTP_PORT, 10) || 3001;
+
+const execute = async () => {
+  // Ensure the `/public` folder exists.
+  fs.mkdirSync(paths.appBuild, {
+    recursive: true
+  }); // Generate `index.html` (template).
+
+  const appEntryPoint = path.relative(paths.appRoot, paths.entryPoint);
+  const html = generateTemplate({
+    // Define the module entry point (path relative from the `/public` folder).
+    // NOTE: that this is different from the development configuration.
+    scriptImports: [`<script type="module" src="/${appEntryPoint}"></script>`]
+  }); // Write `index.html` (template) into the `/public` folder.
+
+  fs.writeFileSync(paths.appIndexHtml, html, {
+    encoding: 'utf8'
+  }); // TODO: allow to pass additional config options.
+  // * `define`
+  // * `plugins`
+
+  await build({
+    configFile: false,
+    root: paths.appRoot,
+    define: {
+      'process.env.DEBUG': JSON.stringify(false),
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+    },
+    build: {
+      outDir: 'public',
+      assetsDir: '.',
+      rollupOptions: {
+        // This is necessary to instruct Vite that the `index.html` (template)
+        // is located in the `/public` folder.
+        // NOTE that after the build, Vite will write the `index.html` (template)
+        // at the `/public/public/index.html` location. See `fs.renameSync` below.
+        input: paths.appIndexHtml
+      }
+    },
+    server: {
+      port: DEFAULT_PORT
+    },
+    plugins: [pluginGraphql(), pluginReact({
+      jsxImportSource: '@emotion/react',
+      babel: {
+        plugins: ['@emotion/babel-plugin']
+      }
+    })]
+  }); // Rename `/public/public/index.html` to `/public/index.html.template`
+
+  fs.renameSync( // Because of our custom entry point path (`/public/index.html`),
+  // Vite will write the `index.html` to `/public/public/index.html`.
+  // We need to move this file to the `/public` folder and rename it
+  // to `index.html.template` (as expected by the `compile-html` command).
+  path.join(paths.appBuild, 'public/index.html'), paths.appIndexHtmlTemplate); // Clean up nested folder
+
+  fs.rmdirSync(path.join(paths.appBuild, 'public')); // Copy public assets
+
+  fs.copySync(path.join(applicationStaticAssetsPath, 'html-page'), paths.appBuild, {
+    dereference: true
+  });
+};
+
+execute().catch(error => {
+  if (error && error.message) {
+    console.error(error.message);
+  }
+
+  process.exit(1);
+});

package/build/commands/build.js

@@ -72,7 +72,7 @@ measureFileSizesBeforeBuild(paths.appBuild).then(previousFileSizes => {
   process.exit(1);
 }).catch(err => {
   if (err && err.message) {
-    console.log(err.message);
+    console.error(err.message);
   }
 
   process.exit(1);

package/build/commands/compile-html.js

@@ -45,6 +45,9 @@ const generateStatic = async () => {
 };
 
 generateStatic().catch(error => {
-  console.error(error);
+  if (error && error.message) {
+    console.error(error.message);
+  }
+
   process.exit(1);
 });

package/build/commands/serve.js

@@ -17,7 +17,7 @@ const server = http.createServer((request, response) => {
       source: '/favicon*',
       destination: '/favicon.png'
     }, {
-      source: '/login',
+      source: '/login*',
       destination: '/login.html'
     }, {
       source: '/logout',

package/build/commands/start-vite.js

@@ -0,0 +1,140 @@
+"use strict";
+
+const fs = require('fs-extra');
+
+const path = require('path');
+
+const {
+  createServer
+} = require('vite');
+
+const pluginGraphql = require('@rollup/plugin-graphql');
+
+const pluginReact = require('@vitejs/plugin-react').default;
+
+const {
+  processConfig
+} = require('@commercetools-frontend/application-config');
+
+const {
+  replaceHtmlPlaceholders,
+  processHeaders,
+  generateTemplate
+} = require('@commercetools-frontend/mc-html-template');
+
+const devAuthentication = require('@commercetools-frontend/mc-dev-authentication');
+
+const {
+  packageLocation: applicationStaticAssetsPath
+} = require('@commercetools-frontend/assets');
+
+const paths = require('../config/paths');
+
+const DEFAULT_PORT = parseInt(process.env.HTTP_PORT, 10) || 3001;
+
+const pluginCustomApplication = applicationConfig => {
+  /**
+   * @type {import('vite').Plugin}
+   */
+  return {
+    name: 'custom-application',
+
+    /**
+     * @type {import('vite').ServerHook}
+     */
+    configureServer(server) {
+      return () => {
+        // Users do not need to have/maintain the `index.html` (as expected by Vite)
+        // as it's generated and maintained by the Custom Application CLI.
+        // Therefore, the generated `index.html` (template) is written into the `/public`
+        // folder so that it's gitignored.
+        // As a result, we need to make sure to point the URI path to the correct location.
+        server.middlewares.use((req, res, next) => {
+          if (req.url === '/index.html') {
+            req.url = '/public/index.html';
+          }
+
+          next();
+        }); // Handle auth routes for internal local development.
+
+        server.middlewares.use(devAuthentication.middlewares.createMcDevAuthenticationMiddleware(applicationConfig));
+      };
+    },
+
+    /**
+     * @type {import('vite').IndexHtmlTransformHook}
+     */
+    transformIndexHtml(rawHtml, _ctx) {
+      const compiledHeaders = processHeaders(applicationConfig);
+      const enhancedLocalEnv = Object.assign({}, applicationConfig.env, // Now that the app config is defined as a `env.json`, when we start the FE app
+      // to point to the local backend API by passing the `MC_API_URL` env does not
+      // work anymore). To make it work again, we can override the `env.json` config
+      // with the env variable before injecting the values into the index.html.
+      // NOTE: this is only necessary for development.
+      process.env.MC_API_URL ? {
+        mcApiUrl: process.env.MC_API_URL
+      } : {}); // Resolve the placeholders of the `index.html` (template) file, before serving it.
+
+      const html = replaceHtmlPlaceholders(rawHtml, {
+        env: enhancedLocalEnv,
+        headers: compiledHeaders
+      });
+      return html;
+    }
+
+  };
+};
+
+const execute = async () => {
+  // Load the Custom Application config file first.
+  const applicationConfig = processConfig(); // Ensure the `/public` folder exists.
+
+  fs.mkdirSync(paths.appBuild, {
+    recursive: true
+  }); // Generate `index.html` (template).
+
+  const appEntryPoint = path.relative(paths.appRoot, paths.entryPoint);
+  const html = generateTemplate({
+    // Define the module entry point (path relative to the `/public` folder).
+    // NOTE: that this is different from the production configuration.
+    scriptImports: [`<script type="module" src="/../${appEntryPoint}"></script>`]
+  }); // Write `index.html` (template) into the `/public` folder.
+
+  fs.writeFileSync(paths.appIndexHtml, html, {
+    encoding: 'utf8'
+  }); // TODO: allow to pass additional config options.
+  // * `define`
+  // * `plugins`
+
+  const server = await createServer({
+    configFile: false,
+    root: paths.appRoot,
+    define: {
+      'process.env.DEBUG': JSON.stringify(false),
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+    },
+    server: {
+      port: DEFAULT_PORT
+    },
+    plugins: [pluginGraphql(), pluginReact({
+      jsxImportSource: '@emotion/react',
+      babel: {
+        plugins: ['@emotion/babel-plugin']
+      }
+    }), pluginCustomApplication(applicationConfig)]
+  });
+  await server.listen(); // Copy public assets to `/public` folder (even in development).
+
+  fs.copySync(path.join(applicationStaticAssetsPath, 'html-page'), paths.appBuild, {
+    dereference: true
+  });
+  server.printUrls();
+};
+
+execute().catch(error => {
+  if (error && error.message) {
+    console.error(error.message);
+  }
+
+  process.exit(1);
+});

package/build/commands/start.js

@@ -72,8 +72,6 @@ choosePort(HOST, DEFAULT_PORT).then(port => {
   }); // Serve webpack assets generated by the compiler over a web sever.
 
   const serverConfig = createDevServerConfig({
-    allowedHost: urls.localUrlForBrowser,
-    contentBase: paths.appBuild,
     port,
     publicPath: config.output.publicPath
   });
@@ -103,7 +101,7 @@ choosePort(HOST, DEFAULT_PORT).then(port => {
   }
 }).catch(err => {
   if (err && err.message) {
-    console.log(err.message);
+    console.error(err.message);
   }
 
   process.exit(1);

package/build/config/create-webpack-config-for-development.js

@@ -262,7 +262,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
         test: function testForNormalCssFiles(fileName) {
           return (// Use this only for plain CSS.
             // For css-modules, see loader above.
-            fileName.endsWith('.css') && !fileName.endsWith('.mod.css')
+            fileName.endsWith('.css') && !(fileName.endsWith('.mod.css') || fileName.endsWith('.module.css'))
           );
         },
         // "postcss" loader applies autoprefixer to our CSS.

package/build/config/create-webpack-config-for-production.js

@@ -281,7 +281,7 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
         test: function testForNormalCssFiles(fileName) {
           return (// Use this only for plain CSS.
             // For css-modules, see loader above.
-            fileName.endsWith('.css') && !fileName.endsWith('.mod.css')
+            fileName.endsWith('.css') && !(fileName.endsWith('.mod.css') || fileName.endsWith('.module.css'))
           );
         },
         // "postcss" loader applies autoprefixer to our CSS.

package/build/config/webpack-dev-server.config.js

@@ -1,7 +1,5 @@
 "use strict";
 
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
-
 const {
   processConfig
 } = require('@commercetools-frontend/application-config');
@@ -26,8 +24,6 @@ const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
 const sockPort = process.env.WDS_SOCKET_PORT;
 
 module.exports = ({
-  allowedHost,
-  contentBase,
   port,
   publicPath
 }) => ({
@@ -62,37 +58,11 @@ module.exports = ({
   // Enable HTTPS if the HTTPS environment variable is set to 'true'
   // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
   setupMiddlewares(middlewares, devServer) {
-    var _applicationConfig$en, _applicationConfig$en2;
-
     if (!devServer) {
       throw new Error('webpack-dev-server is not defined');
-    } // This lets us open files from the runtime error overlay.
-
-
-    middlewares.unshift(errorOverlayMiddleware());
-    devServer.app.set('views', devAuthentication.views);
-    devServer.app.set('view engine', devAuthentication.config.viewEngine);
-    devServer.app.post('/api/graphql', (request, response) => {
-      response.statusCode = 404;
-      response.setHeader('Content-Type', 'application/json');
-      response.end(JSON.stringify({
-        message: `This GraphQL endpoint is only available in production in the [Merchant Center Proxy Router](https://docs.commercetools.com/custom-applications/concepts/merchant-center-proxy-router). Please check that you are not calling this endpoint in development mode.`
-      }));
-    });
-
-    if ((_applicationConfig$en = applicationConfig.env.__DEVELOPMENT__) !== null && _applicationConfig$en !== void 0 && (_applicationConfig$en2 = _applicationConfig$en.oidc) !== null && _applicationConfig$en2 !== void 0 && _applicationConfig$en2.authorizeUrl) {
-      var _applicationConfig$en3, _applicationConfig$en4;
-
-      // Handle login page for OIDC workflow when developing against a local MC API.
-      if ((_applicationConfig$en3 = applicationConfig.env.__DEVELOPMENT__) !== null && _applicationConfig$en3 !== void 0 && (_applicationConfig$en4 = _applicationConfig$en3.oidc) !== null && _applicationConfig$en4 !== void 0 && _applicationConfig$en4.authorizeUrl.startsWith('http://localhost')) {
-        devServer.app.get('/login/authorize', devAuthentication.middlewares.createLoginMiddleware(applicationConfig.env));
-      }
-    } else {
-      devServer.app.get('/login', devAuthentication.middlewares.createLoginMiddleware(applicationConfig.env)); // Intercept the /logout page and "remove" the auth cookie value
-
-      devServer.app.get('/logout', devAuthentication.middlewares.createLogoutMiddleware(applicationConfig.env));
     }
 
+    middlewares.push(devAuthentication.middlewares.createMcDevAuthenticationMiddleware(applicationConfig));
     return middlewares;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/mc-scripts",
-  "version": "21.3.4",
+  "version": "21.4.0",
   "description": "Configuration and scripts for developing a MC application",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -33,10 +33,12 @@
     "@commercetools-frontend/assets": "21.0.0",
     "@commercetools-frontend/babel-preset-mc-app": "21.3.4",
     "@commercetools-frontend/constants": "21.3.4",
-    "@commercetools-frontend/mc-dev-authentication": "21.0.0",
-    "@commercetools-frontend/mc-html-template": "21.3.4",
+    "@commercetools-frontend/mc-dev-authentication": "21.4.0",
+    "@commercetools-frontend/mc-html-template": "21.4.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
+    "@rollup/plugin-graphql": "1.1.0",
     "@svgr/webpack": "6.2.1",
+    "@vitejs/plugin-react": "1.3.0",
     "autoprefixer": "^10.4.4",
     "babel-loader": "8.2.4",
     "browserslist": "^4.20.2",
@@ -73,6 +75,7 @@
     "terser-webpack-plugin": "5.3.1",
     "thread-loader": "3.0.4",
     "url": "^0.11.0",
+    "vite": "2.9.1",
     "webpack": "5.72.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-dev-server": "4.8.1",