How to marry ReactJS and Sitecore with Webpack – Part 4. Module on GitHub

It’s been a while since I wrote about Sitecore, React and embedded JS Engine. Also, my presentation on Philadelphia SUG last year was mainly theoretical. So the last few days I’ve spent cleaning up my sources that I’ve been using for those posts.

It looks like that this time to open sources.

github-octocat_yes-we-code1

GitHub

https://github.com/asmagin/sitecore-js-presentation

In the repo, I’ve put sources, samples and some docs that I will update and enrich going forward.

NuGet

https://www.nuget.org/packages/Sitecore.Js.Presentation

The project is also available for installation via NuGet.org. The module doesn’t require any Sitecore items to be installed in addition to this package.

Bonus

I’ve mentioned in previous posts that you do not need to have ReactJS.NET in your solution to be able to render code on a server side. Especially when you using WebPack.

As a side effect of removing this dependency, I found out that it is possible to use pretty much any JS templating engine with this module. If you follow a contract, that is used by .NET code.

A sample code in the repo contains an example of Lodash component. While it is not so cool as React 🙂 but it is still could be used for same simple cases that require only server-side rendering.


Follow me on twitter @true_shoorik. Would be glad to discuss ideas above in comments.

How to marry ReactJS and Sitecore with Webpack – Part 4. Module on GitHub

4 thoughts on “How to marry ReactJS and Sitecore with Webpack – Part 4. Module on GitHub

  1. Hey man great work with React and Sitecore, I was wondering if you can help me with an issue I’m having with your sample project: https://github.com/asmagin/sitecore-js-presentation. Everything works great however if I rebuild my project and publish to IIS then refresh the page (using the “react content” page), the page will hang forever. I’m using IIS Request Monitor and it looks like the request for “/react content” is getting stuck on the “BeginRequest” state in the “IIS Web Core” module. Not sure if you’ve experienced this before but any help is appreciated.

    Like

    1. I have a feeling that it may be due to JSPool or whatever mechanism that is caching the javascript files. I noticed that the javascript files do not get refreshed until the IIS Application Pool is recycled. I have a suspicion that when the DDLs gets published to the website, IIS will begin to flush the Application Pool by recycling and some thread is preventing that recycle action to finish; it may be that something is is still reading from the javascript files and that the recycle is waiting for the thread to finish hence causing the page to hang.

      Like

      1. JS files are not cached, they are loaded into JS engine once pull is initialized. You might be right that some object is not allowing to restart IIS. Please, create an issue on GitHub and provide some details. I’ll try to debug and reproduce it.

        Like

  2. I figured it out. The reason for the page hanging is that during the Application Pool clean up process Sitecore tries to read from App_web_*.pdb in “C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root” I had to give “Network Service” access to that folder; afterwards the page no longer hangs. Not sure how this happened but maybe my environment got misconfigured somehow.

    Also I figured out where the js files are cached. You are not caching the js files explicitly however in JsEngineManager.cs:

    private Action Initializer()
    {
    var script = this.CombineInitializationScripts();
    Action action = (engine) =>
    {
    var thisAssembly = typeof(JsEngineManager).Assembly;
    engine.ExecuteResource(“Sitecore.Js.Presentation.Resources.init.js”, thisAssembly);
    if (!string.IsNullOrEmpty(script))
    {
    engine.Execute(script);
    }
    engine.SetVariableValue(ScriptsAreLoaded, “true”);
    };
    return action;
    }

    Since the loading of the scripts happens outside of the returned action, when js files are updated the action re-renders the js, but since the js files are not re-read you’re reloading the sames files. I’d suggest moving “var script = this.CombineInitializationScripts();” inside of the action so that re-reading and re-loading happens at the same time, unless you have other reasons for leaving it outside.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s