ReactRedux Template 2.1: Unable to use SPA on IIS

[baughmann]

Unable to use the React-Redux template that comes with .NET Core 2.1.0 on IIS.

When attempting to browse to the application, I get a blank screen. Google Chrome developer console says: GET http://localhost/static/css/main.bb514f3b.css 404 (Not Found) GET http://localhost/favicon.ico 404 (Not Found)

The .NET Core 2.0.7 template (using TypeScript) works just as expected.

I have a feeling that it has to do with the webpack.config.js file generated by create-react-app. Can we get guidance on how to host/deploy these templates to IIS 8.5 and above? There do not seem to be many resources available for this. Any ideas or suggested resources would be greatly appreciated.

Thank you.

EDIT: See below comment. Looks like an issue with Webpack and IIS subdirectories.

[mkArtakMSFT]

Thanks for contacting us, @nickdb93. @ryanbrandenburg, can you please look into this? Thanks!

[baughmann]

It looks like it was looking for the static folder at the wrong address, as evident by the first GET above. It resolves correctly when it looks in http://localhost/<APPLICATION_NAME>/static/css/main.bb514f3b.css

In order to make it simpler, including 'homepage': 'http://localhost/<APPLICATION_NAME>' in the ClientApp's package.json allows the application to resolve the main.XXX.js file, the main.XXX.css file, etc.

However, this presents another problem that I will look into tomorrow when I get back to my desk: including that homepage in my package.json breaks my instance locally, since the correct local address does not include <APPLICATION_NAME>. It smells like this may be an issue with how Webpack deals with (or lack thereof) the subdirectories that IIS hosts on (i.e. http://localhost/<APPLICATION_NAME>).

So, I do not believe it's a templating issue, but, indeed, a broader one. I don't exactly know what the right solution is, even if I were to npm eject (which I don't want to do) to mess with the Webpack config.

That being said, I would still greatly appreciate some assistance. I know using CRA on IIS may not be a hot topic today, but I think supporting using it conveniently on IIS may help some full framework developers more openly embrace Core. I know it will definitely help us do that.

[ryanbrandenburg]

@nickdb93 could you be a bit more specific about how to replicate this problem? I'm not able to make it happen so far. Here's what I'm doing:

1. mkdir SPAOnIIS; cd SPAOnIIS
2. dotnet new reactredux
3. dotnet publish
4. Create a website on IIS that targets SPAOnIIS\bin\Release\netcoreapp2.1\publish (or whatever publish directory you used).
5. Visit the created site and see in the developer tools that /static/css/main.8302bbea.css returned 200.

[baughmann]

@ryanbrandenburg Are you running the site under a virtual directory (sub-path), such as http://localhost/SPAOnIIS? That's where the issue begins for me.

[ryanbrandenburg]

I think I have a better idea of whats going on now, I'm a bit new to the templating repo myself, so sorry it's a bit slow going.

First of all you say you're using a Virtual Directory in IIS, but according to @Tratcher that's not supported for ASP.NET Core 2.1. Instead it should be a sub-application. You can convert that by right clicking on the Virtual Directory and choosing convert to application. Once I did that I was able to replicate your issue. After replicating the issue I tried adding homepage to the package.json, and that did seem to solve the issue. As you seem to have guessed, it fixed the issue by adding "/" to the links/scripts for all our resources. I think you're correct that that's not a templating issue because it relates to how you're going to use the project after it was created, which isn't something templates deal with.

That just leaves whatever issue you're running into after adding homepage, which isn't really clear to me. What is the behavior you get VS the expected behavior? A more detailed description of your IIS structure as well as reproduction repos of both the host and child apps would be very helpful in this.

[baughmann]

@ryanbrandenburg It actually is an application. Should've used that term in my initial description. The attempt you made is actually what I'm doing, and where I'm having the issues.

Adding homepage fixes the issue in production, but breaks it local development because it starts looking for resources in a directory that does not exist. I will take another look at it tomorrow when I get back to my office and will provide more details then.

Thank you for all of your assistance.

[Tratcher]

One trick is to drop the leading slashes to make the links relative. E.g. static/css/main.8302bbea.css

[baughmann]

@Tratcher that would be my real preference, but how do I do that without hard-coding it in index.html and then having to change it manually every time it's built?

[Tratcher]

See how well the relative links work first. Then we can figure out how to make it stick.

[baughmann]

Will do. Will test soon. Been away from my desk most of the day, unfortunately.

On Wed, Jun 13, 2018, 12:17 PM Chris Ross notifications@github.com wrote:

See how well the relative links work first. Then we can figure out how to make it stick.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aspnet/templating/issues/555#issuecomment-396998014, or mute the thread https://github.com/notifications/unsubscribe-auth/AF5Cg79FLeyVgw6T2J2UyCZ5pdIcknDBks5t8TsMgaJpZM4UbGdp .

[baughmann]

@Tratcher Looks like that didn't work, bizzarely. It still looks for it in the same place, i.e. I get an error:

Loading failed for the <script> with source “http://localhost/static/js/main.d7a07ecb.js”.

Even when the <script> tag in index.html points to relative path "static/js/main.d7a07ecb.js”. Out of curiosity, I tried changingto` and got the same result after recycling the application pool.

EDIT: To clarify, this is without the homepage entry in package.json

[baughmann]

For some reason, the dev server on my local box is working now when I have the homepage tag in my package.json. I'm not entirely sure what changed. @ryanbrandenburg were you able to successfully run the dev server locally with the homepage tag?

I'll do a fresh pull of the repo on another computer and give it a run and ensure that it works and it's not something I changed on my dev box.

EDIT: I can confirm dev server works find on other computer will fresh clone of repo that has homepage tag in package.json. As such, unless @ryanbrandenburg had had the issues I did previously I'd like to request the following:

1. Guidance be added regarding the homepage tag in package.json somewhere in the documentation for IIS users running this template in a sub-application
2. This be closed as Not an Issue or something applicable

[ryanbrandenburg]

I created aspnet/Docs#7144 to track adding that info to our docs. Closing this.

[ghost]

What about the scenario where you have a dynamic homepage parameter? i.e. how do we deal with people renaming the Virtual IIS Sub-App if the name is to be hardcoded into package.json at buildtime?

[monirkohi2006]

I would like to note that this problem still exist and I was able to resolve it by adding <"homepage": "http://server_name/project_name",> to package.json file in the ClientApp folder.