Post
Ask Question

Creating a Web Resource Based on React TypeScript in Dynamics 365

Introduction

Integrating modern web development frameworks like React and TypeScript with Dynamics 365 allows developers to create powerful, responsive, and maintainable user interfaces. React, combined with TypeScript, offers a robust platform for building sophisticated web applications that can seamlessly integrate with Dynamics 365. This blog will guide you through the steps to create a web resource based on React and TypeScript in Dynamics 365, enabling you to leverage these modern technologies for a more enhanced and efficient user experience.

Benefits of using React and TypeScript in Dynamics 365

  • Enhanced User Experience: Build interactive and dynamic interfaces that provide a seamless user experience.
  • Maintainability: TypeScript adds static type checking, making your code more predictable and easier to maintain.
  • Reusable Components: React’s component-based architecture allows for reusability, reducing development time and effort.
  • Performance: React efficiently updates and renders components, ensuring high performance for complex applications.
  • Modern Development Practices: Leverage the latest web development tools and practices for better application development.

Prerequisites

Before you begin, ensure you have the following tools installed:

Set up your React typescript project

Open a terminal and run the following commands to set up a new React project with TypeScript.

npx create-react-app my-d365-webresource --template typescript
cd my-d365-webresource

TypeScript Project

Develop your React application

Open the project in your code editor. You will see a structure similar to this.

my-d365-webresource
├── node_modules
├── public
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   └── setupTests.ts
├── package.json
├── tsconfig.json
└── README.md

From the Root Folder, Run the below command to install "react-app-rewired" as a dev dependency(This library file which alters the default build behavior of React using the Configuration).

npm install react-app-rewired --save-dev

Add the below Configuration File with the name config-overrides.js at the root level of the react application.

Note. This Config File alters the default build behavior of react, and we will be getting single HTML, CSS, and JS files as output which we can directly import in D365.

module.exports = {
    paths: function (paths, env) {
        paths.appBuild = paths.appBuild.replace("build", "dist");
        return paths;
    },
    webpack: function (config, env) {
        if (env === 'production') {
            config.optimization.runtimeChunk = false;
            config.optimization.splitChunks = {
                cacheGroups: {
                    defatult: false,
                },
            };
            config.output.filename = 'js/mywebresource.js';
            config.output.chunkFilename = 'js/mywebresource.chunk.js';
            config.plugins[5].options.filename = "css/mywebresource.css";
            config.plugins[5].options.modulefilename = () => "css/mywebresource";
        }
        return config;
    },
};

Package

In the package.json file, add "homepage": "." in the location mentioned below, (This is for relatively accessing the js and cs file from HTML).

Homepage

Change the Script Key value as below in the package.json file to change the start and build commands.

Package.json

You can now start building your application. For example, edit src/App.tsx to create your desired UI.

Build the React application

npm run build

React Application

This will create a dist folder containing the static files for your application. We will need three files mywebresource.css, mywebresource.js, and index.html as highlighted below.

Application

Upload Web resources to Dynamics 365

  • Go to your Power Platform Environment
  • Navigate to Solutions > Open Any Solution (Or Default Solution)
  • In the solution explorer, right-click on Web Resources and select New.
  • Create a new web resource for your HTML File.
    • Name: Provide a name, e.g., new_/mywebresource.html.
    • Display Name: A friendly name for the web resource.
    • Type: HTML Web Resource.
  • Create a new web resource for your JS file.
    • Name: Provide a name, e.g., new_/js/mywebresource.js.
    • Display Name: A friendly name for the web resource.
    • Type: Javascript Web Resource.
  • Create a new web resource for your CSS File.
    • Name: Provide a name, e.g., new_/css/mywebresource.css.
    • Display Name: A friendly name for the web resource.
    • Type: Css Web Resource.

Publish all three WebResources.

WebResources

Open and validate the Webresource

To validate the WebResource Open any of the Modern Driven Apps -> Go to Console -> Run the below command.

Xrm.Navigation.openWebResource("new_/mywebresource.html")

Console

The Output would be.

Output

Note. I have attached the entire code with the Article.

By following these steps, you can create a dynamic, responsive web resource using React and TypeScript and integrate it seamlessly into your Dynamics 365 environment. This approach leverages modern web development practices to enhance the functionality and user experience of your Dynamics 365 applications.

Feel free to customize the React app further, using libraries and tools that suit your needs, to create rich and interactive web resources that can significantly improve your Dynamics 365 user experience.

Happy Learning!


Similar Articles