" MicromOne: Building, Packaging, and Embedding a React Sports Blog in Microsoft Dynamics 365Building, Packaging, and Embedding a React in Microsoft Dynamics 365

Pagine

Building, Packaging, and Embedding a React Sports Blog in Microsoft Dynamics 365Building, Packaging, and Embedding a React in Microsoft Dynamics 365

 

Modern enterprise applications increasingly require rich, interactive user experiences that go beyond the capabilities of traditional HTML pages and form customizations. Within Microsoft Dynamics 365 and Power Platform environments, organizations often need advanced interfaces for dashboards, portals, selectors, reporting tools, knowledge bases, and content-driven applications.

React has emerged as one of the most widely adopted frontend libraries for building complex user interfaces due to its component-based architecture, efficient rendering engine, and extensive ecosystem. Integrating a React application into Dynamics 365 enables developers to leverage modern frontend development practices while continuing to benefit from Dataverse, Model-Driven Apps, security roles, business processes, and enterprise governance.

This article presents a technical overview of how a React-based sports blog application can be designed, built, packaged, and embedded into a Dynamics 365 environment using HTML Web Resources and JavaScript integration patterns.


React Architecture Overview

React is a declarative JavaScript library that builds user interfaces through reusable components.

Rather than manipulating the Document Object Model (DOM) directly through imperative code, React maintains a Virtual DOM representation and computes the minimum set of changes required to synchronize the browser interface with application state.

A simplified architecture can be represented as follows:

Application State
        │
        ▼
 React Components
        │
        ▼
   Virtual DOM
        │
        ▼
  Diff Algorithm
        │
        ▼
 Browser DOM

This approach minimizes unnecessary browser reflows and repaints while improving maintainability and scalability.

For a sports blog application, React components may represent:

SportsBlog
│
├── Header
├── ArticleList
│   ├── ArticleCard
│   ├── ArticleCard
│   └── ArticleCard
│
├── FeaturedArticle
│
├── LeagueStandings
│
├── StatisticsWidget
│
└── Footer

Each component is independently developed, tested, and maintained.


Designing the Sports Blog Application

The sports blog serves as a practical example because it combines several common frontend requirements:

  • Large amounts of formatted content
  • Dynamic article rendering
  • Media-rich experiences
  • Real-time updates
  • Reusable UI components
  • Responsive layouts

A typical article object may follow the structure below:

const article = {
    id: "1",
    title:
        "How Analytics Is Transforming Modern Football",
    author:
        "Sports Editorial Team",
    category:
        "Football",
    publishDate:
        "2026-09-25",
    imageUrl:
        "/images/football.jpg",
    content: [
        "Paragraph 1...",
        "Paragraph 2...",
        "Paragraph 3..."
    ]
};

This model separates data from presentation and enables components to remain reusable across multiple scenarios.


Application Initialization

React applications begin by creating a root node that attaches the component tree to a browser DOM element.

<div id="root"></div>

The application entry point mounts the React tree:

import React from "react";
import { createRoot }
    from "react-dom/client";
import App from "./App";
const container =
    document.getElementById("root");
const root =
    createRoot(container);
root.render(
    <App />
);

The root component acts as the orchestration layer for all subsequent views.


Component Development Strategy

A scalable React project should separate concerns between:

Presentation Components

Responsible only for rendering.

function ArticleTitle({ title }) {
    return <h1>{title}</h1>;
}

Container Components

Responsible for:

  • API communication
  • State management
  • Data transformation
  • Business logic

function ArticleContainer() {
    const [article,
        setArticle] = useState();
    useEffect(() => {
        loadArticle();
    }, []);
    return (
        <ArticleView
            article={article}
        />
    );
}

This separation improves maintainability and facilitates testing.


State Management Considerations

As the application grows, state becomes increasingly important.

Typical state categories include:

UI State
├── Modal Open
├── Theme
└── Loading Indicators
Business State
├── Articles
├── Teams
├── Results
└── Statistics
Session State
├── User Preferences

For small projects:

useState()
useReducer()

are sufficient.

For enterprise-scale solutions:

Redux
Zustand
Context API
Recoil

may provide better scalability.


Routing Architecture

If multiple sports sections are required, the application can implement routing.

/
├── football
├── basketball
├── volleyball
├── tennis
└── cycling

Using React Router:

<Route
    path="/football"
    element={<FootballPage />}
/>
<Route
    path="/cycling"
    element={<CyclingPage />}
/>

This allows a single build to support multiple content experiences.


Styling Strategy

Enterprise applications typically avoid inline styles.

A common structure is:

