Use webpack with Sails.js

[mithlon...@gmail.com]

I'm working on getting sails set up to compile JSX for a React app and am wanting to use webpack.  Googling around turned up this hook: https://github.com/balderdash-projects/sails-webpack

I've got it set up as near as I can tell like that page describes (webpack.js in /config where I pasted what they have there; the only difference is I added a require for path since it was blowing up on that reference).  I can lift sails successfully, but .tpm/public/js still has the old contents from the last time I ran with the grunt hook enabled.

I don't get any errors, but the webpack hook doesn't seem to be running.  When I run 

sails lift --verbose

 I can see a lot of other hooks announcing that they've loaded, but webpack isn't among them.

That's one thing.  The other is that the default grunt tasks were nice (clean, uglify, etc.).  If I disable grunt entirely, does the webpack hook cover similar things?  Do I need to come up with equivalents that will work with this new webpack-based asset pipeline?

[mithlon...@gmail.com]

I guess I should ask the bigger question - is there a much better and easier way to do js modules for React with Sails?  Most of the tutorials and documentation I've seen surrounding React mention using webpack or browserify, and people seem to lean towards webpack.  If there's a grunt way to use webpack after the other default tasks run to get the finished products module'd up nicely, I'd be up for that.  I have to imagine with the popularity of both Sails and React that others have a workflow and setup that's been hammered on and is working for them.  Suggestions on approach?

[Pascal Martineau]

It seems sails-webpack does not reproduce what grunt hook does (clean, uglify, etc), so I'd suggest using grunt-webpack instead. This way you only add the necessary grunt task to the default sails assets pipeline by configuring it in tasks/config/webpack.js and registering that in tasks/register/compileAssets.js.

A typical tasks/config/webpack.js would look like this (referred to as 'webpack:build' in compileAssets.js):

module.exports = function(grunt) {
  var webpackConfig = require("../../webpack.config.js");
  grunt.config.set('webpack', {
    options: webpackConfig,
    build: {
    }
  });
  grunt.loadNpmTasks('grunt-webpack');
};

You can specify your webpack options inline instead of requiring an external webpack.config.js, see the grunt-webpack documentation for details. Just make sure you install the required babel/webpack/loader packages along with the proper .babelrc configuration file in the root of your sails project. Also, you need to set the output path according to what sails expect, i.e. either assets/js/ (allow sails-linker to process the built js) or .tmp/public/js/ (don't link anything and include manually).

This approach relies on bundling the various js files you need with webpack when lifting your sails app, and does not support webpack-dev-server / hot module reloading (HMR). This would require messing with sails.config.http.middleware to include something like webpack-dev-middleware or somehow starting the webpack dev server on another port and using express-http-proxy. I did get this to work by having two separate projects (sails backend / vue frontend) and starting it with a Procfile, but I'm still looking for a cleaner way to integrate HMR more tightly with sails (better handling of default 403/404/500 views for example).

Hope this helps, I'll try updating this thread as I make progress towards integrating HMR.

[Mike D]

It is completely doable, I've been working on a complete grunt replacement for sailsjs with webpack. I have a fully working POC isomorphic sails + react app, with automatic routing for server side rendering etc.

Am just now working on making it into a sails hook that you can just npm install with minimal config - https://github.com/teamfa/sails-hook-react - i've pushed the WIP hook based on the POC there but it's far from complete, so, it's a mess and undocumented! Hoping to have a documented clean version by the end of the week. You'll find a lot of the magic in src/index.js and in the src/router folder.

From this I created various modules in the process:

 - sails-hook-webpack - (not the same as sails-webpack) this allows advanced compiler config plus automatic dev server booting should you require it as well as compiler events on `sails.on()`, 

   I went the middleware approach originally but there was a lot of issues this way that prevented HMR working. So this just creates an instance of `webpack-dev-server` with the config you specify.

 - linker-webpack-plugin - webpack plugin to allow same sort of functionality as sails-linker/grunt-linker for your layout.ejs or any text based file in general, not extension specific.

If you just want to roll your own config then feel free to use the two modules above. I've got layout.ejs working with the linker and a HMR react webpack build working with the hook before. 

[Pascal Martineau]

OMG I was dreaming about these two modules for weeks!!! Thanks so much!

[Salakar]

Just pushed a working sails project here: sails-universal-react-starter

Let me know your thoughts! Thanks