We have Spring boot react based application (JHipster) which has many user interfaces along with default entities user interface. For our application we want to provide form builder which will be used to generate user defined forms. These user defined forms can be complex in nature and will have its own set of hooks and validations. And for the numbers there can be N number of forms to be created.
Our main react application would be precompiled and will be available to the users who will be building custom forms as per their requirement using form builder. We want to host these forms as part of our react application but dont want to rebuild our main react application.
As per my understanding there are two possible solutions for this,
- Json based form render
- Module Federation
Both the above approaches has their own flaws,
Json based form render will take some of the freedom in terms of form and its handling. Or json itself will go complex and debug will be difficult.
Module Federation on the other hand requires additional handling of two different application running on different ports but provides seamless single application experience. It will be over engineering to handle module federation for our in house application which is simple in nature.
Our form builder can be extended to spit out compiled version of forms or raw jsx based react forms. These form files can be copied over to our main react application sub folder to be used based on mapping of forms.
Is there any simpler way available for this ?
UPDATE
I have tried below approach to load bundle form through script loading and form rendering is working.
Below is App.js of my main application consider that all the forms mapping will be coming up dynamically and forms list will be loaded based on that. Form mapping will have form name, label, form script url and form data input variables. All the forms will be hosted on same site in sub folder called "forms" and under it there will be different forms in their corresponding folder.
import React, { useEffect, useState } from 'react';
function App() {
const [ChildBundle, setChildBundle] = useState(null);
const loadForm = (fm) =>{
const script = document.createElement('script');
script.src = '/forms/' + fm +'/bundle.js';
script.async = true;
script.onload = () => {
setChildBundle(window.ChildBundle);
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}
if (!ChildBundle) {
return (
<div>
<ul>
<li onClick={() => loadForm("Form1")}>Form1 </li>
<li onClick={() => loadForm("Form2")}>Form2 </li>
</ul>
</div>
);
}
return <ChildBundle />;
}
export default App;
Form1 and Form2 have simple html in it but will have more code to it later on. Clicking on any of the form list above it will render below UI.
Below is Form1 for reference, both forms are same except name Form1 Form2.
import React, { useState, useEffect } from "react";
const Form1 = () => {
return (
<div>
<h2>This is a Form1 Component</h2>
</div>
);
}
export default Form1;
Below is webpack to build Form1 into bundle.js which will be hosted as forms/Form1/bundle.js.
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/forms/Form1/index.js',
output: {
path: path.resolve(__dirname, 'dist/forms/Form1'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.(sa|sc|c)ss$/, // styles files
use: ["style-loader", "css-loader", "sass-loader"],
}
],
},
};
Additionally below is index.js which is entry point for form1,
import React from 'react';
import { createRoot } from 'react-dom/client';
import ReactDOM from 'react-dom';
import Form1 from './Form1';
const container = document.getElementById('taskForm');
const root = createRoot(container);
root.render(<Form1 />);
I am not sure what kind of problem I will get into with above approach.
I still need to work on mapping hooks in the component for mostly submit and validation + passing data to component to render in the form.
In above approach loaded component is not be available in the react context or I am not able to call it properly.
UPDATE 2
For now I am trying Remote Component, I have tried it before but for me it was not working due to configuration issues. I am using this example for now and testing out few things with it.