[Breaking] refactor: drop mc-http-server, make --use-local-assets the default behavior

.changeset/config.json

@@ -28,7 +28,6 @@
       "@commercetools-frontend/l10n",
       "@commercetools-frontend/mc-dev-authentication",
       "@commercetools-frontend/mc-html-template",
-      "@commercetools-frontend/mc-http-server",
       "@commercetools-frontend/mc-scripts",
       "@commercetools-frontend/notifications",
       "@commercetools-frontend/permissions",

.changeset/good-items-lay.md

@@ -2,7 +2,6 @@
 '@commercetools-frontend/application-config': major
 '@commercetools-frontend/application-shell': major
 '@commercetools-frontend/mc-html-template': major
-'@commercetools-frontend/mc-http-server': major
 '@commercetools-frontend/mc-scripts': major
 ---
 

.changeset/lemon-radios-travel.md

@@ -7,4 +7,4 @@
 
 Migrate Apollo dependencies to `@apollo/client` package.
 
-See full release notes: https://docs.commercetools.com/custom-applications/releases/2020-10-12-migrating-to-the-new-apollo-client-30
+See full release notes: https://docs.commercetools.com/custom-applications/releases/2020-10-12-migrating-to-v17

.changeset/loud-hounds-explain.md

@@ -1,5 +1,4 @@
 ---
-'@commercetools-frontend/mc-http-server': patch
 '@commercetools-website/custom-applications': patch
 ---
 

.changeset/poor-avocados-act.md

@@ -0,0 +1,30 @@
+---
+'merchant-center-application-template-starter': major
+'@commercetools-frontend/application-config': major
+'@commercetools-frontend/application-shell': major
+'@commercetools-frontend/application-shell-connectors': major
+'@commercetools-frontend/mc-dev-authentication': major
+'@commercetools-frontend/mc-html-template': major
+'@commercetools-frontend/mc-scripts': major
+'playground': major
+'@commercetools-local/visual-testing-app': major
+'@commercetools-website/custom-applications': major
+---
+
+Remove the CLI flag `--use-local-assets`. The default behavior of `mc-scripts compile-html` now is to compile the assets locally, which is the only reasonable thing to do.
+
+Furthermore, the `@commercetools-frontend/mc-http-server` package has been deprecated and won't be published anymore.
+With the `compile-html` command there is no need to have a pre-configured HTTP server anymore.
+
+When running the `mc-scripts compile-html` command, the `index.html` is compiled for production usage and it lives in the `public` folder, together with the other static assets. This is all you need to deploy your application.
+You can decide to [deploy the Custom Application statically to one of the popular cloud providers](https://docs.commercetools.com/custom-applications/deployment/compiling-a-custom-application#deployment), or serve the files on your own using a static server.
+
+For example, to run locally the Custom Application using the production bundles:
+
+```console
+NODE_ENV=production MC_APP_ENV=development dotenv -- \
+  mc-scripts compile-html \
+  --transformer @commercetools-frontend/mc-dev-authentication/transformer-local.js
+
+mc-scripts serve
+```

.changeset/wet-badgers-speak.md

@@ -5,7 +5,6 @@
 '@commercetools-frontend/application-shell': patch
 '@commercetools-frontend/i18n': patch
 '@commercetools-frontend/jest-preset-mc-app': patch
-'@commercetools-frontend/mc-http-server': patch
 '@commercetools-frontend/mc-scripts': patch
 '@commercetools-frontend/react-notifications': patch
 '@commercetools-frontend/sdk': patch

.eslintignore

@@ -6,5 +6,4 @@ node_modules/*
 packages/application-shell/test-utils/index.js
 packages/application-shell-connectors/test-utils/index.js
 packages/sdk/test-utils/index.js
-packages/mc-http-server/public/
 **/.cache/*

.github/ISSUE_TEMPLATE/documentation_deployment_examples.md

@@ -8,7 +8,7 @@ labels:
 assignees: ''
 ---
 
-**Where would you like to deploy your custom application?**
+**Where would you like to deploy your Custom Application?**
 List one of the cloud providers that you would be interested to use, that are not listed in the examples.
 
 **Additional context**

.vscode/spellright.dict

@@ -18,3 +18,4 @@ dotenv
 Vercel
 changelogs
 commercetools
+Intl

application-templates/starter/package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "build": "mc-scripts build",
     "start": "dotenv -- mc-scripts start",
-    "start:prod:local": "NODE_ENV=production MC_APP_ENV=development dotenv -- mc-http-server --use-local-assets",
+    "compile-html": "NODE_ENV=production dotenv -- mc-scripts compile-html",
+    "compile-html:local": "NODE_ENV=production MC_APP_ENV=development dotenv -- mc-scripts compile-html --transformer @commercetools-frontend/mc-dev-authentication/transformer-local.js",
+    "start:prod:local": "yarn compile-html:local && mc-scripts serve",
     "i18n:build": "mc-scripts extract-intl --output-path=$(pwd)/src/i18n/data 'src/**/!(*.spec).js' --build-translations",
     "test": "jest --config jest.test.config.js",
     "test:watch": "jest --config jest.test.config.js --watch",
@@ -19,7 +21,6 @@
     "@commercetools-frontend/application-shell": "16.17.3",
     "@commercetools-frontend/assets": "16.15.3",
     "@commercetools-frontend/i18n": "16.17.0",
-    "@commercetools-frontend/mc-http-server": "16.17.4",
     "@commercetools-frontend/permissions": "16.17.0",
     "@commercetools-uikit/flat-button": "10.36.0",
     "@commercetools-uikit/icons": "10.33.0",
@@ -36,10 +37,11 @@
   },
   "devDependencies": {
     "@commercetools-frontend/jest-preset-mc-app": "16.17.2",
+    "@commercetools-frontend/mc-dev-authentication": "16.15.2",
     "@commercetools-frontend/mc-scripts": "16.17.4",
     "@testing-library/react": "11.0.4",
     "dotenv-cli": "4.0.0",
     "enzyme": "3.11.0",
     "jest": "26.5.0"
   }
