Asset manifest handling and non-root webapplications

[aldrashan]

I'm using these library versions:

• ReactJS.NET: 5.2.4
• JavaScriptEngineSwitcher: ChakraCore 3.5.6
• react and react-dom: N/A
• webpack: N/A
• node: N/A

Runtime environment:

• OS: Windows server 2016 64 bit
• .NET Framework 4.7.2

Steps to reproduce

Our internal application is hosted at https://[OUR_BASE_URL]/[REACT_APPLICATION_NAME], with another webapplication being hosted at https://[OUR_BASE_URL].

I've followed the tutorial and have implemented the Asset manifest handling step.
Everything works while using localhost, but scripts can't be found on the production website after publishing the application.
Scripts and stylesheets are generated relative to https://[OUR_BASE_URL]/ instead of https://[OUR_BASE_URL]/[REACT_APPLICATION_NAME]/ (e.g. <script src="/dist/main.f9cc162b.js"></script> instead of <script src="/[REACT_APPLICATION_NAME]/dist/main.f9cc162b.js"></script>).
Seems like the ~ in SetReactAppBuildPath("~/dist") isn't properly being converted to [REACT_APPLICATION_NAME] like it does for <script src="~/js/site.js"></script> inside the _Layout.cshtml.

I've found threads that say you have to specify "homepage": "." or "./" inside package.json, but this doesn't seem to be doing anything.

[dustinsoftware]

Try setting publicPath in webpack.config

React.NET/src/React.Template/reactnet-webpack/webpack.config.js

Line 10 in b97f80c

publicPath: '/dist/'

[aldrashan]

Doing that only kind of fixes the problem and creates a new one.

I changed it to '/[REACT_APPLICATION_NAME]/dist/'.
The backend searches for the files in the wwwroot/[REACT_APPLICATION_NAME]/dist/ folder (and it will throw an error if they aren't found), while it still tries to serve the files from the wwwroot/dist/ folder, since the [REACT_APPLICATION_NAME] is our application's name and not part of the wwwroot path.
This means I have to copy the files to both locations while publishing, or else it won't work.

[dustinsoftware]

Yeah makes sense. In that case we can probably add an option to ReactConfiguration that allows customizing the root path that the scripts are loaded from server side. It is important that publicPath matches how the browser loads your scripts in case you opt for using lazy loading in the future, otherwise those chunks will fail to load. Something like adding a serverRoot optional argument here on SetReactAppBuildPath https://github.com/reactjs/React.NET/blob/master/src/React.Core/ReactSiteConfiguration.cs

…

On Sun, Jul 12, 2020 at 13:57, aldrashan ***@***.***> wrote: Doing that only kind of fixes the problem and creates a new one. I changed it to '/[REACT_APPLICATION_NAME]/dist/'. The backend searches for the files in the wwwroot/[REACT_APPLICATION_NAME]/dist/ folder (and it will throw an error if they aren't found), while it still tries to serve the files from the wwwroot/dist/ folder, since the [REACT_APPLICATION_NAME] is our application's name and not part of the wwwroot path. This means I have to copy the files to both locations while publishing, or else it won't work. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1134 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHGCFSFRMESZEKDVTACTWDR3IPTPANCNFSM4OVJFO3A> .

[dustinsoftware]

Would you be open to sending a PR to support this use case? On Sun, Jul 12, 2020 at 14:21, Dustin Masters <dustin@dustinsoftware.com> wrote:

…

Yeah makes sense. In that case we can probably add an option to ReactConfiguration that allows customizing the root path that the scripts are loaded from server side. It is important that publicPath matches how the browser loads your scripts in case you opt for using lazy loading in the future, otherwise those chunks will fail to load. Something like adding a serverRoot optional argument here on SetReactAppBuildPath https://github.com/reactjs/React.NET/blob/master/src/React.Core/ReactSiteConfiguration.cs On Sun, Jul 12, 2020 at 13:57, aldrashan ***@***.***> wrote: > Doing that only kind of fixes the problem and creates a new one. > > I changed it to '/[REACT_APPLICATION_NAME]/dist/'. > The backend searches for the files in the > wwwroot/[REACT_APPLICATION_NAME]/dist/ folder (and it will throw an error > if they aren't found), while it still tries to serve the files from the > wwwroot/dist/ folder, since the [REACT_APPLICATION_NAME] is our > application's name and not part of the wwwroot path. > This means I have to copy the files to both locations while publishing, > or else it won't work. > > — > You are receiving this because you commented. > > > Reply to this email directly, view it on GitHub > <#1134 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAHGCFSFRMESZEKDVTACTWDR3IPTPANCNFSM4OVJFO3A> > . >

[aldrashan]

As in fork the code and add the code to do this myself, you mean?
Could probably do that, yeah.

[aldrashan]

See #1141 .
Only the last commit is relevant.
I reckon it still needs to be edited for the .net standard version of the library, but this works for the .net core versions.

[arrudamarcos78]

I'm facing the same problem, and I can say I'm relieved to have found this issue report, because this was driving me crazy. I tried absolutely everything in terms of changing paths, using absolute and relative paths, trying to use server-relative paths, HTML page relative paths, etc. Nothing works, except for giving up on using scripts with dynamic names (names containing a hash part) and calling the fixed name scripts directly, as in:

<script src="~/dist/runtime.js"></script>
<script src="~/dist/vendor.js"></script>
<script src="~/dist/main.js"></script>

instead of calling:

@Html.ReactGetScriptPaths()

in the _Layout.cshtml file (basically ignoring the content of the asset-manifest.json file).

But this is only a workaround to make it work, I really WANT to use the dynamic script names (they are useful to avoid browser caching, for instance).

OBS: It's not a matter of being localhost or not, it's a matter of not being a root web app, EVEN on localhost. I'm publishing my web app on http://localhost/SampleWebpackApp and it doesn't work.

I'm using React.AspNet and React.Router versions 5.2.7.

Is there any fix to this issue yet?

Thanks.

[dustinsoftware]

As mentioned in the other thread, the library wasn’t really designed to be used like outside the domain root. However it’s something we’d like to support! Given that we work on this in our spare time, for free, there isn’t a timeline when it will be added. If someone is willing to contribute the time to implement setting the root path in the site config then I can help guide that effort.

…

On Mon, Aug 17, 2020 at 3:23 PM, arrudamarcos78 ***@***.***> wrote: I'm facing the same problem, and I can say I'm relieved to have found this issue report, because this was driving me crazy. I tried absolutely everything in terms of changing paths, using absolute and relative paths, trying to use server-relative paths, HTML page relative paths, etc. Nothing works, except for giving up on using scripts with dynamic names (names containing a hash part) and calling the fixed name scripts directly, as in: <script src="~/dist/runtime.js"></script> <script src="~/dist/vendor.js"></script> <script src="~/dist/main.js"></script> instead of calling: @Html.ReactGetScriptPaths() in the _Layout.cshtml file. But this is only a workaround to make it work, I really WANT to use the dynamic script names (they are useful to avoid browser caching, for instance). OBS: It's not a matter of being localhost or not, it's a matter of not being a root web app, EVEN on localhost. I'm publishing my web app on *http://localhost/SampleWebpackApp <http://localhost/SampleWebpackApp>* and it doesn't work. I'm using React.AspNet and React.Router versions 5.2.7. Is there ay fix to this issue yet? Thanks. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1134 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHGCFV4N7UQMLBRKAH34ZLSBGUVLANCNFSM4OVJFO3A> .