1

I'm running a ReactJS front end with an ASP Net core backend for API calls on my IIS server. There is only one URL and I believe it's set to port 443 via NetScaler (I have no control over the URL/NetScaler).

My ReactJS is on port 443. My ASP Net Core is on port 444 (I'm not sure if this is right or not). I'm aiming for all calls that have /fsapi/ in the path to go to the backend.

Currently I have the following rules:

<rules>
   <clear />
       <rule name="Flag Status API calls" stopProcessing="true">
                    <match url="fsapi/([0-9a-zA-Z]+)/([0-9a-zA-Z]+)" ignoreCase="true" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                        <add input="{PATH_INFO}" pattern="fsapi/([0-9a-zA-Z]+)/([0-9a-zA-Z]+)" />
                    </conditions>
                    <action type="Rewrite" url="localhost:444/{R:1}/{R:2}" appendQueryString="false" logRewrittenUrl="true" />
                </rule>
                <rule name="React routing">
                    <match url="fsapi/([0-9a-zA-Z]+)" negate="true" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                        <add input="{HTTP_METHOD}" pattern="^GET$" />
                        <add input="{HTTP_ACCEPT}" pattern="^text/html" />
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" appendQueryString="false" />
                </rule>
    </rules>

One rule is to make the React Routing work while the other is attempt to redirect the api calls.

As it is currently the React Routing rule works great, but any API calls get a 502.

I'm not sure if I'm barking up the wrong tree with attempting to do it this way, but from what guides I've seen this seems to be the way.

Dagnis
  • 13
  • 4

1 Answers1

0

I suggest you can read official doc about virtual application on IIS.

Understanding Sites, Applications, and Virtual Directories on IIS 7

Steps

  1. Deploy your .net core backend api peoject in main site with name coreapi.

  2. Create a virtual application with name myreact.

    enter image description here

    enter image description here

  3. Then we can access backend api with url.

    http://localhost:9001

    And the url of react project is

    http://localhost:9001/myreact

    enter image description here

Tips

Although the virtual application and the main application are under the same application pool, they are still two independent websites. They can share a url. When accessing the virtual application, they only need to add the suffix path (https://mainsite.com/myreact).

And you also need add web.config file under virtual application path.

Don't put your react project in main site.

You can refer my answer in below post, they are deployed to azure webapp, but the principle is the same and the effect is the same.

1. React.js - How to deploy client and server independently or together?

2. How to publish two .net websites on one Azure WebApp?

3. How to deploy a Flask+React application to Azure Web Service

Jason Pan
  • 15,263
  • 1
  • 14
  • 29
  • Thank you so much! This did it. I changed it some to have the React as the base url and the APIs as fsapi. This way my URL Rewrite for the react router part still worked and didn't have extra stuff in the url. Worked like a charm! – Dagnis Aug 19 '21 at 15:02