-}
+}

packages/mc-dev-authentication/README.md

@@ -4,7 +4,7 @@
   <a href="https://www.npmjs.com/package/@commercetools-frontend/mc-dev-authentication"><img src="https://badgen.net/npm/v/@commercetools-frontend/mc-dev-authentication" alt="Latest release (latest dist-tag)" /></a> <a href="https://www.npmjs.com/package/@commercetools-frontend/mc-dev-authentication"><img src="https://badgen.net/npm/v/@commercetools-frontend/mc-dev-authentication/next" alt="Latest release (next dist-tag)" /></a> <a href="https://bundlephobia.com/result?p=@commercetools-frontend/mc-dev-authentication"><img src="https://badgen.net/bundlephobia/minzip/@commercetools-frontend/mc-dev-authentication" alt="Minified + GZipped size" /></a> <a href="https://github.com/commercetools/merchant-center-application-kit/blob/master/LICENSE"><img src="https://badgen.net/github/license/commercetools/merchant-center-application-kit" alt="GitHub license" /></a>
 </p>
 
-Authentication views when running mc-http-server or webpack-dev-server in development mode.
+Authentication views when running webpack-dev-server in development mode.
 
 ## Install
 

packages/mc-dev-authentication/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-frontend/mc-dev-authentication",
   "version": "16.15.2",
-  "description": "Authentication views when running mc-http-server or webpack-dev-server in development mode",
+  "description": "Authentication views when running webpack-dev-server in development mode",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
     "type": "git",

packages/mc-dev-authentication/transformer-local.js

