React for Power Apps Model Driven App. Dev Reverse Proxy for D365 on Node JS

When working with the out-of-the-box (OOB) Model-Driven UI in Power Apps and feeling limited by its capabilities, one effective way to extend it is by building a Front-End App. While frameworks like ReactJS, Angular, and others offer sophisticated UI features, they can become challenging to develop and test, especially when dealing with data mockups and frequent deployment cycles.  

As an experienced developer, you might have used a reverse proxy for development on .NET, which can help streamline the process. However, an even better solution consolidates all components in one place, eliminating the need to ask your colleagues for a proxy. This solution involves using Node.js.  

In this article, I will guide you on leveraging Node.js to make your life easier when extending Model-Driven UI in Power Apps. By following these steps, you'll find a seamless way to integrate custom features without the cumbersome development and testing process. 

Let's get started! 

What you'll need: 

1. Dataverse Instance.
2. App User to connect our Proxy to it. You can ask the admin to create an App User and permit it to get data from Dataverse. Alternatively, if you have access to Azure app registration, you can create it yourself. We need clientId and secret.
3. VS Code.

4. Node.js and npm (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).

Open VS Code and create a new React App by running these commands in the Terminal: 

In our app, we will use @fluentui/react, a framework used for MS Products, including Power Apps and Model Driven Apps. It allows us to build a UI for Model Driven App with little effort. I will tell you about other packages and their use later. 

Let's display a list of activities, go to App.js and add the code: 

If we run it with npm start, we get an error from axios: "bad request." Let's add our proxy to handle it.

To set up a reverse proxy using TypeScript in your React App, follow these steps:

1. Create a new folder called 'server' inside your React App folder.
2. Create a file named 'server.ts' inside the' server' folder.
3. In the root of your React App folder, create two files: 'tsconfig.server.json' and 'proxy. json.'

The folder structure should look like this:

Now you can proceed with configuring and implementing the reverse proxy using TypeScript. 

Let's set the configuration. Open 'tsconfig.server.json' and paste:

This configuration specifies that we want to build from the server folder with the CommonJS module system. 

Now, let's create the configuration for the proxy. Go to 'proxy.json':

You need to set up the following:

Now, let's go to our 'server.ts' and write the proxy server logic: 

We will set up 2 middlewares on express:

1. Get Token
2. Proxy request to the real Dataverse instance (target from 'proxy.json')

To get the token, we will use oauth2 and store the authHeader and expireOn in memory:

To proxy our request, we will use the 'http-proxy-middleware' package:

By using 'app.use', we can chain middlewares. After we set up the middlewares, we start listening to port 62078. 

Let's add scripts to build and run our proxy into 'package.json': 

Add to the scripts section:

The run-s command gives us the ability to run scripts sequentially. 

Let's test it by running npm run run:server. 

Now you can open http://localhost:62078/api/data/v9.2/activitypointers and see the result.

To redirect requests that the React App cannot handle, we add a proxy to our 'package.json': 

 Now let's go to our 'server.ts' and take the proxy from 'package.json': 

We need to add these lines: 

 And change app.listen to the: 

Now let's go to your scripts in 'package.json' and change the 'start' script to start the Proxy and React App with one command: 

Add script: 

And replace the 'start' script with: 

The updated 'package.json':

Now, let's run it: npm start. You will see the result.

We have seen that we can easily add a proxy to ReactJS and make life easier for Model Driven App Front-End customizations. The same approach can be applied to other frameworks like Angular, Vue, and more. No extra tools are needed, and the entire setup can be managed in a single location. Remember to validate the server.ts code to ensure its accuracy. 

If you have any questions, we are here to help. Please do not hesitate to contact us at any time.