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

About the Author René Brummel

My driving force is the will to learn. Every day brings its unique challenges, my goal is to rise to each challenge and learn from it. My professional expertise is the streamlining and optimization of business processes. My experience ranges from software development (I know AL, C/AL, C#, .NET, JavaScript, ReactJS etc) and implementation to business processes optimization, project management, training, and coaching. At the heart of what I do lies my vision, “sustainable change comes from conscious choice, made out of free will”.

2 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: