This is a personal blog post that is primarily intended for tracking my own learning rather than provided to the Alfresco Community for educational purposes. However if you find it useful, informative or have any comments on it then please comment below.
At the end of my last post I'd got to the point where I'd set up a basic Node.js server that supported authentication via Passport.js and acted as a proxy for authenticated requests to an Alfresco Repository. I've since update my project to use yarn and webpack (check out this tag for the revision at the time of writing this post).
As I did previously I started by doing some research into the various build tools that are available. The blog post that I'd followed to set up authentication was using Browserify, but after reading various blog posts (like this one) I decided to go with webpack.
I found this excellent post on webpack 2 (which at the time of writing is not officially released). The example described was using yarn instead of npm and in the spirit of wanting to try out new things (and already being familiar with npm) decided to give it a go.
There's not a huge amount to add to the main post on setting up webpack as it is so good, however I did end up using a different version (as is often the way, blog posts date very quickly when specifying versions so I won't even say which version I ended up using!).
The other major difference was in setting up the hot-reloading. The blog recommends using webpack-dev-server but this would provide an entirely different server and wouldn't provide me with all the authentication work that I'd previously done. Instead I switched to using webpack-dev-middleware.
The difference is that I configure my Express server to use the additional middle-ware for building the source. This required only the following code to setup:
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);
server.use(webpackDevMiddleware(compiler, {
publicPath: '/'
}));
This then worked with the exact same configuration that the blog post example had setup.
The main immediate benefit of setting this up was that I could remove the CDN loading of axios (that I was using for client-side XHR handling) and replace it with a simple import statement in my "app.js" file (of course I needed to ensure that my webpack built "app.bundle.js" was being loaded on my web page instead!)
This now means that I can use ES6 code in my JavaScript and don't need to worry about restarting the server between changes.
The next stage will be to get some initial components written and set up some testing for them.
