-
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 all 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 |
---|---|---|
@@ -1,5 +1,4 @@ | ||
--- | ||
'@commercetools-frontend/mc-http-server': patch | ||
'@commercetools-website/custom-applications': patch | ||
--- | ||
|
||
|
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 | ||
``` |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -18,3 +18,4 @@ dotenv | |
Vercel | ||
changelogs | ||
commercetools | ||
Intl |
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", | ||
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 just added for convenience. |
||
"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 && 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" | ||
} | ||
} | ||
} |
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.
I forgot that we need to serve the files as a SPA.
The
serve
package has a--single
option that does that but then we loose the routes for the login/logout pages.Therefore I decided to add a new
serve
command tomc-scripts
, so that we can customize the rewrite routes.A
serve
command is something that is also used in other tools, like Gatsby.In our case the
mc-scripts serve
command starts an HTTP server to serve the files in thepublic
folder. The main use case for this is to start the Custom Application locally to test the production bundles.