diff --git a/Vagrantfile b/Vagrantfile index f6208e3fcda3e4d3688099a0707c59798f9cdd54..3380da83a0336ab154bd321a3aa39a7b784c88c0 100644 --- a/Vagrantfile +++ b/Vagrantfile @@ -33,7 +33,6 @@ Vagrant.configure(2) do |config| # within the machine from a port on the host machine. In the example below, # accessing "localhost:8000" will access port 8000 on the guest machine. config.vm.network "forwarded_port", guest: 8000, host: 8000, id: "webserver" - config.vm.network "forwarded_port", guest: 3000, host: 3000, id: "webpack" # Create a private network, which allows host-only access to the machine # using a specific IP. diff --git a/gulpfile.js b/gulpfile.js index 2bffc4124dc1e72eff1f305b863977797294cbb2..85ed64030c0677b9e398a21198814269fb194643 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -62,9 +62,16 @@ var gulp = require('gulp'), sass = require('gulp-sass'), cleanCSS = require('gulp-clean-css'), touch = require('gulp-touch-cmd'), - webpack = require('webpack-stream'), + webpack = require('webpack'), + webpackStrm = require('webpack-stream'), + DevServer = require('webpack-dev-server'), exec = require('child_process').exec; + +// Load webpack config +var webpackDev = () => require(options.theme.app + 'webpack.dev.config.js'); +var webpackProd = () => require(options.theme.app + 'webpack.prod.config.js'); + // The sass files to process. var sassFiles = [ options.theme.sass + '**/*.scss', @@ -166,14 +173,14 @@ gulp.task('scripts:production', gulp.series('clean:js', function js () { // Build App. gulp.task('app', function() { return gulp.src(options.theme.app + 'src/') - .pipe(webpack( require(options.theme.app + 'webpack.dev.config.js') )) + .pipe(webpackStrm( webpackDev() )) .pipe(gulp.dest(options.theme.app_dest)); }) // Build Prod App gulp.task('app:production', function() { return gulp.src(options.theme.app + 'src/') - .pipe(webpack( require(options.theme.app + 'webpack.prod.config.js') )) + .pipe(webpackStrm( webpackProd() )) .pipe(gulp.dest(options.theme.app_dest)); }) @@ -225,6 +232,37 @@ gulp.task('watch:static', function watch () { return gulp.watch(options.theme.dest + '**/*.*', options.gulpWatchOptions, gulp.series('collectstatic')); }); +gulp.task('watch:app', function watch (callback) { + var webpackOptions = webpackDev(); + + webpackOptions.entry.unshift( + `webpack-dev-server/client?http://localhost:${webpackOptions.devServer.port}/`, + `webpack/hot/dev-server` + ); + + var serverOptions = Object.assign( + {}, webpackOptions.devServer, { + publicPath: '/app/', + stats: { + colors: true, + cached: false, + cachedAssets: false + } + } + ); + + var server = new DevServer( + webpack( webpackOptions ), + serverOptions + ) + + server.listen(3000, "localhost", function(err) { + if(err) throw new console.PluginError("webpack-dev-server", err); + // Server listening + console.log("[webpack-dev-server]", "Running"); + }); +}) + gulp.task('watch', gulp.parallel('watch:css', 'watch:lint:sass', 'watch:js', 'watch:lint:js', 'watch:images', 'watch:fonts', 'watch:static')); // Build everything. diff --git a/opentech/static_src/src/app/webpack.base.config.js b/opentech/static_src/src/app/webpack.base.config.js index cc5907b5da549673ca159e80d77be8f624619962..21f77fda909a1b11309d69d4e475b8cb02e6273c 100644 --- a/opentech/static_src/src/app/webpack.base.config.js +++ b/opentech/static_src/src/app/webpack.base.config.js @@ -3,7 +3,7 @@ var path = require("path") module.exports = { context: __dirname, - entry: './src/index', + entry: ['./src/index'], output: { filename: "[name]-[hash].js" diff --git a/opentech/static_src/src/app/webpack.dev.config.js b/opentech/static_src/src/app/webpack.dev.config.js index ce97aee7ded896e275251f7413a694af46c86a6b..a7fc1ed6ea199604a6ee317b6db1a5f34559b925 100644 --- a/opentech/static_src/src/app/webpack.dev.config.js +++ b/opentech/static_src/src/app/webpack.dev.config.js @@ -17,12 +17,8 @@ config.plugins = config.plugins.concat([ // Add a loader for JSX files with react-hot enabled config.devServer = { - allowedHosts: [ - '.localhost', - ], hotOnly: true, - port: 3000, - host: '0.0.0.0' + port: 3000 } config.devtool = 'source-map'