src
│
├── components
├── hooks
├── services
├── pages
│
└── styles
    ├── globals.css
    ├── article.css
    └── widgets.css

Benefits include:

  • Reusability
  • Theme support
  • Better maintainability
  • Easier accessibility compliance


Build Process

The build stage transforms development code into optimized production assets.

Source:

JSX
ES6 Modules
CSS
Images

Compilation:

Vite / Webpack
        │
        ▼
 Minification
 Tree Shaking
 Bundling
        │
        ▼
 Production Assets

Execution:

npm run build

Generated output:

dist/
├── index.html
├── assets/
│   ├── index.js
│   ├── vendors.js
│   └── index.css

The generated files are static and can be hosted by virtually any web platform.


Packaging for Dynamics 365

Dynamics 365 cannot directly execute a React project structure.

Instead, it consumes the generated build artifacts.

Example structure:

dps_/pages/
└── sports_blog/
    ├── index.html
    ├── assets/
    │   ├── index.js
    │   └── index.css

These files become:

HTML Web Resource
JavaScript Web Resource
CSS Web Resource

within the solution.

After publication, they become accessible inside the Model-Driven App runtime.


Opening the React Application Through navigateTo

The most decoupled integration approach consists of launching the React application inside a modal dialog.

let pageInput = {
    pageType:
        "webresource",
    webresourceName:
        "dps_/pages/sports_blog/index.html",
    data:
        JSON.stringify(payload)
};
let navigationOptions = {
    target: 2,
    width: {
        value: 1100,
        unit: "px"
    },
    height: {
        value: 700,
        unit: "px"
    },
    position: 1
};
Xrm.Navigation.navigateTo(
    pageInput,
    navigationOptions
);

Advantages:

  • Loose coupling
  • Independent deployment
  • Reusability
  • Easier maintenance


Passing Data to the React Application

Typically the hosting form sends contextual information.

Example:

{
    recordId:
        currentRecordId,
    ownerId:
        ownerId,
    sectorId:
        sectorId,
    campaignId:
        campaignId
}

Within React the payload is parsed:

const params =
    new URLSearchParams(
        window.location.search
    );
const data =
    JSON.parse(
        params.get("data")
    );

This creates a communication bridge between Dynamics and React.


Embedding React Directly Into a Form

A more integrated alternative consists of placing the Web Resource directly inside the form designer.

Architecture:

Dynamics Form
│
├── Standard Fields
│
├── Subgrid
│
└── React Web Resource

Communication occurs through:

const contentWindow =
    await control
        .getContentWindow();

Data can then be injected:

contentWindow.setSportsArticle({
    title:
        "Advanced Football Analytics",
    author:
        "Editorial Team"
});

This approach enables real-time synchronization between Dataverse records and React components.


Security Considerations

Enterprise deployments should consider:

Input Validation

Never trust incoming data.

if (!article.title) {
    throw new Error(
        "Invalid article"
    );
}

XSS Protection

Avoid:

dangerouslySetInnerHTML()

unless content is sanitized.

Environment Isolation

Deploy through managed solutions rather than manually modifying production assets.


Performance Optimization

Large React applications may suffer from excessive rendering.

Common optimization techniques include:

Memoization

useMemo()

Callback Optimization

useCallback()

Code Splitting

React.lazy()

Dynamic Imports

import(
    "./HeavyComponent"
);

Asset Compression

Gzip
Brotli

These strategies become increasingly important when the application is embedded inside enterprise solutions where multiple components may be executed simultaneously.


Future Evolution: PCF vs Web Resources

While HTML Web Resources remain a valid integration mechanism, modern Power Platform development increasingly adopts:

Power Apps Component Framework (PCF)

Advantages include:

  • Native Dataverse integration
  • Strong typing
  • Lifecycle management
  • Better form integration
  • Modern React support

For simple content portals and blog experiences, HTML Web Resources remain highly effective.

For enterprise-grade reusable controls, PCF often becomes the preferred long-term solution.

Integrating React into Dynamics 365 enables organizations to combine modern frontend engineering practices with Microsoft’s enterprise platform capabilities. A React sports blog serves as an excellent reference implementation because it demonstrates component design, state management, routing, build optimization, packaging, deployment, and form integration patterns.

By compiling the application into static build artifacts and deploying them as Dynamics 365 Web Resources, developers can deliver sophisticated user experiences while preserving compatibility with Dataverse, Model-Driven Apps, business processes, and enterprise governance requirements. As Power Platform continues to evolve, this architecture provides a scalable foundation that can later transition into PCF-based solutions while maintaining the same React development paradigm.