@commercetools-frontend/mc-scripts 20.13.0 → 21.0.0-rc.3

package/build/bin/cli.js

@@ -22,7 +22,8 @@ const spawn = require('react-dev-utils/crossSpawn');
 const flags = mri(process.argv.slice(2), {
   alias: {
     help: ['h']
-  }
+  },
+  boolean: ['build-only']
 });
 const commands = flags._;
 
@@ -30,22 +31,25 @@ if (commands.length === 0 || flags.help && commands.length === 0) {
   console.log(`
 Usage: mc-scripts [global-options] [command] [options]
 
+https://docs.commercetools.com/custom-applications/api-reference/cli.
+
 Global options:
 
-  --env <path>              (optional) Parses the file path as a dotenv file and adds the variables to the environment. Multiple flags are allowed.
+  --env <path>                (optional) Parses the file path as a dotenv file and adds the variables to the environment. Multiple flags are allowed.
 
 Commands:
 
-  build                     Bundles the application in production mode. Outputs a "dist" folder.
+  build                       Bundles the application in production mode. Outputs a "public" folder.
+    --build-only              (optional) If defined, the command only creates the production bundles without compiling the "index.html".
 
-  compile-html              Compiles "index.html.template" file into a "index.html" with all the required runtime configuration. Outputs a "public" folder. Additionally, the security headers are also compiled and printed to stdout, unless you use a "transformer".
-                            More info at https://docs.commercetools.com/custom-applications/deployment/compiling-a-custom-application.
-      --transformer <path>  (optional) The path to a JS module that can be used to generate a configuration for a specific cloud provider (e.g. Netlify, Vercel, Firebase).
-      --inline-csp          (optional) If defined, the CSP config is inlined in the HTML head as a meta tag. This might be useful to keep using a static config for a hosting provider without the dynamically generated Content-Security-Policy header.
+  compile-html                Compiles "index.html.template" file into a "index.html" with all the required runtime configuration. Additionally, the security headers are also compiled and printed to stdout, unless you use a "transformer".
+    --transformer <path>      (optional) The path to a JS module that can be used to generate a configuration for a specific cloud provider (e.g. Vercel, Netlify).
+    --print-security-headers  (optional) The path to a JS module that can be used to generate a configuration for a specific cloud provider (e.g. Vercel, Netlify).
 
-  start                     Starts the application in development mode using Webpack Dev Server.
+  start                       Starts the application in development mode using Webpack Dev Server.
+
+  serve                       Serves previously built and compiled application from the "public" folder.
 
-  serve                     Serves previously built and compiled application from the "public" folder.
   `);
   process.exit(0);
 }
@@ -62,7 +66,15 @@ 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 = 'production';
           process.env.NODE_ENV = 'production';
-          proxyCommand();
+          const shouldAlsoCompile = !flags['build-only'];
+          proxyCommand(command, {
+            noExit: shouldAlsoCompile
+          });
+
+          if (shouldAlsoCompile) {
+            proxyCommand('compile-html');
+          }
+
           break;
         }
 
@@ -70,7 +82,7 @@ const applicationDirectory = fs.realpathSync(process.cwd());
         {
           // Do this as the first thing so that any code reading it knows the right env.
           process.env.NODE_ENV = 'production';
-          proxyCommand();
+          proxyCommand(command);
           break;
         }
 
@@ -79,8 +91,8 @@ const applicationDirectory = fs.realpathSync(process.cwd());
           // Do this as the first thing so that any code reading it knows the right env.
           process.env.NODE_ENV = 'production'; // Get specific flag for this command.
 
-          const commandArgs = getArgsForCommand(['transformer', 'inline-csp']);
-          proxyCommand({
+          const commandArgs = getArgsForCommand(['transformer']);
+          proxyCommand(command, {
             commandArgs
           });
           break;
@@ -91,7 +103,7 @@ 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();
+          proxyCommand(command);
           break;
         }
 
@@ -117,14 +129,15 @@ function getArgsForCommand(allowedFlags = []) {
   }, []);
 }
 
