A while ago I wrote about creating a React front end for Business Central.
In this post I used a fairly simple single web page example where the front end loads the entire React library. Quick and easy but not ideal for production deployment. What we really need is a compiler that will create an optimal build specifically for our app. Like for instance this Tic Tac Toe example.
We will end up with a compiler error like this one:
Line 177:3: 'Microsoft' is not defined no-undef
We can remedy this by adding a comment line that will tell the compiler to ignore any warnings:
// eslint-disable-next-line Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("ControlReady", );
Now we can run the NPM build that will create our optimized production scripts. All the scripts will end up inside the build\static\js folder.
There are two things you can do to add these js files to your extension. You can simply copy them to your extension folder or you can host them elsewhere. For my dev projects I just copy them to my extension. I’m sure that with some clever build scripts this can be easier but that is a story for another day.
Once the scripts are in my extension I can call them from my Control Add-In. Obviously you can do the same with the css files.
Scripts = 'Scripts/2.2694cafb.chunk.js', 'Scripts/main.09a9684e.chunk.js'; StartupScript = 'Scripts/runtime-main.0f79e1cd.js'; StyleSheets = 'CSS/2.c0fa1c84.chunk.css', 'CSS/main.34de6062.chunk.css';
Any React app always has a runtime-main js file. This is the JavaScipt that goes on your main index.html and contains the code that will call all other scripts. Remember, you can’t host the startupscript, that needs to be present inside your extension.