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

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

The folder structure should look like this:

React for Power Apps Model Driven App - Create Reverse Proxy

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

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

    
{ 

    "include": ["server"], // compile TS files in server directory 

    "compilerOptions": { 

      "module": "CommonJS", // classic format that Node.js understands 

      "esModuleInterop": true, // allow imports of modules in ES format 

      "resolveJsonModule": true, // enable import of JSON files 

      "allowJs": true, // allow import of JS modules 

    } 

}

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':

{ 
    "secret": "", 
    "clientId": "", 
    "target": "", 
    "tenantid":"", 
    "tokenAPI": "https://login.microsoftonline.com/f2782d7d-d11b-4aba-a26a-bc8782409cb5/oauth2/token", 
    "grant_type": "client_credentials" 
}

You need to set up the following:

'secret' and 'clientId' from the App User
'target' – the URL of your environment
'tenantid' – ask the admin; it can be found on make.powerapps.com

React for Power Apps Model Driven App - Power Apps settings

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

We will set up 2 middlewares on express:

Get Token
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:

let authHeader:string; 
let expireOn:number; 
app.use('*',  async (req, res, next) =>  
{ 
    if(!authHeader || expireOn < (Date.now() - 30 * 1000)) 
    //  Refresh auth header if it is not valid, expire in 30 seconds or allready expired  
    { 
      const formData = new FormData(); 
      formData.append('grant_type', proxyData.grant_type); 
      formData.append('client_id', proxyData.clientId); 
      formData.append('client_secret', proxyData.secret); 
      formData.append('resource', proxyData.target); 

      const res:any = (await axios.post(`https://login.microsoftonline.com/${proxyData.tenantid}/oauth2/token`, formData)).data; 
      const token = res?.access_token; 
      expireOn = Date.now() + Number(res?.expires_in) * 1000; 

      if(token == null) 
      { 
        throw new Error(`Error while trying to get access_token. Please check Client Id and secret in the proxy.json file!`); 
      } 
      else 
      { 
        authHeader = `Bearer ${token}`; 
      } 
    } 

    req.headers.authorization = authHeader; 
    //  Go to the next middleware 
    next(); 
});

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

const app = express(); 
app.use('*', createProxyMiddleware({ target: proxyData.target, changeOrigin: true })); 

Let's see the full code of 'server.ts': 
import express from 'express'; 
import axios from 'axios'; 
import FormData from 'form-data'; 
import { createProxyMiddleware } from 'http-proxy-middleware'; 
import * as proxyData from '../proxy.json'; 
import packageJson from '../package.json'; 

let authHeader:string; 
let expireOn:number; 

const app = express(); 

app.use('*',  async (req, res, next) =>  
{ 
    if(!authHeader || expireOn < (Date.now() - 30 * 1000)) 
    //  Refresh auth header if it is not valid, expire in 30 seconds or allready expired  
    { 
      const formData = new FormData(); 
      formData.append('grant_type', proxyData.grant_type); 
      formData.append('client_id', proxyData.clientId); 
      formData.append('client_secret', proxyData.secret); 
      formData.append('resource', proxyData.target); 

      const res:any = (await axios.post(`https://login.microsoftonline.com/${proxyData.tenantid}/oauth2/token`, formData)).data; 
      const token = res?.access_token; 
      expireOn = Date.now() + Number(res?.expires_in) * 1000; 

      if(token == null) 
      { 
       throw new Error(`Error while trying to get access_token. Please check Client Id and secret in the proxy.json file!`); 
      } 
      else 
      { 
        authHeader = `Bearer ${token}`; 
      } 
    } 

    req.headers.authorization = authHeader; 
    //  Go to the next middlewar 
    next(); 
}); 

app.use('*', createProxyMiddleware({ target: proxyData.target, changeOrigin: true })); 

app.listen(62078, ‘localhost’, () => 
{ 
  console.log(`Express server is running on ${HOST}:${PORT}`); 
});

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:

"build:server": "tsc --project ./tsconfig.server.json --outDir ./build" 
 "start:server": "node ./build/server/server.js" 
 "run:server": "run-s build:server start:server"

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.

React for Power Apps Model Driven App - run scripts sequentially