Browserify and ReactJs.Net Server Side Rendering

Question

I have been trying to get the Flux Todo List Tutorial running in an MVC project using ReactJS.Net.

I am using Gulp and Browserify to bundle files and then making a call to render the React component in my view. Relevant part of gulpfile.js:

gulp.task('build', function(){
  browserify({
    entries: [path.ENTRY_POINT],
    transform: [reactify]
  })
    .bundle()
    .pipe(source(path.NON_MINIFIED_OUT))
    .pipe(gulp.dest(path.DEST_BUILD));
});

I have changed the App.js file to define my component globally:

global.React = require('react');

global.TodoApp = require('./components/TodoApp.react');

And am trying to use in my view like so:

<div id="app">
    @Html.React("TodoApp", new {})
</div>

<script src="http://fb.me/react-0.13.3.min.js"></script>
@Scripts.Render("~/bundles/reactApp")
@Html.ReactInitJavaScript()

But it throws the following error at run time:

Could not find a component named 'TodoApp'. Did you forget to add it to App_Start\ReactConfig.cs?

I have added the output from Browserify to my ReactConfig.cs:

public static void Configure()
{
    ReactSiteConfiguration.Configuration
        .AddScript("~/dist/build.js"); // Have also tried .AddScriptWithoutTransform
}

But it doesn't seem to help.

It works fine if I just render on client side:

<div id="app">
</div>

@Scripts.Render("~/bundles/reactApp")
<script>
    React.render(
        React.createElement(TodoApp, null),
        document.getElementById('app')
    );
</script>

Can you post the full code of what you've done so far so I can take a look? — Daniel Lo Nigro, Jun 30 '15 at 17:06
@DanielLoNigro I've added the full source code to a GitHub repo: https://github.com/RagtimeWilly/FluxMvcExample — RagtimeWilly, Jul 01 '15 at 00:31
@RagtimeWilly Would love to see if you've been able to get this up and running? I'm trying to implement flux with .net and react. http://stackoverflow.com/questions/31599992/how-to-use-flux-and-event-emitter-with-net-mvc — nanonerd, Jul 24 '15 at 00:16
@nanonerd I have a site up and running using the flux pattern as the view in an ASP.Net MVC site. I still haven't managed to get the server side rendering working though. There's a link to a github project showing the basic idea in my above comment. Let me know if you have questions. — RagtimeWilly, Jul 25 '15 at 08:17
@nanonerd You can use react-aspnet-boilerplate to get server-side rendering with flux/redux. https://github.com/pauldotknopf/react-aspnet-boilerplate — Paul Knopf, Mar 27 '16 at 12:17

score 1 · Answer 1 · answered Nov 23 '15 at 09:07

1

Check out this blog:

http://janekk.github.io/tech/2014/07/25/aspnet-mvc-reactjs-browserify.html

and a good example here for ReactJs.Net, Gulp and Browserify:

https://github.com/Janekk/ReactDotNetBrowserify

Hope it helps :)

answered Nov 23 '15 at 09:07

podeig

2,597
8
36
60

Josh Leeder · Answer 2 · 2015-10-08T17:08:57.537

Browserify does not expose your bundled objects by default so the TodoApp object does not exist. You will need to expose/export TodoApp via browserify require and then require TodoApp before using it in the browser.

The server needs the components exposed in the global space as well. I ended up using something similar to the following:

gulp.task("bundle", function () {
    var exposure = new Readable();
    var b = browserify({
        transform: babelify
    });

    exposure.push('var React = require("react");\n');

    b.require(paths.components + "/Component1.jsx", { expose: 'Component1' });
    exposure.push('var Component1 = require("Component1");\n');

    b.require(paths.components + "/Component2.jsx", { expose: 'Component2' });
    exposure.push('var Component2 = require("Component2");\n');

    exposure.push(null);

    b.require("react");
    new StreamQueue()
        .queue(b.bundle()).queue(exposure)
        .pipe(source("bundle.js"))
        .pipe(gulp.dest(paths.componentJsDest));

});

Browserify and ReactJs.Net Server Side Rendering

2 Answers2