CODEWITHSUNDEEP
.netreactjsasp.net-core.net-core
qwerty2k
qwerty2k

Reputation: 41

.Net Core React SPA hosted on subdomain on local instance of IIS

Done a lot of searching so I'm hoping so one can save me!

I have a .net core 3.0 application setup with the React template. Both locally and when deployed I need to run the site on IIS on a sub application of a site (so, it is deployed to https://trunk.apps.co.uk/app1 for example).

The way that authentication works (and I can't change since its a company wide thing) is that my app has a controller which takes in an authticket and then sets an authentication cookie, which is then provided with each subsequent request so the user is authenticated.

I have setup Startup.cs to be configured doing:

app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";

if (env.IsDevelopment()) 
{
   spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
}
}

now this does proxy on all the requests as expected, however... when react builds the app in the background via npm run start it assumes that all files are located at the root of the site, so the javascript includes in index.html don't have the subsite '/app1/' for example in the url so those requests fail as the url is wrong (URL for example is http://trunk.apps.co.uk/static/js/bundle.js when it needs to be http://trunk.apps.co.uk/app1/static/js/bundle.js)

If I however setup the PUBLIC_URL in the react project to '/app1/' for example then the url in Index.html is correctly set by react when it builds the app for the dev server however when the .net core app then proxies those requests on it proxies on to http://localhost:3000 and react dev server is now instead operating on http://locahost:3000/app1.

I've tried amending the url in startup.cs:

spa.UseProxyToSpaDevelopmentServer("http://localhost:3000/app1");

but the path /app1 is ignored and requests are still just proxied to http://localhost:3000.

Anyone offer any advice?

Thanks, Scott

Upvotes: 0

Views: 812

Answers (1)

Boopathy T
Boopathy T

Reputation: 557

This worked for me.

  1. My react project was clone from react boilerplate
  2. BFF layer is .net core 3.0

Solution:

  1. webpack.base.bable.js change publicPath to /app1/ (where app1 is sub application or subdomain or subnet configured with the name). In case if you are not using react boilerplate just make this change in webpack

  2. Add basename in BrowserRouter from react-router-dom

  3. In BFF layer

    app.UseStaticFiles(new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(
                    Path.Combine(env.ContentRootPath, "ClientApp/build")),
                RequestPath = "/app1"
            });

  4. Make sure all your BFF api respond properly when you have /app1 to api call.

Upvotes: 1

Related Questions