Can I apply Flux architecture with ReactJS.net?

Question

How create flux architecture in asp.net using reactjs.net ?

I will have several files. Jsx, how will I manage to be all rendenizador by the server?

In this example => Link, it creates using asp.net but not render with server

Jellied

currently, march 2015, there is a dearth of react + flux + .net information. all the flux tutorials incorporate node ... the best site so far for react usage on .net is reactjs.net, however, even there, there is no info about using the flux pattern on .net ... ;-( – Dowzall

Answer 1

I am currently working on a feature as a test bed for reactjs + flux in our .net application. Here is how it is set up.

1. We use nodejs as a package manager. we use NodeJs Visual Studio Tools to get the nodejs interactive window in VS and to be able to create NodeJs projects. http://nodejstools.codeplex.com/
2. Gulp task calls browserify to search through the the root jsx and find all dependencies. Gulp also calls the reactify library is used to transform the jsx files. The concatenated .js file is put on in a directory in our mvc website.
3. Gulp task copies all relevant js files to the mvc.net project as well.
4. When developing we use the Visual Studio Task Runner extension to run a Gulp task that watches for changes so we don't have to "keep building" while developing. It uses the "watchify" library.
5. We use Jest for testing - although we had an issue with NodeJs and jest playing nice in the newest version of NodeJs, so we had to down grade to 0.10.36.
6. we use TeamCity to run the Gulp task before building our solution (have a test setup, but haven't added it to my new feature yet).

Gulp does most of the magic. Here is a copy of our Gulp file (it is messy, but I am still learning). Many of the tasks are to watch css js and jsx files, but I hope this helps.

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var concat = require('gulp-concat');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');

var createbundler = function () {

    var bundler = browserify({
        entries: ['./app/js/VaeApp.jsx'], // Only need the root js file, browserify finds the dependencies
        transform: [reactify], // We want to convert JSX to normal javascript
        debug: false, // include sourcemapping for minified scripts?
        cache: {}, packageCache: {}, fullPaths: true // Requirement of watchify
    });
    return bundler;
}
gulp.task('js', function () {

    var bundler = createbundler();

    bundler.bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer())// <----- convert from streaming to buffered vinyl file object
        .pipe(uglify())
        // Create the initial bundle when starting the task
        .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
});

gulp.task('js-shim-sham', function () {
    gulp.src('./node_modules/es5-shim/es5-*.min.js')
            .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
    console.log("updated shim-sham");
});
gulp.task('js-dev', function () {

    var watcher = watchify(createbundler());

    return watcher
    .on('update', function () { // When any files update
        var updateStart = Date.now();
        console.log('Updating!');
        watcher.bundle().pipe(source('bundle.js'))
        .pipe(buffer())// <----- convert from streaming to buffered vinyl file object
        .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
        console.log('Updated!', (Date.now() - updateStart) + 'ms');
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())// <----- convert from streaming to buffered vinyl file object
   // .pipe(uglify())
    // Create the initial bundle when starting the task
    .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
});

var runcss = function () {
    var updateStart = Date.now();
    gulp.src('./app/css/document/*.css')
            .pipe(concat('main.css'))
            .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/css'));

    console.log('Updated!', (Date.now() - updateStart) + 'ms');
};

var runimages = function () {
    var updateStart = Date.now();
    gulp.src('./app/img/*.*')
            .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/img'));
    console.log('Updated!', (Date.now() - updateStart) + 'ms');
};
gulp.task('styles', function () {

    runcss();
    runimages();

});
gulp.task('styles-dev', function () {
    runcss();

    gulp.watch('./app/css/document/*.css', runcss);

    runimages();
    gulp.watch('./app/img/*.*', runimages);

});

// Just running the two tasks
gulp.task('build-dev', ['js-dev', 'styles-dev', 'js-shim-sham']);

// Just running the two tasks
gulp.task('build', ['js', 'styles', 'js-shim']);

Corson

Dan, any progress? I was wondering if you're able to implement Flux using .net MVC and React. I have a related question posted here: #31600492 – Dowzall

I answered on your other post (but it may be confusing). Basically, our continuous integration build servers have node.js installed; they run a gulp task that pushes all jsx and js files through node.js to spit out a static pure javascript file that can be served up by our web servers without node.js installed on them. -- the client gets the "bundle.js" file in the above code sample. – Corson

@Dowzall Here is an approach for using React in ASP.NET that gives you the freedom to use flux or redux. It also has support for server/client side routing using react-router. github.com/pauldotknopf/react-dot-net – Fini

Answer 2

Check out react-dot-not.

It uses webpack/gulp with ASP.MVC. it supports redux/flux, supports client side routing with react-router, with an F5 at any time to re-render the same page from the server.

Fini

Hi Paul, please help to identify and close duplicates is you find them, instead of linking to your git several times. – Budweis