Using ReactJs.Net is DXP

Vote:
 

This may not directly be related to Episerver and DXP but I will give it a try.

I'm currently working on a new Episerver application and have an idea of building some parts/components of the site with React Js. I've stumbled over the library ReactJs.NET and I really wanted to use this lib to be able to render components server side and easy pass models and translations from the backend to the react components. This has been working excellent locally on my computer.

The other day we got access to our DXP environments, unfortunately it seems like the ReactJs.Net library doesn't run at all in Azure. The problem as far as I know is related to the visual c++ redistributable 2015 package not being installed. There is a lot of different information about this, and it's hard to filter out what is actually correct.

Does anyone have any experience of working with ReactJs.Net in DXP / Azure?

#222516
May 06, 2020 18:09
Vote:
 

We're using it on some of our sites, but we had to disable server side rendering in ReactJs.NET to get it to work. 

On a site note, our experience is that implementing sites as an SPA with ReactJS and Content Delivery API causes significantly less head aches down the road - especially if you have front-end developers that just develop the react components and are not .NET or Episerver developers.

#222544
May 07, 2020 11:55
Vote:
 

Interesting, do you happen to remember what issues you had before disabling the server side rendering?

The stack trace that I get is below. And i've checked a million times that the files are in the folder. Server side rendering obviously looks better when loading the page, but if it doesn't work then I guess that client side is better than it not working at all. Thanks for the tip!

"EPiServer.Global : Unhandled exception in ASP.NET
React.Exceptions.ReactNotInitialisedException: ReactJS.NET has not been initialised correctly. Please ensure you have called services.AddReact() and app.UseReact() in your Startup.cs file. ---> React.TinyIoC.TinyIoCResolutionException: Unable to resolve type: React.ReactEnvironment ---> React.TinyIoC.TinyIoCResolutionException: Unable to resolve type: React.JavaScriptEngineFactory ---> JavaScriptEngineSwitcher.Core.JsEngineLoadException: Failed to create instance of the V8JsEngine. Most likely it happened, because the 'v8-x64.dll' assembly or one of its dependencies was not found. See the original error message: “Cannot load V8 interface assembly. Load failure information for v8-x64.dll:
D:\local\Temporary ASP.NET Files\root\9a14b61e\9ccbdb01\assembly\dl3\2fe57c72\0033a03b_7012d601\x64\v8-x64.dll: The specified module could not be found
D:\home\site\wwwroot\x64\v8-x64.dll: The specified module could not be found
D:\home\site\wwwroot\bin\x64\v8-x64.dll: The specified module could not be found”. ---> System.TypeLoadException: Cannot load V8 interface assembly. Load failure information for v8-x64.dll:
D:\local\Temporary ASP.NET Files\root\9a14b61e\9ccbdb01\assembly\dl3\2fe57c72\0033a03b_7012d601\x64\v8-x64.dll: The specified module could not be found
D:\home\site\wwwroot\x64\v8-x64.dll: The specified module could not be found
D:\home\site\wwwroot\bin\x64\v8-x64.dll: The specified module could not be found
   at Microsoft.ClearScript.V8.V8Proxy.LoadNativeLibrary(String baseFileName)
   at Microsoft.ClearScript.V8.V8Proxy.LoadAssembly()
   at Microsoft.ClearScript.V8.V8Proxy.GetAssembly()
   at Microsoft.ClearScript.V8.V8Proxy.GetImplType(Type type)
   at Microsoft.ClearScript.V8.V8Proxy.CreateImpl[T](Object[] args)
   at Microsoft.ClearScript.V8.V8Runtime..ctor(String name, V8RuntimeConstraints constraints, V8RuntimeFlags flags, Int32 debugPort)
   at Microsoft.ClearScript.V8.V8ScriptEngine..ctor(V8Runtime runtime, String name, V8RuntimeConstraints constraints, V8ScriptEngineFlags flags, Int32 debugPort)
   at JavaScriptEngineSwitcher.V8.V8JsEngine..ctor(V8Settings settings)
#222547
May 07, 2020 12:40
Vote:
 

ClearScript is the server side rendering engine, so this error definetly seems related to that. You can try including the dlls it is asking for in the deploy (in the correct folders), but as far as I remember, we couldn't get it to work in DXP until we turned it off. 

#222548
May 07, 2020 12:45
Vote:
 

Maybe it was a bit unclear, but I have checked that the file it's looking for is in that folder. Both in the .nupkg file that gets created in my build pipeline, and also in Kudo for my dxp app.

#222549
May 07, 2020 12:58
Vote:
 

Yeah, I think this was the exact issue we were having now that it's starting to come back to me :)

Serverside-rendering is a problem in DXP, as the ReactJS.NET implementation of it isn't working, but if you start looking at other ways of accomplishing it, most of them require Node.js, which isn't included in the DXP environments. 

#222550
May 07, 2020 13:07
Vote:
 

 Sadly I get the same error even though I set DisableServerSideRendering() when initializing React Js Net. What version of React Js Net are you using, is an older one or a more recent? If you could get it to work then it must something im missing here.

#222576
May 07, 2020 15:20
Vote:
 

For anyone else running in to this, I got a good response from the authors of the library. The error message was appearently wrong, and the error was actually related to the package Microsoft Visual C++ Redistributable for Visual Studio 2019 missing on the app host. The package is required for the latest version of the V8 engine.

Now I've switched to using the ChakraCore VS engine which has no dependecy on Visual C++ Redistributable, and that works even with server side rendering for React.NET in DXP.

For reference: https://github.com/reactjs/React.NET/issues/1106

#222617
Edited, May 08, 2020 10:50
Vote:
 

We've just released a new version Episerver Foundation, with a full React based frontend (SPA). Including Server Side Rendering. For this project, we've elected to not use ReactJS.NET, for the following reasons:

  • It still requires Razor as view-engine where we wanted this to be completely controlled by React
  • We wanted to separate the frontend workflow completely from .Net

Our testing has shown we can run this solution, using the V8 engine on an Azure WebApp (e.g. CCDXP).

More information about the solution, what's inluded and the link to GitHub can be found in this blog post: Introducing Foundation SPA React

#222699
May 11, 2020 8:37
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.