-
Notifications
You must be signed in to change notification settings - Fork 27
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Breaking] refactor: drop mc-http-server, make --use-local-assets the default behavior #1787
Changes from 6 commits
0e4b50c
7a49f10
d0a04ec
bd5e232
1f178b2
09d74f7
514e619
13b9f67
8faf3b3
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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 like [serve](https://www.npmjs.com/package/serve), or any other static server (it does not even have to be Node.js). | ||
|
||
For example, to start the Custom Application locally in production mode: | ||
|
||
```console | ||
NODE_ENV=production MC_APP_ENV=development dotenv -- \ | ||
mc-scripts compile-html \ | ||
--transformer @commercetools-frontend/mc-dev-authentication/transformer-local.js | ||
|
||
NODE_ENV=production npx serve -l 3001 public | ||
``` |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is turning out to be pretty nice. The This way, everything is still static and we can start the app in production mode locally. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What is also nice is that we can reference npm packages/modules.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is also a bit related to #1733. |
||
"start:prod:local": "yarn compile-html:local && NODE_ENV=production npx serve -l 3001 public", | ||
"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,12 @@ | |
}, | ||
"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" | ||
"jest": "26.5.0", | ||
"serve": "11.3.2" | ||
} | ||
} | ||
} |
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' | ||
); | ||
}; |
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, | ||
}; | ||
}; |
This file was deleted.
This file was deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is just added for convenience.