Creating Webresources with React

In this first part of the two part guide for Webresources with React & Fiddler we’re diving into why creating webresources with React in MS Dynamics CRM is a must try. The second part is about debugging the webresource we just created with Fiddler. With React it is easy keeping your CRM style on point and maintenance low. Let’s break it down and level up your Dynamics CRM game!

Creating the React App

First, make sure you have Node.js installed, to create React apps via the command line. Once installed, we can start by creating the React app with the TypeScript template using this command:

npx create-react-app my-app --template typescript

For the sake of easier traceability, we’re going to use my-app as the app name and use it throughout the whole tutorial.

This command will setup the React app with TypeScript and install all required npm packages. Once the installation process is finished, we can open the project folder with our IDE. In this tutorial we’re using Visual Studio Code, as it is free and offers the needed functionality.

Configuring the React App for Webresources

After opening the project, we can install a npm package via the Visual Studio Code terminal using:

npm install react-app-rewired save-dev

This command installs react-app-rewired, which we are using to build the project in a way it is deployable to Dynamics CRM. A normal build would result in chunked files, which file names change every build. This would make it near impossible for us to deploy the files. Therefor, we are using react-app-rewired to specify the wanted build behavior.
The first step for this is to create a new file called config-overrides.js in our my-app folder with this content:

module.exports = {
    webpack: function (config, env) {
        if (env === 'production') {
            config.optimization.runtimeChunk = false;
            config.optimization.splitChunks = {
                cacheGroups: {
                    default: false,
                },
            };

            //JS Overrided
            config.output.filename = 'js/my-app.js';
            config.output.chunkFilename = 'js/my-app.chunk.js';

            //CSS Overrided
            config.plugins[5].options.filename = 'css/my-app.css';
            config.plugins[5].options.chunkFilename = 'css/my-app.chunk.css';
        }

        return config;
    }
}

This config overwrites the standard webpack build configuration and generate only the files specified.

To make the build process more convenient, we’re now editing the package.json file. To run the react-app-rewired build command via the standard npm command, we just need to change the scripts section:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},

Since we are already editing the package.json file, we are adding one more line to the file:

"homepage": ".",

This line specifies the base URL for when the app is deployed. Since we want to run it in our Dynamics CRM System, we need to make sure that it runs on a subdirectory on a server as it will be the case once deployed.

Now we can build the project using the following command:

npm run build

Once the build is complete, we can see the generated files in the build folder. This folder contains an index.html file, a few extra files from the standard React project, a folder for CSS files and a folder for JavaScript files.

Since I don’t need all the extra files, I’m simply going to delete them. After deleting the files, there is only the index.html file left in the public folder and in the src folder only the App.css, App.tsx, index.tsx and react-app-env.d.ts files are left. Of course, after deleting the files, we also need to clean up the code referencing those files. This must be done in the index.html, App.tsx and index.tsx files. After fixing all issues we can rebuild the app and continue with how to deploy the app.

Deployment of the React Webresource

We need to deploy three files from the build folder for the app to work in the Dynamics CRM: index.html, my-app.css and my-app.js. We need to consider the folder structure of the build folder when choosing the names of the files in the Dynamics CRM. So when choosing to publish the index.html file as new_/webresources/my-app/index.html we need to deploy the CSS file as new_/webresources/my-app/css/my-app.css and the JavaScript file as new_/webresources/my-app/js/my-app.js.

After deploying the files, the index.html file can be called to run the app in your Dynamics CRM System. That’s it! Creating webresources with React for MS Dynamics CRM is really that easy!