-
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.
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
- Loading branch information
Showing
59 changed files
with
779 additions
and
571 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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -48,5 +48,3 @@ In the VSCode settings (either user settings or workspace settings), reference t | |
} | ||
] | ||
``` | ||
|
||
## API |
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 |
---|---|---|
@@ -1,2 +1 @@ | ||
export { default as processConfig } from './process-config'; | ||
export { default as validateConfig } from './validate-config'; |
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,71 @@ | ||
import type { CspDirective } from './schema'; | ||
import type { ApplicationConfig } from './types'; | ||
|
||
import fs from 'fs'; | ||
import substituteEnvVariablePlaceholders from './substitute-env-variable-placeholders'; | ||
import { parseJsonFile } from './utils'; | ||
|
||
export type DeprecatedOptions = { | ||
envPath: string; | ||
headersPath: string; | ||
cspPath?: string; | ||
}; | ||
|
||
// List the required fields of `env.json` | ||
const requiredEnvJsonFields = [ | ||
'applicationName', | ||
'frontendHost', | ||
'mcApiUrl', | ||
'location', | ||
'env', | ||
'cdnUrl', | ||
]; | ||
|
||
// For backwards compatibility, we still support the `env.json` and `headers.json` files. | ||
// TODO: remove in `v17`. | ||
const loadDeprecatedConfig = ( | ||
options: DeprecatedOptions | ||
): ApplicationConfig | undefined => { | ||
const hasEnvJson = fs.existsSync(options.envPath); | ||
|
||
if (!hasEnvJson) return; | ||
|
||
const hasHeadersJson = fs.existsSync(options.headersPath); | ||
const hasCspJson = Boolean(options.cspPath && fs.existsSync(options.cspPath)); | ||
const shouldUseDeprecatedCspJson = hasCspJson && !hasHeadersJson; | ||
|
||
const loadedEnvJson = parseJsonFile<ApplicationConfig['env']>( | ||
options.envPath | ||
); | ||
// Validate required fields | ||
requiredEnvJsonFields.forEach((key) => { | ||
const hasKey = Object.prototype.hasOwnProperty.call(loadedEnvJson, key); | ||
if (!hasKey) { | ||
throw new Error( | ||
`Missing '${key}' required configuration field. ${loadedEnvJson}` | ||
); | ||
} | ||
}); | ||
const env = substituteEnvVariablePlaceholders(loadedEnvJson); | ||
|
||
// Parse headers from `headers.json` (or the already deprecated `csp.json`). | ||
if (shouldUseDeprecatedCspJson) { | ||
const loadedCspJson = parseJsonFile<{ | ||
'connect-src': CspDirective; | ||
'font-src'?: CspDirective; | ||
'img-src'?: CspDirective; | ||
'script-src'?: CspDirective; | ||
'style-src'?: CspDirective; | ||
}>(options.cspPath as string); | ||
const cspHeaders = substituteEnvVariablePlaceholders(loadedCspJson); | ||
return { env, headers: { csp: cspHeaders } }; | ||
} | ||
|
||
const loadedHeadersJson = parseJsonFile<ApplicationConfig['headers']>( | ||
options.headersPath | ||
); | ||
const headers = substituteEnvVariablePlaceholders(loadedHeadersJson); | ||
return { env, headers }; | ||
}; | ||
|
||
export default loadDeprecatedConfig; |
Oops, something went wrong.