@@ -0,0 +1,49 @@
+const fs = require('fs');
+const path = require('path');
+const pug = require('pug');
+
+const compileLoginView = pug.compileFile(
+  path.join(__dirname, './views/login.pug')
+);
+const compileLogoutView = pug.compileFile(
+  path.join(__dirname, './views/logout.pug')
+);
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
+const paths = {
+  appPublic: resolveApp('public'),
+};
+
+// This transformer will generate a development `login` and `logout` HTML files
+// and copy them to the application public foder.
+// This is necessary to run the application locally in production mode.
+module.exports = ({ env }) => {
+  const loginViewHtml = compileLoginView({ env });
+  const logoutViewHtml = compileLogoutView({ env });
+
+  fs.copyFileSync(
+    path.join(__dirname, 'views', 'login.css'),
+    path.join(paths.appPublic, 'login.css')
+  );
+  fs.copyFileSync(
+    path.join(__dirname, 'views', 'login.js'),
+    path.join(paths.appPublic, 'login.js')
+  );
+  fs.copyFileSync(
+    path.join(__dirname, 'views', 'logout.js'),
+    path.join(paths.appPublic, 'logout.js')
+  );
+  fs.writeFileSync(
+    path.join(paths.appPublic, 'login.html'),
+    loginViewHtml,
+    'utf8'
+  );
+  fs.writeFileSync(
+    path.join(paths.appPublic, 'logout.html'),
+    logoutViewHtml,
+    'utf8'
+  );
+};

packages/mc-html-template/package.json

@@ -41,7 +41,6 @@
     "@babel/runtime-corejs3": "7.11.2",
     "@commercetools-frontend/application-config": "16.17.0",
     "core-js": "3.6.5",
-    "node-fetch": "2.6.1",
     "serialize-javascript": "4.0.0",
     "uglify-es": "3.3.9",
     "uglifycss": "0.0.29"

packages/mc-html-template/src/compile-html.js

@@ -1,66 +1,23 @@
 const fs = require('fs');
-const path = require('path');
-const fetch = require('node-fetch');
 const { processConfig } = require('@commercetools-frontend/application-config');
 const processHeaders = require('./process-headers');
 const replaceHtmlPlaceholders = require('./utils/replace-html-placeholders');
 
-const requiredOptions = ['publicAssetsPath'];
-
-const trimTrailingSlash = (value) => value.replace(/\/$/, '');
-
-/**
- * Options:
- * - publicAssetsPath
- * - useLocalAssets
- */
-module.exports = async function compileHtml(options) {
-  requiredOptions.forEach((key) => {
-    if (!options[key]) {
-      throw new Error(`Missing required option ${key}.`);
-    }
-  });
+module.exports = async function compileHtml(indexHtmlTemplatePath) {
   const applicationConfig = processConfig();
   const compiledHeaders = processHeaders(applicationConfig);
 
-  if (options.useLocalAssets) {
-    const indexHtmlContent = fs.readFileSync(
-      path.join(options.publicAssetsPath, 'index.html.template'),
-      'utf8'
-    );
-    const interpolatedIndexHtmlContent = replaceHtmlPlaceholders(
-      indexHtmlContent,
-      applicationConfig.env
-    );
-    return {
-      env: applicationConfig.env,
-      headers: compiledHeaders,
-      indexHtmlContent: interpolatedIndexHtmlContent,
-    };
-  }
-
-  // TL;DR; This disables the `Cache-Control` and ensures that we get
-  // the latest version of the object.
-  const randomQueryParam = Date.now();
-  // Fetch `index.html.template` from remote CDN
-  const remoteIndexHtmlResponse = await fetch(
-    `${trimTrailingSlash(
-      applicationConfig.env.cdnUrl
-    )}/index.html.template?${randomQueryParam}`
+  const indexHtmlTemplateContent = fs.readFileSync(
+    indexHtmlTemplatePath,
+    'utf8'
   );
-  if (!remoteIndexHtmlResponse.ok) {
-    const rawResponseError = await remoteIndexHtmlResponse.text();
-    const error = new Error(rawResponseError);
-    return Promise.reject(error);
-  }
-  const remoteIndexHtmlContent = await remoteIndexHtmlResponse.text();
-  const interpolatedIndexHtmlContent = replaceHtmlPlaceholders(
-    remoteIndexHtmlContent,
+  const indexHtmlContent = replaceHtmlPlaceholders(
+    indexHtmlTemplateContent,
     applicationConfig.env
   );
   return {
     env: applicationConfig.env,
     headers: compiledHeaders,
-    indexHtmlContent: interpolatedIndexHtmlContent,
+    indexHtmlContent,
   };
 };