Skip to main content

Reference: Workflow Configuration

Features

  • Files placed in project/app/static will automatically get copied to the build directory. This can be useful when an application needs to reference static documents like images and PDFs without having to import them using Webpack. The files would be accessible through the path static relative to the application.
  • A global variable APP_VERSION is written to javascript bundle that can be used to determine the version of the application that was deployed. Open up the browser debugger and type APP_VERSION.
  • Hook into Jest setupFiles by adding jest.setup.js at the root of your project

Configuration

workflow can be configured using a javascript or yaml configuration file called workflow.js or workflow.yml. workflow.js or workflow.yml lives in <application_root>/project/config/workflow.js

Example:

module.exports = {
development: {
notification: true
hot: true
},
app: {
title: 'My Awesome App'
}
mock: {
latency: 300,
port: 9999
},
proxies: [
{
context: '/api',
target: `http://localhost:9999`,
enabled: true,
logLevel: 'info',
pathRewrite: {
'^/api': ''
},
headers: {
RemoteUser: 'janedoe'
}
}
]
}

workflow can also be configured using package.json:

{
"name": "foo",
"availityWorkflow": {
development: {
notification: true
hot: true
},
"app": {
"title": "My Awesome App"
}
}
}

If workflow.js exports a function it can be used to override properties from the default configuration. The function must return a configuration.

function merge(config) {
config.development.open = '#/foo';
return config;
}

module.exports = merge;

Options

development.open

Opens the url in the default browser

development.notification

Webpack build status system notifications

notification

development.host

Webpack dev server host

development.port

Webpack dev server port. If the port at this value is unavailable, the port value will be incremented until an unused port is found. Default: 3000

development.logLevel

Allows Webpack log levels presets to be used during development. A custom logger is used by default.

development.sourceMap

Webpack devtool setting. Default is source-map. For more options please see https://webpack.js.org/configuration/devtool/#devtool.

development.hotLoader

Enable or disable react-hot-loader. Default is true.

Can also be an object to enable experimental react-refresh features ex.

{
"hotLoader": {
"enabled": true,
"experimental": true
}
}

development.webpackDevServer

Caution: Please be careful when overriding defaults

Optional options for Webpack development server. If undefined, workflow defaults are used. Please see https://webpack.js.org/configuration/dev-server/#devserver for all available options.

development.targets

Allows developers to override the babel-preset-env target to match their developer environment. This is beneficial if a developer is doing their primary development environment in a browser like Chrome 57+ that already supports a lot of the ES6 features, therefore, not needing to Babelfy code completely.

This setting is is only used for development and does not effect staging/production/testing builds which use browserslist defaults. @See https://github.com/babel/babel-preset-env

Examples:

targets: {
browsers: ['last 2 Chrome versions'];
}
targets: {
chrome: 57;
}

development.babelInclude

Include additional packages from node_modules that should be compiled by Babel and Wepback. The default is to compile all packages that are prefixed with @av/

development.jestOverrides

Customize any available jest configuration option. See https://jestjs.io/docs/configuration#reference for list of configuration options. Uses lodash merge to deeply merge user config object with defaults.

Ex::

{
collectCoverageFrom: ['project/app/**/*.{js,jsx,ts,tsx}', '!project/app/**/*.d.ts'],
coveragePathIgnorePatterns: ['/node_modules/', '/coverage/', '/dist/', '/types'],
}

app.title

Page title to use for the generated HTML document. Default is Availity.

<html>
<head>
<title>Availity</title>
</head>
</html>

globals

Create globals to be used for feature flags. Globals must be defined in the workflow configuration file before they can be used as flags by a project.

globals: {
BROWSER_SUPPORTS_HTML5: true,
EXPERIMENTAL_FEATURE: false
}

Once declared, override the default flag values from the command line .

Ex:

EXPERIMENTAL_FEATURE=true npm run production

By default, the following feature flags are enabled:

  • __DEV__: true when process.env.NODE_ENV is development
  • __TEST__: true when process.env.NODE_ENV is test
  • __PROD__: true when process.env.NODE_ENV is production
  • __STAGING__: true when process.env.NODE_ENV is staging
  • process.env.NODE_ENV: is development, test, staging or production accordingly.

eslint-config-availity@2.1.0 or higher is needed for the default feature toggles to be recognized as valid globals by eslint.

mock.enabled

Enables or disables mock server. Default is true.

mock.port

