From 6338c4f066559b0670ca1f02d6219f8db9d602d9 Mon Sep 17 00:00:00 2001 From: Eli Ribble Date: Mon, 16 May 2016 18:19:07 -0600 Subject: [PATCH] Add working webpack config and react app It doesn't do much yet, I'm just sketching out the basic elements and starting to get a basis for something that will work --- gulpfile.js | 98 ++++++++++++++++++++++++++++++++++++++++++++ package.json | 26 +++++++++++- templates/index.html | 2 + webpack-assets.json | 1 + webpack.config.js | 52 +++++++++++++++++++++++ 5 files changed, 177 insertions(+), 2 deletions(-) create mode 100644 gulpfile.js create mode 100644 webpack-assets.json create mode 100644 webpack.config.js diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..32be33c --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,98 @@ +var htmlreplace = require('gulp-html-replace'); +var gulp = require("gulp"); +var gutil = require("gulp-util"); +var karma = require("karma"); +var minimist = require('minimist'); +var path = require('path'); +var rev = require('gulp-rev'); +var shell = require('gulp-shell'); +var sprintf = require('sprintf'); +var webpack = require("webpack"); +var webpackConfig = require("./webpack.config.js"); +var WebpackDevServer = require("webpack-dev-server"); + +var knownOptions = { + string: 'env', + string: 'region', + string: 'bucket', + string: 'cloudfront', + string: 'colors', + default: { bucket: null, cloudfront: null, colors: true, env: null, region: null } +}; +var options = minimist(process.argv.slice(2), knownOptions); +if(options.env && options.env !== 'production' && options.env !== 'development') { + throw new Error('Unknown environment config: ' + options.env); +} + +if(options.colors === true || options.colors == 'true' || options.colors == 'yes') { + options.colors = true; +} else { + options.colors = false; +} + +gulp.task('build', ['clean', 'build:webpack']); +gulp.task('clean', shell.task(['rm -rf build'])); +gulp.task('default', ['webpack-dev-server']); +gulp.task('publish', ['clean', 'build', 'publish:assets', 'publish:assets:index', 'publish:index']); + +gulp.task("build:webpack", ['clean'], function(callback) { + var config = Object.create(webpackConfig); + var SaveAssetsJson = require('assets-webpack-plugin'); + + config.output = { + filename : "bundle.js", + path : path.join(__dirname, 'build'), + publicPath: "./" + }; + + config.plugins = (config.plugins || []).concat( + new webpack.DefinePlugin({ + "process.env": { + "NODE_ENV": JSON.stringify(options.env) + } + }), + new webpack.optimize.DedupePlugin(), + new webpack.optimize.UglifyJsPlugin(), + new SaveAssetsJson() + ); + + webpack(config, function(err, stats) { + if(err) throw new gutil.PluginError("webpack:build", err); + gutil.log("[webpack:build]", stats.toString({ + colors: options.colors + })); + callback(); + }); +}); + +gulp.task("webpack-dev-server", function(callback) { + var host = process.env.HOST || "localhost"; + var port = parseInt(process.env.PORT, 10) || 8080; + var config = Object.create(webpackConfig); + config.devtool = "eval"; + config.debug = true; + + new WebpackDevServer(webpack(config), { + stats: { + colors: true + } + }).listen(port, host, function(err) { + if(err) throw new gutil.PluginError("webpack-dev-server", err); + gutil.log("[webpack-dev-server]", sprintf("http://%s:%d/webpack-dev-server/index.html", host, port)); + }); +}); + +gulp.task("test", function(done) { + var server = new karma.Server({ + configFile: __dirname + "/karma.conf.js", + singleRun: true, + }, done); + server.start(); +}); + +gulp.task("tdd", function(done) { + var server = new karma.Server({ + configFile: __dirname + "/karma.conf.js", + }, done); + server.start(); +}); diff --git a/package.json b/package.json index 980fa64..6b75eaf 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "description": "For tracking expenses", "main": "main.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "build": "babel lib -d build" }, "repository": { "type": "git", @@ -22,10 +23,31 @@ "homepage": "https://github.com/EliRibble/vanth#readme", "dependencies": { "react": "^15.0.2", + "react-bootstrap": "^0.29.4", + "react-dom": "^15.0.2", "react-redux": "^4.4.5", - "redux": "^3.5.2" + "redux": "^3.5.2", + "redux-logger": "^2.6.1", + "redux-thunk": "^2.1.0", + "urllite": "^0.5.0" }, "directories": { "test": "tests" + }, + "devDependencies": { + "assets-webpack-plugin": "^3.4.0", + "babel-cli": "^6.8.0", + "babel-loader": "^6.2.4", + "babel-preset-es2015": "^6.6.0", + "babel-preset-react": "^6.5.0", + "gulp": "^3.9.1", + "gulp-html-replace": "^1.5.5", + "gulp-rev": "^7.0.0", + "gulp-shell": "^0.5.2", + "karma": "^0.13.22", + "rollup": "^0.26.3", + "sprintf": "^0.1.5", + "webpack": "^1.13.0", + "webpack-dev-server": "^1.14.1" } } diff --git a/templates/index.html b/templates/index.html index 956f36f..18aacdc 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,5 +1,6 @@ +
{% if current_user and current_user.is_authenticated %}

Hello {{ current_user.name }} from Vanth

@@ -13,5 +14,6 @@ Log in
{% endif %} + diff --git a/webpack-assets.json b/webpack-assets.json new file mode 100644 index 0000000..2077191 --- /dev/null +++ b/webpack-assets.json @@ -0,0 +1 @@ +{"main":{"js":"./bundle.js"}} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..5008455 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,52 @@ +var path = require('path'); +var webpack = require('webpack'); + +module.exports = { + devtool: 'inline-source-map', + entry: './lib/app.js', + output: { + path: __dirname, + filename: 'bundle.js' + }, + module: { + loaders: [{ + test: /^((?!\.config\.).)*\.(js|jsx)$/, + loader: 'babel', + exclude: /(node_modules|bower_components)/, + query: { + cacheDirectory: true, + presets: ['es2015', 'react'], + } + }, + { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' }, + { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }, + { test: /\.(png|jpg)$/, loader: "url-loader?prefix=images/&limit=5000" }, + { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/font-woff" }, + { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/font-woff" }, + { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/octet-stream" }, + { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, + { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=image/svg+xml" }, + { test: /\.otf$/, loader: "file-loader?prefix=font/" }, + ] + }, + externals: { + }, + resolve: { + alias: { + styles: __dirname + '/styles', + images: __dirname + '/images', + vanth : __dirname + '/lib', + widget: __dirname + '/lib/widget', + tests : __dirname + '/tests', + }, + extensions: ['', '.js', '.jsx', '.less', '.png', '.jpg'] + }, + plugins: [ + new webpack.ProvidePlugin({ + $: "jquery", + jQuery: "jquery", + "window.jQuery": "jquery", + "root.jQuery": "jquery", + }) + ] +};