-function proxyCommand({
-  commandArgs
+function proxyCommand(fileName, {
+  commandArgs,
+  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.
 
-  const result = spawn.sync('node', [require.resolve(`../commands/${command}`)].concat(commandArgs), {
+  const result = spawn.sync('node', [require.resolve(`../commands/${fileName}`)].concat(commandArgs), {
     stdio: 'inherit'
   }); // Handle exit signals.
 
@@ -132,13 +145,13 @@ function proxyCommand({
     switch (result.signal) {
       case 'SIGKILL':
         {
-          console.log(`The command ${command} failed because the process exited too early. This probably means the system ran out of memory or someone called "kill -9" on the process.`);
+          console.log(`The command ${fileName} failed because the process exited too early. This probably means the system ran out of memory or someone called "kill -9" on the process.`);
           break;
         }
 
       case 'SIGTERM':
         {
-          console.log(`The command ${command} failed because the process exited too early. Someone might have called "kill" or "killall", or the system could be shutting down.`);
+          console.log(`The command ${fileName} failed because the process exited too early. Someone might have called "kill" or "killall", or the system could be shutting down.`);
           break;
         }
 
@@ -149,7 +162,13 @@ function proxyCommand({
     process.exit(1);
   }
 
-  process.exit(result.status);
+  if (result.status > 0) {
+    process.exit(result.status);
+  } else {
+    if (!noExit) {
+      process.exit(result.status);
+    }
+  }
 } // Load dotenv files into the process environment.
 // This is essentially what `dotenv-cli` does, but it's now built into this CLI.
 // Inspired also by https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used

package/build/commands/build.js

@@ -4,6 +4,8 @@
 // NOTE: `react-dev-utils` does not currently fully support Webpack v5.
 // Most of the imports work, however we might bump into some edge cases.
 // In any case, once they release a compatible version, we should't have problems.
+const path = require('path');
+
 const fs = require('fs-extra');
 
 const webpack = require('webpack');
@@ -18,6 +20,10 @@ const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 
 const printBuildError = require('react-dev-utils/printBuildError');
 
+const {
+  packageLocation: applicationStaticAssetsPath
+} = require('@commercetools-frontend/assets');
+
 const paths = require('../config/paths');
 
 const createWebpackConfigForProduction = require('../config/create-webpack-config-for-production');
@@ -38,7 +44,9 @@ if (!checkRequiredFiles([])) {
 measureFileSizesBeforeBuild(paths.appBuild).then(previousFileSizes => {
   // Remove all content but keep the directory so that
   // if you're in it, you don't end up in Trash
-  fs.emptyDirSync(paths.appBuild); // Start the webpack build
+  fs.emptyDirSync(paths.appBuild); // Copy default files
+
+  copyDefaultFiles(); // Start the webpack build
 
   return build(previousFileSizes);
 }).then(({
@@ -94,17 +102,11 @@ function build(previousFileSizes) {
           warnings: []
         });
       } else {
-        //TODO: Remove after 'react-dev-utils' natively supports webpack@5
-        const rawMessages = stats.toJson({
+        messages = formatWebpackMessages(stats.toJson({
           all: false,
           warnings: true,
-          errors: true,
-          moduleTrace: false
-        });
-        messages = formatWebpackMessages({
-          errors: rawMessages.errors.map(e => e.message),
-          warnings: rawMessages.warnings.map(e => e.message)
-        });
+          errors: true
+        }));
       }
 
       if (messages.errors.length) {
@@ -129,4 +131,10 @@ function build(previousFileSizes) {
       });
     });
   });
+}
+
+function copyDefaultFiles() {
+  fs.copySync(path.join(applicationStaticAssetsPath, 'html-page'), paths.appBuild, {
+    dereference: true
+  });
 }

package/build/commands/compile-html.js

@@ -3,69 +3,25 @@
 /* eslint-disable no-console,global-require,import/no-dynamic-require */
 const fs = require('fs');
 
-const path = require('path');
-
-const shelljs = require('shelljs');
-
 const mri = require('mri');
 
-const {
-  packageLocation: applicationStaticAssetsPath
-} = require('@commercetools-frontend/assets');
+const chalk = require('react-dev-utils/chalk');
 
 const {
   compileHtml
 } = require('@commercetools-frontend/mc-html-template');
 
+const paths = require('../config/paths');
+
 const flags = mri(process.argv.slice(2), {
-  boolean: ['inline-csp']
+  boolean: ['print-security-headers']
 });
 const appDirectory = fs.realpathSync(process.cwd());
 
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
-
-const publicAssetsPath = resolveApp('public');
-const paths = {
-  publicAssetsPath,
-  // NOTE: previously, for running the prod server locally, we were copying
-  // assets into public/assets and compiling the index.html into public folder.
-  // To run the app then we would define the cdnUrl as http://localhost:3001/assets,
-  // because of the assets subfolder.
-  // However, on the webpack-dev-server, the index.html and the bundles are
-  // served from the same folder. It's really complicated to get the config right
-  // and eventually it's not worth the effort as it just feels like a bloody workaround.
-  // Therefore, we do it a bit different now: keep the webpack-dev-server
-  // config as is and adjust the mc-script to serve the files the same way.
-  // Remember that for normal production usage, assets are served from a CDN.
-  // So now we have a flat public folder instead of an assets subfolder.
-  // Which means that the 3 static files (favicon, google**.html, robots.txt)
-  // need to be put somewhere else (public-assets) and copy into the public
-  // folder when the server starts.
-  publicAssetsFolderPath: path.join(applicationStaticAssetsPath, 'html-page/*'),
-  indexHtmlTemplatePath: path.join(publicAssetsPath, 'index.html.template'),
-  indexHtmlPath: path.join(publicAssetsPath, 'index.html')
-};
-shelljs.rm('-rf', publicAssetsPath);
-shelljs.mkdir('-p', publicAssetsPath);
-shelljs.cp('-R', paths.publicAssetsFolderPath, publicAssetsPath); // Resolve the absolute path of the caller location. This is necessary
-// to point to files within that folder.
-
-const assetsFrom = resolveApp('dist/assets'); // Make sure that the `dist/assets` folder is available.
-
-try {
-  fs.accessSync(assetsFrom, fs.F_OK);
-} catch (error) {
-  throw new Error('Could not find "dist/assets" folder. Did you run `mc-scripts build` first?');
-} // Copy the `dist/assets` folder into the `public` folder.
-
-
-shelljs.cp('-R', path.join(assetsFrom, '/*'), publicAssetsPath);
-
 const generateStatic = async () => {
-  const compiled = await compileHtml(paths.indexHtmlTemplatePath, {
-    inlineCsp: flags['inline-csp']
-  });
-  fs.writeFileSync(paths.indexHtmlPath, compiled.indexHtmlContent, {
+  console.log('Compiling index.html...');
+  const compiled = await compileHtml(paths.appIndexHtmlTemplate);
+  fs.writeFileSync(paths.appIndexHtml, compiled.indexHtmlContent, {
     encoding: 'utf8'
   });
 
@@ -81,9 +37,11 @@ const generateStatic = async () => {
     } catch (error) {
       throw new Error(`Could not load transformer module "${flags.transformer}"\n${error.stack}`);
     }
-  } else {
+  } else if (flags['print-security-headers']) {
     console.log(JSON.stringify(compiled.headers));
   }
+
+  console.log(chalk.green('Compiled successfully.\n'));
 };
 
 generateStatic().catch(error => {

package/build/commands/serve.js

@@ -1,25 +1,18 @@
 "use strict";
 
 /* eslint-disable no-console,global-require,import/no-dynamic-require */
-const fs = require('fs');
-
-const path = require('path');
-
 const http = require('http');
 
 const serveHandler = require('serve-handler');
 
-const port = 3001;
-const appDirectory = fs.realpathSync(process.cwd());
+const paths = require('../config/paths');
 
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
-
-const publicAssetsPath = resolveApp('public');
+const port = 3001;
 const server = http.createServer((request, response) => {
   // You pass two more arguments for config and middleware
   // More details here: https://github.com/vercel/serve-handler#options
   return serveHandler(request, response, {
-    public: publicAssetsPath,
+    public: paths.appBuild,
     rewrites: [{
       source: '/favicon*',
       destination: '/favicon.png'

package/build/commands/start.js

@@ -73,18 +73,13 @@ choosePort(HOST, DEFAULT_PORT).then(port => {
 
   const serverConfig = createDevServerConfig({
     allowedHost: urls.localUrlForBrowser,
-    contentBase: paths.appPublic,
+    contentBase: paths.appBuild,
     port,
     publicPath: config.output.publicPath
   });
-  const devServer = new WebpackDevServer(compiler, serverConfig); // Launch WebpackDevServer.
-
-  devServer.listen(port, HOST, err => {
-    if (err) {
-      console.log(err);
-      return;
-    }
+  const devServer = new WebpackDevServer(serverConfig, compiler); // Launch WebpackDevServer.
 
+  devServer.startCallback(() => {
     if (isInteractive) {
       clearConsole();
     }

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

@@ -30,7 +30,6 @@ const defaultToggleFlags = {
   disableCoreJs: false
 };
 const defaultOptions = {
-  distPath: paths.distPath,
   entryPoint: paths.entryPoint,
   sourceFolders: paths.sourceFolders,
   postcssOptions: {},
@@ -50,7 +49,6 @@ const reactRefreshOverlayEntry = require.resolve('react-dev-utils/refreshOverlay
  * "entry point".
  *
  * @param {Object} options - Options to configure the Webpack config
- * @param {string} options.distPath - The absolute path to the `dist` folder where Webpack should output the assets.
  * @param {string} options.entryPoint - The absolute path to the application entry point file.
  * @param {string[]} options.sourceFolders[] - A list of folders where Webpack should look for source files.
  * @param {Object} options.postcssOptions - Options related to Postcss plugins. See `createPostcssConfig` function.
@@ -98,7 +96,15 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
       // https://github.com/facebook/create-react-app/issues/290
       // `web` extension prefixes have been added for better support
       // for React Native Web.
-      extensions: ['js', 'mjs', 'cjs', 'ts', 'tsx', 'json', 'jsx'].map(ext => `.${ext}`)
+      extensions: ['js', 'mjs', 'cjs', 'ts', 'tsx', 'json', 'jsx'].map(ext => `.${ext}`),
+      // NOTE: this is meant to be a temporary list of fallback/polyfills for certain
+      // nodejs modules. With Webpack <5 these polyfills were included by default in Webpack,
+      // however now it's not the case anymore.
+      // See also related work in CRA: https://github.com/facebook/create-react-app/pull/11764
+      fallback: {
+        url: require.resolve('url/'),
+        querystring: require.resolve('querystring-es3')
+      }
     },
     entry: {
       app: [require.resolve('./application-runtime'), !mergedOptions.toggleFlags.disableCoreJs && require.resolve('core-js/stable'), // When using the experimental `react-refresh` integration,

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

@@ -13,8 +13,7 @@ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-const MomentLocalesPlugin = require('moment-locales-webpack-plugin'); // const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-
+const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 
 const TerserPlugin = require('terser-webpack-plugin');
 
@@ -46,7 +45,6 @@ const defaultToggleFlags = {
   disableCoreJs: false
 };
 const defaultOptions = {
-  distPath: paths.distPath,
   entryPoint: paths.entryPoint,
   sourceFolders: paths.sourceFolders,
   postcssOptions: {},
@@ -59,7 +57,6 @@ const defaultOptions = {
  * "entry point".
  *
  * @param {Object} options - Options to configure the Webpack config
- * @param {string} options.distPath - The absolute path to the `dist` folder where Webpack should output the assets.
  * @param {string} options.entryPoint - The absolute path to the application entry point file.
  * @param {string[]} options.sourceFolders[] - A list of folders where Webpack should look for source files.
  * @param {Object} options.postcssOptions - Options related to Postcss plugins. See `createPostcssConfig` function.
@@ -141,7 +138,14 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
       // https://github.com/facebook/create-react-app/issues/290
       // `web` extension prefixes have been added for better support
       // for React Native Web.
-      extensions: ['js', 'mjs', 'cjs', 'ts', 'tsx', 'json', 'jsx'].map(ext => `.${ext}`)
+      extensions: ['js', 'mjs', 'cjs', 'ts', 'tsx', 'json', 'jsx'].map(ext => `.${ext}`),
+      // NOTE: this is meant to be a temporary list of fallback/polyfills for certain
+      // nodejs modules. With Webpack <5 these polyfills were included by default in Webpack,
+      // however now it's not the case anymore.
+      // See also related work in CRA: https://github.com/facebook/create-react-app/pull/11764
+      fallback: {
+        querystring: require.resolve('querystring-es3')
+      }
     },
     // In production, we only want to load the polyfills and the app code.
     entry: {
@@ -158,12 +162,7 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
       // Will be injected on runtime. See `packages/application-shell/src/public-path.js`
       publicPath: ''
     },
-    plugins: [// new CleanWebpackPlugin({
-    //   dangerouslyAllowCleanPatternsOutsideProject: true,
-    //   dry: true,
-    //   cleanOnceBeforeBuildPatterns: [mergedOptions.distPath],
-    // }),
-    // Allows to "assign" custom options to the `webpack` object.
+    plugins: [// Allows to "assign" custom options to the `webpack` object.
     // At the moment, this is used to share some props with `postcss.config`.
     new webpack.LoaderOptionsPlugin({
       options: {
@@ -186,7 +185,7 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
     // This is necessary to programmatically refer to the correct bundle path
     // in the `index.html`.
     new FinalStatsWriterPlugin({
-      outputPath: mergedOptions.distPath,
+      outputPath: paths.appBuild,
       includeFields: ['entrypoints', 'assets', 'publicPath', 'time']
     }), mergedOptions.toggleFlags.generateIndexHtml && new HtmlWebpackPlugin({
       inject: false,

package/build/config/paths.js

@@ -26,13 +26,12 @@ const resolveModule = (resolveFn, filePath) => {
 
 const paths = {
   appPackageJson: resolveApp('package.json'),
-  appPublic: resolveApp('public'),
-  appBuild: resolveApp('dist/assets'),
-  appIndexHtml: resolveApp('dist/assets/index.html'),
+  appBuild: resolveApp('public'),
+  appIndexHtmlTemplate: resolveApp('public/index.html.template'),
+  appIndexHtml: resolveApp('public/index.html'),
   appWebpackConfig: resolveModule(resolveApp, `webpack.config.${process.env.NODE_ENV === 'production' ? 'prod' : 'dev'}`),
   yarnLockFile: resolveApp('yarn.lock'),
   appRoot: resolveApp('.'),
-  distPath: resolveApp('dist'),
   entryPoint: resolveModule(resolveApp, 'src/index'),
   sourceFolders: [resolveApp('src')]
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/mc-scripts",
-  "version": "20.13.0",
+  "version": "21.0.0-rc.3",
   "description": "Configuration and scripts for developing a MC application",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -26,21 +26,21 @@
     "build:bundles:watch": "yarn build -w"
   },
   "dependencies": {
-    "@babel/runtime": "7.16.5",
-    "@babel/runtime-corejs3": "7.16.5",
-    "@commercetools-frontend/application-config": "20.12.3",
-    "@commercetools-frontend/assets": "20.12.3",
-    "@commercetools-frontend/babel-preset-mc-app": "20.12.3",
-    "@commercetools-frontend/mc-dev-authentication": "20.10.6",
-    "@commercetools-frontend/mc-html-template": "20.12.3",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.3",
+    "@babel/runtime": "^7.16.7",
+    "@babel/runtime-corejs3": "^7.16.8",
+    "@commercetools-frontend/application-config": "21.0.0-rc.1",
+    "@commercetools-frontend/assets": "21.0.0-rc.1",
+    "@commercetools-frontend/babel-preset-mc-app": "21.0.0-rc.1",
+    "@commercetools-frontend/mc-dev-authentication": "21.0.0-rc.1",
+    "@commercetools-frontend/mc-html-template": "21.0.0-rc.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
     "@svgr/webpack": "6.2.0",
-    "autoprefixer": "10.4.0",
+    "autoprefixer": "10.4.2",
     "babel-loader": "8.2.3",
     "browserslist": "4.19.1",
-    "core-js": "3.20.0",
+    "core-js": "^3.20.3",
     "css-loader": "5.2.7",
-    "css-minimizer-webpack-plugin": "3.3.0",
+    "css-minimizer-webpack-plugin": "3.4.1",
     "dotenv": "10.0.0",
     "dotenv-expand": "5.1.0",
     "fs-extra": "10.0.0",
@@ -56,8 +56,9 @@
     "postcss-custom-properties": "11.0.0",
     "postcss-import": "14.0.2",
     "postcss-loader": "6.2.1",
-    "postcss-reporter": "7.0.4",
-    "react-dev-utils": "11.0.4",
+    "postcss-reporter": "7.0.5",
+    "querystring-es3": "^0.2.1",
+    "react-dev-utils": "12.0.0",
     "react-refresh": "0.11.0",
     "serve-handler": "6.1.3",
     "shelljs": "0.8.5",
@@ -65,18 +66,19 @@
     "svg-url-loader": "7.1.1",
     "terser-webpack-plugin": "5.3.0",
     "thread-loader": "3.0.4",
-    "webpack": "5.65.0",
+    "url": "^0.11.0",
+    "webpack": "5.66.0",
     "webpack-bundle-analyzer": "4.5.0",
-    "webpack-dev-server": "4.6.0",
+    "webpack-dev-server": "4.7.3",
     "webpackbar": "5.0.2"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "7.16.5",
-    "@babel/preset-env": "7.16.5",
+    "@babel/plugin-transform-runtime": "^7.16.10",
+    "@babel/preset-env": "^7.16.11",
     "rimraf": "3.0.2"
   },
   "engines": {
-    "node": ">=12 || >=14"
+    "node": ">=14"
   },
   "babel": {
     "presets": [
@@ -84,7 +86,7 @@
         "@babel/preset-env",
         {
           "targets": {
-            "node": "12"
+            "node": "14"
           },
           "modules": "commonjs",
           "useBuiltIns": "usage",