Integrate @elsa-workflows/elsa-workflows-studio into React App

[JinHe-PerkinElmer]

Record the process of integrating Elsa V2 into React APP.

1. install "@elsa-workflows/elsa-workflows-studio": "^2.12.0" to my project.
2. import defineCustomElements from loader and define custome elements inside index.jsx.
   import { defineCustomElements, applyPolyfills } from '@elsa-workflows/elsa-workflows-studio/loader';
import 'monaco-editor/min/vs/loader';
import '@elsa-workflows/elsa-workflows-studio/dist/elsa-workflows-studio/elsa-workflows-studio.css';
applyPolyfills().then(() => { defineCustomElements(window); });
   Because @elsa-workflows/elsa-workflows-studio built with stenciljs. Need to do some transformations in react. https://stenciljs.com/docs/react
3. Solved most of the webpack packaging errors(add necessary babel plugins, eject react app if necessary):
   { test: /\.(js|mjs)$/, exclude: /@babel(?:\/|\\{1,2})runtime/, loader: require.resolve('babel-loader'), options: { babelrc: false, configFile: false, compact: false, presets: [ [ require.resolve('babel-preset-react-app/dependencies'), { helpers: true }, ], { plugins: [ '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-optional-chaining', ], }, ], cacheDirectory: true, cacheCompression: isEnvProduction, sourceMaps: false, }, },
4. Use workflow according to the official document recommended usage.
   <elsa-studio-root serverUrl="Your_Server_Url" monacoLibPath="your_monacoLibPath"> <elsa-studio-dashboard /> </elsa-studio-root>
   In this way, Elsa can be used in the react app. But there are still some problems: Unfortunately, Elsa studio does not use css module. the imported css of Elsa will affect the style of antd input/dropdown, which needs to be processed manually.
   Of course, if you want to see the effect, you need to start the service in the background, or start the service yourself locally.

[sfmskywalker]

Amazing, thank you for sharing this much-asked for information @JinHe-PerkinElmer ! 🙌🏻

[JinHe-PerkinElmer]

That's all right, technology should be shared, and thank you very much Elsa team.