-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add new package for managing application config (#1626)
* feat: add new package for managing application config * refactor(config): improve JSON schema * refactor: further refine JSON schema * refactor(config): add more text examples * refactor(config): reimplement schema, add basic utility functions * refactor(config): remove navbarMenu from schema, implement main build-config function * refactor(config): use TS, improve schema * chore(config): command typo * test(config): for processing config * chore: ignore build folder * fix(config): ignore prettier for generated schema.ts * refactor(config): rename types * refactor(config): simplify env var interpolation using JSON.parse * fix: version script to support build and dist folders * test(config): improve tests setup * test(config): more validation tests * refactor(config): attempt to read revision * chore(config): keep the package private * docs: improve wording Co-authored-by: Tobias Deekens <tobias.deekens@commercetools.com> * refactor(config): rename var * refactor(config): rename config file to custom-application-config * test(config): use inline snapshots for better readability * fix(config): validation order of cloud identifier * refactor(config): do not use async/await * refactor: migrate to new application config (#1633) * refactor: use new application config package to process env and headers * chore: include application config package in changeset config * refactor(config): fall back to load deprecated config * refactor: migrate codebase to use new application config * refactor: migrate leftovers * docs: document migration to the new config * test: fix import * test(config): for deprecated config files * fix(vrt): build app for dev mode * fix(ci): remove unnecessary step * refactor(config): address feedback Co-authored-by: Tobias Deekens <tobias.deekens@commercetools.com>
- Loading branch information
Showing
81 changed files
with
2,176 additions
and
551 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,120 @@ | ||
--- | ||
'merchant-center-application-template-starter': minor | ||
'@commercetools-frontend/application-config': minor | ||
'@commercetools-frontend/application-shell': minor | ||
'@commercetools-frontend/mc-html-template': minor | ||
'@commercetools-frontend/mc-http-server': minor | ||
'@commercetools-frontend/mc-scripts': minor | ||
'playground': minor | ||
'@commercetools-local/visual-testing-app': minor | ||
--- | ||
|
||
This release introduces the usage of a new configuration file format and marks the deprecation of the `env.json` and `headers.json` files. | ||
|
||
> The `env.json` and `headers.json` files will still keep working but they will be removed in the next major release. | ||
The new configuration format aims to drastically simplify how to configure the Custom Application, as well as to make the configuration process less error prone. | ||
In fact, the new configuration file is backed by a JSON schema that is shipped together with the new package. The configuration file is then validated against the JSON schema. | ||
|
||
Furthermore, the new configuration file tries to infer as many required information as possible. | ||
|
||
**Migrate to the new configuration file** | ||
|
||
The new configuration file is a JSON file with one of the following names: | ||
|
||
- `.custom-application-configrc` | ||
- `.custom-application-config.json` | ||
- `custom-application-config.json` | ||
|
||
The file is automatically loaded by the other packages, so you don't need to explicitly specify it in, for example, the `mc-scripts` commands. | ||
|
||
> The file needs to be located in the project root folder. | ||
For example, given the following `env.json` and `headers.json` files: | ||
|
||
```json | ||
{ | ||
"applicationName": "Avengers app", | ||
"frontendHost": "localhost:3001", | ||
"mcApiUrl": "https://mc-api.europe-west1.gcp.commercetools.com", | ||
"location": "gcp-eu", | ||
"env": "development", | ||
"cdnUrl": "http://localhost:3001", | ||
"servedByProxy": false | ||
} | ||
``` | ||
|
||
```json | ||
{ | ||
"csp": { | ||
"script-src": [], | ||
"connect-src": ["mc-api.europe-west1.gcp.commercetools.com"], | ||
"style-src": [] | ||
} | ||
} | ||
``` | ||
|
||
and for production mode `env.prod.json` and `headers.prod.json`: | ||
|
||
```json | ||
{ | ||
"applicationName": "Avengers app", | ||
"frontendHost": "avengers.app", | ||
"mcApiUrl": "https://mc-api.europe-west1.gcp.commercetools.com", | ||
"location": "gcp-eu", | ||
"env": "production", | ||
"cdnUrl": "https://cdn.avengers.app", | ||
"servedByProxy": true | ||
} | ||
``` | ||
|
||
```json | ||
{ | ||
"csp": { | ||
"script-src": ["avengers.app", "cdn.avengers.app"], | ||
"connect-src": [ | ||
"mc-api.europe-west1.gcp.commercetools.com", | ||
"avengers.app", | ||
"cdn.avengers.app" | ||
], | ||
"style-src": ["avengers.app", "cdn.avengers.app"] | ||
} | ||
} | ||
``` | ||
|
||
To migrate them to the new format, add a `custom-application-config.json` (or one of the other file names) with the following content: | ||
|
||
```json | ||
{ | ||
"name": "Avengers app", | ||
"entryPointUriPath": "avengers", | ||
"cloudIdentifier": "gcp-eu", | ||
"env": { | ||
"production": { | ||
"url": "https://avengers.app", | ||
"cdnUrl": "https://cdn.avengers.app" | ||
} | ||
} | ||
} | ||
``` | ||
|
||
That's it! All other values are inferred from the config, like CSP headers, etc. | ||
|
||
> Note that the environment placeholder values `${env:VALUE}` are still working. | ||
**JSON Schema support for VSCode** | ||
|
||
In the VSCode settings (either user settings or workspace settings), reference the schema JSON as described below: | ||
|
||
```json | ||
"json.schemas": [ | ||
{ | ||
"fileMatch": [ | ||
"/.custom-application-configrc", | ||
"/.custom-application-config.json", | ||
"/custom-application-config.json" | ||
], | ||
"url": "https://unpkg.com/@commercetools-frontend/application-config/schema.json" | ||
} | ||
] | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
declare module '@commercetools-uikit/notifications' { | ||
import * as React from 'react'; | ||
import { MessageDescriptor } from 'react-intl'; | ||
|
||
export const version: string; | ||
|
||
// <ContentNotification> | ||
export type ContentNotificationProps = { | ||
type: 'success' | 'info' | 'warning' | 'error'; | ||
children?: React.ReactNode; | ||
intlMessage?: MessageDescriptor; | ||
}; | ||
export const ContentNotification: { | ||
(props: ContentNotificationProps): JSX.Element; | ||
displayName: string; | ||
}; | ||
} |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
application-templates/starter/custom-application-config.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
{ | ||
"name": "Custom Application Template Starter", | ||
"entryPointUriPath": "examples-starter", | ||
"cloudIdentifier": "gcp-eu", | ||
"env": { | ||
"production": { | ||
"url": "https://<your_app_hostname>" | ||
} | ||
} | ||
} |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
build |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
MIT License | ||
|
||
Copyright (c) 2020 commercetools GmbH | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy | ||
of this software and associated documentation files (the "Software"), to deal | ||
in the Software without restriction, including without limitation the rights | ||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
copies of the Software, and to permit persons to whom the Software is | ||
furnished to do so, subject to the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be included in all | ||
copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
SOFTWARE. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
# @commercetools-frontend/application-config | ||
|
||
<p align="center"> | ||
<a href="https://www.npmjs.com/package/@commercetools-frontend/application-config"><img src="https://badgen.net/npm/v/@commercetools-frontend/application-config" alt="Latest release (latest dist-tag)" /></a> <a href="https://www.npmjs.com/package/@commercetools-frontend/application-config"><img src="https://badgen.net/npm/v/@commercetools-frontend/application-config/next" alt="Latest release (next dist-tag)" /></a> <a href="https://bundlephobia.com/result?p=@commercetools-frontend/application-config"><img src="https://badgen.net/bundlephobia/minzip/@commercetools-frontend/application-config" 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> | ||
|
||
This package contains utilities for configuring Custom Applications. | ||
|
||
## Install | ||
|
||
```bash | ||
$ npm install --save @commercetools-frontend/application-config | ||
``` | ||
|
||
## Configuration format | ||
|
||
A Custom Application must be configured with a single JSON configuration file. The file name can be one of: | ||
|
||
- `.custom-application-configrc` | ||
- `.custom-application-config.json` | ||
- `custom-application-config.json` | ||
|
||
The file is automatically loaded, as long as it is found in the project's root folder. For that, the package uses the [cosmiconfig](https://www.npmjs.com/package/cosmiconfig) library. | ||
|
||
The configuration file is in the format of a JSON schema that is also part of this package. The configuration file itself is validated when starting the Custom Application against the JSON schema. | ||
|
||
By default the configuration file uses the `NODE_ENV` variable to determine which configuration to use. This can be overridden by using the custom environment variable `MC_APP_ENV`. | ||
|
||
In the [test fixtures](./test/fixtures) folder you can see some examples of configuration. | ||
|
||
### JSON Schema | ||
|
||
To enable JSON schema validation for the Custom Application configuration, you can add a reference as a URL to the `schema.json` file provided in this package. | ||
|
||
**Example setup for VSCode** | ||
|
||
In the VSCode settings (either user settings or workspace settings), reference the schema JSON as described below: | ||
|
||
```json | ||
"json.schemas": [ | ||
{ | ||
"fileMatch": [ | ||
"/.custom-application-configrc", | ||
"/.custom-application-config.json", | ||
"/custom-application-config.json" | ||
], | ||
"url": "https://unpkg.com/@commercetools-frontend/application-config/schema.json" | ||
} | ||
] | ||
``` |
Oops, something went wrong.
728024c
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.
Successfully deployed to following URLs: