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; }
}

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?