Server side reactjs rendering in Nancy with React.NET

Bootstrapper.cs

public class Bootstrapper : DefaultNancyBootstrapper
{
    protected override void RequestStartup(TinyIoCContainer container, IPipelines pipelines, NancyContext context)
    {
        base.RequestStartup(container, pipelines, context);

        var react = new ReactEnvironment(
            new JavaScriptEngineFactory(),
            new ReactSiteConfiguration(),
            new NullReactCache(),
            new NancyReactFileSystem(container.Resolve<IRootPathProvider>()));

        container.Register<IReactEnvironment>(react);
    }
}

hello.jsx

/** @jsx React.DOM */
// views/hello.jsx
var HelloWorld = React.createClass({
    render: function () {
        return (
            <div>Hello {this.props.firstName} {this.props.lastName}.</div>
        );
    }
});

HelloWorldModule.cs

public class HelloWorldModule : NancyModule
{
    public HelloWorldModule(IReactEnvironment react)
    {
        Get["/"] = _ => {
            var hellojs = react.LoadJsxFile("~/views/hello.jsx");
            react.Execute(hellojs);
            var component = react.CreateComponent("HelloWorld", new Person { firstName = "Prabir", lastName = "Shrestha"});
            /// var component = react.CreateComponent("HelloWorld", new { firstName = "Prabir", lastName = "Shrestha" });
            var html = component.RenderHtml();
            return html;
        };
    }
}

NancyReactFileSystem.cs

public class NancyReactFileSystem : IFileSystem
{
    private readonly IRootPathProvider _rootPathProvider;

    public NancyReactFileSystem(IRootPathProvider rootPathProvider)
    {
        _rootPathProvider = rootPathProvider;
    }

    public string MapPath(string relativePath)
    {
        if (relativePath.StartsWith("~/"))
        {
            return Path.Combine(_rootPathProvider.GetRootPath(), relativePath.Substring(2));
        }

        return relativePath;
    }

    public string ReadAsString(string relativePath)
    {
        return File.ReadAllText(MapPath(relativePath));
    }
}

NullReactCache.cs

public class NullReactCache : ICache
{
    public T GetOrInsert<T>(string key, TimeSpan slidingExpiration, Func<T> getData, IEnumerable<string> cacheDependencyFiles = null,
        IEnumerable<string> cacheDependencyKeys = null)
    {
        return getData();
    }
}

Person.cs

public class Person
{
    public string firstName { get; set; }
    public string lastName { get; set; }
}

You'll need to dispose the JavaScriptEngineFactory at the end of the request to ensure it doesn't leak memory (it uses unmanaged resources - The MSIE JavaScript engine). In ReactJS.NET I handle this by scoping IoC registrations per web request. I should probably shuffle this around a bit to make it work better for non-System.Web scenarios. I'm using TinyIoC as well, just like Nancy does.

It might be easiest to register all the dependencies in Nancy's IoC container and scope them per request, rather than using ReactJS.NET's IoC container.

https://github.com/reactjs/React.NET/blob/master/src/React/AssemblyRegistration.cs
https://github.com/reactjs/React.NET/blob/master/src/React.Web/AssemblyRegistration.cs

This approach has the risk of breaking with new ReactJS.NET versions though, if new dependencies are added.

@Daniel15 I think TinyIoC and most other fwks auto dispose if it implements IDisposable. @grumydev will know more about this. It might be as easy as just registering the IJavaScriptEngineFactory. I'm not sure if only having the instance implement IDisposable is enough instead of IJavaScriptEngineFactory implementing IDisposable.

container.Register<IJavaScriptEngineFactory>(new JavaScriptEngineFactory());

var react = new ReactEnvironment(
            container.Resolve<IJavasScriptEngineFactory>(),
            new ReactSiteConfiguration(),
            new NullReactCache(),
            new NancyReactFileSystem(container.Resolve<IRootPathProvider>()));

        container.Register<IReactEnvironment>(react);

My sample does use Nancy per request container by overriding RequestStartup. (Nancy comes TinyIoC which can be replaced by any fwk and is not the same TinyIoc used by the ReactJS.NET.)

Not sure about the Nancy implementation of TinyIoC, but the standard one doesn't dispose at the end of web requests and I needed to implement that myself for ReactJS.NET (see grumpydev/TinyIoC#53). It's possible Nancy has a custom lifecycle that handles this.

Ideally those dependencies (IJavaScriptEngineFactory, IReactSiteConfiguration, ICache and IFileSystem) should all be in the IoC container. Doesn't really matter whether it's ReactJS.NET's or Nancy's, although it would be nice if they were in ReactJS.NET's since it'd make ReactJS.NET more easily extensible as a standalone library. You should be able to do container.Resolve<IReactEnvironment>() without having to call the constructor manually, which is how it works with the ASP.NET integration at the moment, just one Resolve call at the root:
https://github.com/reactjs/React.NET/blob/master/src/React.Web/JsxHandlerFactory.cs#L25
https://github.com/reactjs/React.NET/blob/master/src/React.Web.Mvc4/HtmlHelperExtensions.cs#L28

Constructor injection wherever possible :)

It would be good to have as little duplication between the ReactJS.NET IoC registrations (linked to in a previous comment) and the registrations required for Nancy. Maybe I should refactor my AssemblyRegistration.cs files somehow. Thoughts?

Everything in a container that implements IDisposable is disposed when the container is disposed. Nancy uses two containers for lifetimes, the app container, which is disposed when the host is disposed (for hosts that support that), and the request container, which is disposed at the end of the request. The "asp.net" lifetime doesn't do this because, as far as I know, it's not possible to do generically, which has always been a major beef with how asp.net mvc/webapi handle containers and lifetimes.

Hi guys,
We are using nancyfx for our current web application and we need to integrate reactjs big calendar component. The problem is that the said component is using webpack, babel and node.js for transpiliing to javascript and I have no idea how to achieve this in .net especially in NancyFx environmnet. Can your repository/code convert the pieces from bigcalendar repository and make them available for use in nancyfx project.
Thanking in anticipation
Adeel

and plz let me know what github repository the above code is using?