Skip to content

Commit

Permalink
[Breaking] refactor: drop mc-http-server, make --use-local-assets the…
Browse files Browse the repository at this point in the history
… default behavior (#1787)

* refactor: drop mc-http-server, make --use-local-assets the default behavior

* fix: ports

* docs: remove references to http-server

* docs: keep old pages path but link to other documents

* docs: changeset

* fix: use transformer-local for starting app locally in production mode with login and logout dev pages

* fix(website): links

* refactor: add mc-scripts serve command to serve the production-built custom application locally

* chore: remove refs to mc-http-server
  • Loading branch information
emmenko committed Oct 13, 2020
1 parent c1b34f4 commit 633d8c7
Show file tree
Hide file tree
Showing 42 changed files with 285 additions and 1,199 deletions.
1 change: 0 additions & 1 deletion .changeset/good-items-lay.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
---

Expand Down
2 changes: 1 addition & 1 deletion .changeset/lemon-radios-travel.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
1 change: 0 additions & 1 deletion .changeset/loud-hounds-explain.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
---
'@commercetools-frontend/mc-http-server': patch
'@commercetools-website/custom-applications': patch
---

Expand Down
30 changes: 30 additions & 0 deletions .changeset/poor-avocados-act.md
Original file line number Diff line number Diff line change
@@ -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
```
18 changes: 18 additions & 0 deletions .changeset/wet-badgers-speak.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
'merchant-center-application-template-starter': patch
'@commercetools-backend/loggers': patch
'@commercetools-frontend/application-components': patch
'@commercetools-frontend/application-shell': patch
'@commercetools-frontend/i18n': patch
'@commercetools-frontend/jest-preset-mc-app': patch
'@commercetools-frontend/mc-scripts': patch
'@commercetools-frontend/react-notifications': patch
'@commercetools-frontend/sdk': patch
'@commercetools-frontend/sentry': patch
'playground': patch
'@commercetools-local/visual-testing-app': patch
'@commercetools-website/custom-applications': patch
'@commercetools-website/components-playground': patch
---

update deps
1 change: 0 additions & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -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/*
Original file line number Diff line number Diff line change
Expand Up @@ -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**
Expand Down
49 changes: 0 additions & 49 deletions .github/workflows/publish-cloud-registry.yml

This file was deleted.

1 change: 1 addition & 0 deletions .vscode/spellright.dict
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,4 @@ dotenv
Vercel
changelogs
commercetools
Intl
8 changes: 5 additions & 3 deletions application-templates/starter/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -19,7 +21,6 @@
"@commercetools-frontend/application-shell": "16.18.2",
"@commercetools-frontend/assets": "16.15.3",
"@commercetools-frontend/i18n": "16.18.0",
"@commercetools-frontend/mc-http-server": "16.18.0",
"@commercetools-frontend/permissions": "16.18.0",
"@commercetools-uikit/flat-button": "10.36.0",
"@commercetools-uikit/icons": "10.33.0",
Expand All @@ -36,10 +37,11 @@
},
"devDependencies": {
"@commercetools-frontend/jest-preset-mc-app": "16.18.0",
"@commercetools-frontend/mc-dev-authentication": "16.15.2",
"@commercetools-frontend/mc-scripts": "16.18.0",
"@testing-library/react": "11.0.4",
"dotenv-cli": "4.0.0",
"enzyme": "3.11.0",
"jest": "26.5.0"
}
}
}
2 changes: 1 addition & 1 deletion packages/mc-dev-authentication/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion packages/mc-dev-authentication/package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
49 changes: 49 additions & 0 deletions packages/mc-dev-authentication/transformer-local.js
Original file line number Diff line number Diff line change
@@ -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'
);
};
1 change: 0 additions & 1 deletion packages/mc-html-template/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
57 changes: 7 additions & 50 deletions packages/mc-html-template/src/compile-html.js
Original file line number Diff line number Diff line change
@@ -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,
};
};
10 changes: 0 additions & 10 deletions packages/mc-http-server/.dockerignore

This file was deleted.

1 change: 0 additions & 1 deletion packages/mc-http-server/.gitignore

This file was deleted.

Loading

0 comments on commit 633d8c7

Please sign in to comment.