Sample application: dynamic client-side app using express-react-views

[tenorviol]

Here is a 2nd sample application illustrating how to create a dynamic client-side application using this template middleware without modification. It works by using dangerouslySetInnerHTML inside of a static container template. There are a couple of outstanding pull requests with alternate solutions to this problem. Hopefully this one helps.

[tenorviol]

@zpao ping

[zpao]

Could just combine these into a single step with the reactify transform and then you don't need any tmp dirs and could probably drop the Makefile entirely, just putting it all in npm start.

You could even just export the function from your main module and expose that with browserify instead of setting window.main directly.

Further while we're here, it might be interesting to actually do this in express instead of a build step. I think we can get live changes on reload that way. https://github.com/ForbesLindesay/browserify-middleware

Not that this is bad, it's definitely the simplest way to get running but I think jumping to the next step might answer some questions for people (and also, Windows + Makefile don't really get along).

[tenorviol]

Good call on the reactify transform for Windows support. It has some strange properties, mainly that I either had to change all the template requires to include the extension, e.g. require('./SomeTemplate.jsx'); or I could change all extensions to .js. Going with the latter.

The browserify --standalone option was something I'd been missing. Thanks for pointing it out.

As for browserify-middleware, it looks really cool. Unfortunately, I couldn't get it to work due to some cryptic error about stream encoding. I have little patience to debug this right now.

[zpao]

This is clever without being too clever, I like it. It doesn't make it super clear that full requests will still go to the server unless you wire up everything to run client side. That actually could be a neat next example, using react-router or something.

The use of dangerouslySetInnerHTML is a bit disconcerting but I think that's ok (not great, but there's really no other way to do this).

[tenorviol]

@zpao Thank you for the feedback. I'll be using these ideas in the project that I distilled this example from.

The full request example is pretty much what I'm working at the moment. It's subtle and cool, but also somewhat difficult to explain. Forming a solid simple example of it will have to be a future project for my copious free time.

Thanks again!

[zpao]

This doesn't matter at all but you could also take advantage of the fact that map will call this with 3 args, the 2nd being the index :)

[tenorviol]

mind 💥

Sweet.

[zpao]

Awesome. Thanks for doing this. I'll merge this in an perhaps in my copious amounts of free time take a stab at integrating browserify-middleware into the flow.

[hoodsy]

Trying to get this setup working with a Gulp build, but struggling with the browserify build.

Any tips on putting this together? Have been trying to translate browserify -t babelify --standalone main views/main.js -o public/main.js into my gulp browserify task, but haven't had success yet.

@zpao @tenorviol

[tenorviol]

Sorry Logan, I've not really been a fan of gulp, so can't really help you. Maybe someone else knows. Good luck!

 On Sunday, November 8, 2015 3:15 PM, Logan Bernard <notifications@github.com> wrote:

Trying to get this setup working with a Gulp build, but struggling with the browserify build.Any tips on putting this together? Have been trying to translate browserify -t babelify --standalone main views/main.js -o public/main.js into my gulp browserify task, but haven't had success yet.@zpao @tenorviol —
Reply to this email directly or view it on GitHub.

[codebling]

@hoodsy per the Browserify API, try this:

var browserify = require('browserify');
gulp.task('browserify', function(){
  var b = browserify();

  return b.add('./browser/index.js')
    .transform('babelify', {presets: ['react']})
    .bundle()
    .pipe(source('bundle.js')) //the output file name. Seems hacky but correct according to gulp recipes
    .pipe(gulp.dest('./browser-out/'));
});

See also the Gulp recipes.