" MicromOne: Building a React Web Resource for Microsoft Dynamics 365 CRM with React App Rewired

Pagine

Building a React Web Resource for Microsoft Dynamics 365 CRM with React App Rewired

Modernizing the user experience in Microsoft Dynamics 365 CRM often means bringing modern frontend technologies into an established platform. While Power Apps Component Framework (PCF) is Microsoft's recommended approach for many scenarios, traditional Web Resources remain an excellent option for complex pages, dialogs, preview screens, and standalone applications.

In this article, we'll build a React-based Web Resource using Create React App and React App Rewired, customize the build output for Dynamics 365, and discuss when a Web Resource is a better choice than a PCF component.

Why Use React for Dynamics 365?

React offers several advantages when developing custom interfaces for Dynamics 365:

  • Component-based architecture

  • Excellent TypeScript support

  • Large ecosystem

  • Easy state management

  • Rich UI libraries such as Fluent UI

  • Easy integration with REST APIs and Dataverse Web API

Instead of writing plain HTML and JavaScript, React allows you to organize your application into reusable components that are easier to maintain.

Project Structure

A typical project uses Create React App together with React App Rewired.

Example dependencies:

  • React 19

  • TypeScript

  • Fluent UI React Components

  • React App Rewired

  • Xrm Type Definitions

The package configuration includes scripts like:

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

Using React App Rewired allows customization of the webpack configuration without ejecting from Create React App.

Why Customize the Build?

Dynamics 365 Web Resources expect predictable file names.

The default Create React App build generates hashed filenames such as:

main.84af73.js
main.27aa5.css

These change with every build, making deployment inconvenient.

Instead, we configure webpack to produce fixed names like:

dps_contentpreview.js
dps_contentpreview.chunk.js
css/main.css

This makes importing Web Resources into Dynamics much easier.

Customizing the Output Folder

The first customization changes the build destination.

paths.appBuild = paths.appBuild.replace(
    "build",
    "../../dps_/pages/dps_contentpreview"
);

Instead of generating a local build folder, the compiled files are copied directly into the Dynamics solution folder.

This saves an extra copy step during development.

Customizing JavaScript Output

Webpack normally creates hashed bundles.

We override them:

config.output.filename = "dps_contentpreview.js";
config.output.chunkFilename = "dps_contentpreview.chunk.js";

Benefits include:

  • predictable deployment

  • easier solution packaging

  • no need to update Web Resource references after every build

Customizing CSS Output

The same principle applies to CSS.

config.plugins[5].options.filename = "css/[name].css";
config.plugins[5].options.moduleFilename = "css/[name].chunk.css";

Keeping CSS files stable simplifies deployment and version control.

Using Fluent UI

This project uses Fluent UI v9.

"@fluentui/react-components"

Fluent UI provides components that closely match Microsoft's design language, resulting in interfaces that feel native inside Dynamics 365.

Examples include:

  • Buttons

  • Dialogs

  • Tables

  • Cards

  • Tooltips

  • Inputs

  • Dropdowns

TypeScript Support

Using TypeScript greatly improves development.

Benefits include:

  • IntelliSense

  • Compile-time error checking

  • Better refactoring

  • Strong typing for Dynamics APIs

Adding:

"@types/xrm"

provides typing for the Xrm namespace, making interactions with the Dynamics client API much safer.

Accessing the Dynamics Context

Inside a Web Resource, the CRM context can be accessed using:

const formContext = parent.Xrm.Page;

or, in modern implementations:

const globalContext = parent.Xrm.Utility.getGlobalContext();

From there you can:

  • retrieve user information

  • access organization settings

  • execute Dataverse Web API requests

  • navigate to records

  • open dialogs

  • display notifications

Calling the Dataverse Web API

React works very well with the Dataverse Web API.

Typical operations include:

  • RetrieveMultiple

  • Retrieve

  • Create

  • Update

  • Delete

  • Custom Actions

  • Custom APIs

Using async/await makes the code much easier to read than older XMLHttpRequest implementations.

Web Resource vs PCF

One of the most common questions is:

Should I build a Web Resource or a PCF component?

The answer depends on the scenario.

Choose a Web Resource when

  • Building an entire application

  • Creating dashboards

  • Developing preview pages

  • Building administration tools

  • Displaying complex reports

  • Implementing wizard-like interfaces

  • Creating rich dialogs

A Web Resource gives you full control over the page.

Choose PCF when

  • Replacing a form field

  • Creating custom controls

  • Enhancing grids

  • Building reusable UI components

  • Integrating directly with form data

PCF components integrate deeply with the Power Platform lifecycle and are the recommended choice for reusable controls.

Advantages of Web Resources

  • Easier migration from existing JavaScript projects

  • Full React application

  • No PCF lifecycle complexity

  • Complete routing support

  • Freedom to use almost any React library

  • Easier debugging

Advantages of PCF

  • Native Power Platform integration

  • Better form lifecycle support

  • Automatic responsiveness

  • Strong metadata integration

  • Better ALM support

  • Standard deployment model

Deployment Considerations

When deploying React Web Resources, consider the following:

  • Keep filenames stable.

  • Minimize bundle size.

  • Use production builds.

  • Avoid unnecessary dependencies.

  • Separate large components using lazy loading.

  • Keep Fluent UI versions consistent across projects.

  • Test inside different Dynamics apps (Sales, Customer Service, Model-driven Apps).

Performance Tips

To improve performance:

  • Use React.memo where appropriate.

  • Lazy-load large modules.

  • Cache API responses.

  • Reduce unnecessary re-renders.

  • Bundle only the libraries you actually use.

  • Enable production optimizations.

Since Web Resources are loaded inside Dynamics, every kilobyte matters.

Is React Still a Good Choice for Dynamics?

Absolutely.

React remains one of the best technologies for building rich user interfaces inside Dynamics 365.

When combined with TypeScript, Fluent UI, and the Dataverse Web API, it provides an excellent developer experience while producing highly maintainable applications.

PCF is the preferred solution for custom controls embedded directly into forms and grids, but React Web Resources continue to be an excellent option for larger applications, dashboards, and standalone experiences where complete control over the interface is required.

Choosing between Web Resources and PCF should be driven by the type of solution you're building rather than by trends. In many enterprise projects, both approaches coexist successfully: PCF components enhance individual form elements, while React Web Resources deliver sophisticated pages and workflows that extend the capabilities of Dynamics 365.