How to create an optimized React build for Business Central

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.

The first thing you need to address is the fact that the compiler cannot recognize our Microsoft.Dynamics.NAV JavaScript functions. If we tried to compile this:

Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("ControlReady", []);

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", []);

Another thing we need to do is to rename the root div in the public\index.html and in your JavaScript to controlAddIn. That will cause your React components to be attached to the controlAddIn div inside your Control Add-In .

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.

Photo by Markus Spiske on Unsplash