Mock server port number. If the port is unavailable, a random available port will be used.

Note: we will automatically update the proxy settings to reflect the port used in the case of a random port being selected.

mock.latency

Sets default latency for all mock responses

mock.data

Folder that contains the mock data files (json, images, etc). Defaults to project/data.

mock.path

Path to route configuration file used by Mock server to build Express routes. Defaults to project/config/routes.json.

mock.plugins

Array of NPM module names that enhance mock server with additional data and routes. @See https://github.com/Availity/@availity/mock-data

mock.pluginContext

Pass URL context information to mock responses so that HATEOS links traverse correctly. Defaults to http://localhost:{development.port}/api

proxies

Array of proxy configurations. A default configuration is enabled to proxy requests to the mock server. Each proxy configuration can have the following attributes.

  • context: URL context used to match the activation of the proxy per request.

Ex::

context: '/api';
  • target: Host and port number for proxy.
  • enabled: Enables or disables a proxy configuration
  • pathRewrite: (Optional) Rewrites (using regex) the path before sending request to proxy target.

Ex:

pathRewrite: {
'^/api': ''
}
  • contextRewrite: (Optional) Does not work with multiple proxy contexts. When true:

    • Rewrites the Origin and Referer headers from host to match the the proxy target url.
    • Rewrites the Location header from proxy to the host url.
    • Rewrites any urls of the response body (JSON only) to match the url of the host. Only URLs that match the proxy target are rewritten. This feature is useful if the proxy server sends back HATEOS links that need to work on the host. The proxy context is automatically appended to the host url if missing the a URL response.
  • headers: (Optional) Send default headers to the proxy destination.

Ex::

headers: {
RemoteUser: 'janedoe';
}

modifyWebpackConfig

A function which, when provided, can be used to enhance/override or replace the webpack configuration used. The function will be invoked with the current webpack configuration object and a reference to the workflow settings.

Ex:

modifyWebpackConfig: (webpackConfig, settings) => {
// Add Subresource Integrity (SRI) security feature
webpackConfig.output = { crossOriginLoading: 'anonymous' };
// Note: SriPlugin would be imported in your workflow.js to be referenced here
webpackConfig.plugins.push(
new SriPlugin({
hashFuncNames: ['sha256', 'sha384'],
// only enable it for non-development builds
enabled: !settings.isDevelopment()
})
);
return webpackConfig;
};

FAQ

How to integrate with Visual Studio Code's Jest plugin?

Create ./vscode/settings.json file with the following configuration:

{
"jest.pathToJest": "node_modules/.bin/av test"
}

Note: The Jest plugin will still warn about Jest 20+ features missing but it doesn't appear to affect the plugins's functionality

If you would like to debug Jest tests, create ./vscode/launch.json with this configuration:

{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"name": "vscode-jest-tests",
"request": "launch",
"program": "${workspaceRoot}/node_modules/.bin/av",
"args": ["test", "--runInBand"],
"cwd": "${workspaceFolder}",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}

Then you will be able to debug Jest tests like this:

Jest Debugging Example

How to setup a development environment to match the deployment environment?

Update workflow.js using the configuration below:

module.exports = (config) => {
config.proxies = [
{
context: ['/api/**', '/ms/**', '!/api/v1/proxy/healthplan/**'],
target: 'http://localhost:9999',
enabled: true,
logLevel: 'debug',
pathRewrite: {
'^/api': ''
}
},
{
context: ['/api/v1/proxy/healthplan/some/mock/path'],
target: 'http://localhost:9999',
enabled: true,
logLevel: 'debug',
pathRewrite: {
'^/api': ''
}
},
{
context: ['/api/v1/proxy/healthplan/**'],
target: 'http://localhost:8888',
enabled: true,
logLevel: 'debug',
pathRewrite: {
'^/api/v1/proxy/healthplan/': ''
}
}
];
return config;
};

The configuration above does the following:

  • Proxy requests starting with /ms or /api to the mock server but not paths that haves segments /api/v1/proxy/healthplan/. This configuration allows the Availity API to be simulated from mock server.
  • Proxy requests with path /api/v1/proxy/healthplan/some/mock/path to the mock server. Optional configuration that is useful if an API is not available for use and needs to be mocked.
  • Proxy all requests with path segments /api/v1/proxy/healthplan/ to the configured target 'http://localhost:8888'. Notice the URL is being rewritten. Change the rewrite path to match your local path as needed. This configuration is useful when testing against live services.