e2006b2ff7
This commit integrates Mock Service Worker into the browser. This will allow us to use MSW to mock network requests at the API level from a browser using the same MSW fixtures that we are currently using for our testing. This means we will be able to have the same environment for debugging, development, and testing if desired. To develop using MSW, the developer will now use `npm run stage-beta:msw`. The dev server will start as normal, but now any request made that has a corresponding fixture will be intercepted and the fixture used to generate the response. This adds an MSW=TRUE environment variable to the run script. When this environment variable is present, the dev webpack config will copy mockServiceWorker.js into the build directory (/dist) using CopyPlugin and will add some necessary headers to the dev server's responses using DefinePlugin.
91 lines
2.7 KiB
JavaScript
91 lines
2.7 KiB
JavaScript
const { resolve } = require('path');
|
|
|
|
const config = require('@redhat-cloud-services/frontend-components-config');
|
|
const CopyPlugin = require('copy-webpack-plugin');
|
|
const webpack = require('webpack');
|
|
|
|
const webpackProxy = {
|
|
useProxy: true,
|
|
proxyVerbose: true,
|
|
env: `${process.env.STAGE ? 'stage' : 'prod'}-${
|
|
process.env.BETA ? 'beta' : 'stable'
|
|
}`,
|
|
appUrl: [
|
|
'/insights/image-builder',
|
|
'/beta/insights/image-builder',
|
|
'/preview/insights/image-builder',
|
|
],
|
|
};
|
|
|
|
const { config: webpackConfig, plugins } = config({
|
|
rootFolder: resolve(__dirname, '../'),
|
|
debug: true,
|
|
useFileHash: false,
|
|
sassPrefix: '.imageBuilder',
|
|
deployment: process.env.BETA ? 'beta/apps' : 'apps',
|
|
...(process.env.PROXY ? webpackProxy : {}),
|
|
});
|
|
|
|
plugins.push(
|
|
require('@redhat-cloud-services/frontend-components-config/federated-modules')(
|
|
{
|
|
root: resolve(__dirname, '../'),
|
|
useFileHash: false,
|
|
exposes: {
|
|
'./RootApp': resolve(__dirname, '../src/AppEntry.js'),
|
|
},
|
|
shared: [{ 'react-router-dom': { singleton: true } }],
|
|
exclude: ['react-router-dom'],
|
|
}
|
|
)
|
|
);
|
|
|
|
if (process.env.MSW) {
|
|
// Copy mockServiceWorker.js to ./dist/ so it is served with the bundle
|
|
plugins.push(
|
|
new CopyPlugin({
|
|
patterns: [
|
|
{ from: 'src/mockServiceWorker.js', to: 'mockServiceWorker.js' },
|
|
],
|
|
})
|
|
);
|
|
|
|
/*
|
|
mockServiceWorker.js will be served from /beta/apps/image-builder, which
|
|
will become its default scope. Setting the Service-Worker-Allowed header to
|
|
'/' allows the worker's scope to be expanded to the root route '/'.
|
|
|
|
The default webpackConfig for stage does not contain any headers.
|
|
|
|
Caution: The default webpackConfig for prod *does* contain headers, so this
|
|
code will need to be modified if using MSW in prod-beta or prod-stable so that
|
|
those headers are not overwritten.
|
|
*/
|
|
webpackConfig.devServer.headers = { 'Service-Worker-Allowed': '/' };
|
|
|
|
/*
|
|
We would like the client to be able to determine whether or not to start
|
|
the service worker at run time based on the value of process.env.MSW. We can
|
|
add that variable to process.env via the DefinesPlugin plugin, but
|
|
DefinePlugin has already been added by config() to the default webpackConfig.
|
|
|
|
Therefore, we find it in the `plugins` array based on its type, then update
|
|
it to add our new process.env.MSW variable.
|
|
*/
|
|
const definePluginIndex = plugins.findIndex(
|
|
(plugin) => plugin instanceof webpack.DefinePlugin
|
|
);
|
|
const definePlugin = plugins[definePluginIndex];
|
|
|
|
const newDefinePlugin = new webpack.DefinePlugin({
|
|
...definePlugin.definitions,
|
|
'process.env.MSW': true,
|
|
});
|
|
|
|
plugins[definePluginIndex] = newDefinePlugin;
|
|
}
|
|
|
|
module.exports = {
|
|
...webpackConfig,
|
|
plugins,
|
|
};
|