Creating a new plugin app

Creating a new plugin app

The first step in creating a new plugin for the DAaaS frontend is to create a new Git repository. You will also need the same tooling as for the parent app specified here

Once you have this then you can run create react app to make a new app and push to you new repo.

To make a new react app with Typescript support run:

npx create-react-app my-app --typescript

Modifying the app to be a plugin

To modify a react app to work as a plugin then the webpack config needs to be modified to change the target to be a library. To do this we need to install react-scripts-rewired; this allows us to modify the webpack config without doing a full blown eject on the react app.

npm install --save-dev react-scripts-rewired

Then add a webpack.config.extend.js to the root of the codebase with the code:

module.exports = (webpackConfig, env, { paths }) => {
  if (env == "production") {
      webpackConfig.output.library = "demo_plugin"
      webpackConfig.output.libraryTarget = "window"

      webpackConfig.output.filename = '[name].js'
      webpackConfig.output.chunkFilename = '[name].chunk.js'

      delete webpackConfig.optimization.splitChunks
      webpackConfig.optimization.runtimeChunk = false
  }

  return webpackConfig
}

where demo_plugin should be changed for the name of your plugin.

Also add a webpackDevServer.config.extend.js file with the contents:

module.exports = (webpackDevServerConfig, env, { paths }) => {
    return webpackDevServerConfig
}

React scripts rewired has slightly older requirements for libraries and some may need to be downgraded; this will very much depend on the version of react-scripts-rewired at the time of making a plugin. Therefore, to work out what to downgrade run npm run build and see what fails due to a library version.

For example, when run for the demo plugin then the following had to be downgraded:

npm install --save-dev [email protected] [email protected] [email protected]