diff --git a/js/package.json b/js/package.json index 0c7886673..e52ce8d6e 100644 --- a/js/package.json +++ b/js/package.json @@ -35,7 +35,7 @@ "ci:build:dll": "NODE_ENV=production webpack --config webpack/vendor", "ci:build:npm": "NODE_ENV=production webpack --config webpack/npm", "start": "npm install && npm run build:lib && npm run build:dll && npm run start:app", - "start:app": "webpack-dev-server --config webpack/config -d --history-api-fallback --open --hot --inline --progress --colors --port 3000", + "start:app": "node webpack/dev.server", "clean": "rm -rf ./build ./coverage", "coveralls": "npm run testCoverage && coveralls < coverage/lcov.info", "lint": "eslint --ignore-path .gitignore ./src/", @@ -80,6 +80,7 @@ "eslint-plugin-promise": "~2.0.0", "eslint-plugin-react": "~5.1.1", "eslint-plugin-standard": "~2.0.0", + "express": "~4.14.0", "extract-loader": "0.0.2", "extract-text-webpack-plugin": "~1.0.1", "file-loader": "~0.8.5", @@ -88,6 +89,7 @@ "history": "~2.0.0", "html-loader": "~0.4.4", "html-webpack-plugin": "~2.24.1", + "http-proxy-middleware": "~0.17.2", "husky": "~0.11.9", "ignore-styles": "2.0.0", "image-webpack-loader": "~1.8.0", @@ -115,7 +117,7 @@ "style-loader": "~0.13.0", "url-loader": "~0.5.7", "webpack": "~1.13.2", - "webpack-dev-server": "~1.15.2", + "webpack-dev-middleware": "~1.8.4", "webpack-error-notification": "0.1.6", "webpack-hot-middleware": "~2.13.2", "websocket": "~1.0.23" diff --git a/js/src/views/Dapps/dappsStore.js b/js/src/views/Dapps/dappsStore.js index f9fc4863c..9a86c3d8d 100644 --- a/js/src/views/Dapps/dappsStore.js +++ b/js/src/views/Dapps/dappsStore.js @@ -128,9 +128,15 @@ export default class DappsStore { } _getHost (api) { - return process.env.NODE_ENV === 'production' + const host = process.env.DAPPS_URL || (process.env.NODE_ENV === 'production' ? this._api.dappsUrl - : ''; + : ''); + + if (host === '/') { + return ''; + } + + return host; } _fetchBuiltinApps () { diff --git a/js/build-server.js b/js/webpack/build.server.js similarity index 66% rename from js/build-server.js rename to js/webpack/build.server.js index c10630ab0..c1e803f56 100644 --- a/js/build-server.js +++ b/js/webpack/build.server.js @@ -15,7 +15,7 @@ // along with Parity. If not, see . // test only /** - * Run `PARITY_URL="127.0.0.1:8180" NODE_ENV="production" npm run build` + * Run `DAPPS_URL="/" PARITY_URL="127.0.0.1:8180" NODE_ENV="production" npm run build` * to build the project ; use this server to test that the minifed * version is working (this is a simple proxy server) */ @@ -23,39 +23,17 @@ var express = require('express'); var proxy = require('http-proxy-middleware'); +var Shared = require('./shared'); + var app = express(); var wsProxy = proxy('ws://127.0.0.1:8180', { changeOrigin: true }); +Shared.addProxies(app); + app.use(express.static('.build')); - -app.use('/api/*', proxy({ - target: 'http://127.0.0.1:8080', - changeOrigin: true -})); - -app.use('/app/*', proxy({ - target: 'http://127.0.0.1:8080', - changeOrigin: true, - pathRewrite: { - '^/app': '' - } -})); - -app.use('/parity-utils/*', proxy({ - target: 'http://127.0.0.1:3000', - changeOrigin: true, - pathRewrite: { - '^/parity-utils': '' - } -})); - -app.use('/rpc/*', proxy({ - target: 'http://127.0.0.1:8080', - changeOrigin: true -})); - app.use(wsProxy); -var server = app.listen(3000); - +var server = app.listen(process.env.PORT || 3000, function () { + console.log('Listening on port', server.address().port); +}); server.on('upgrade', wsProxy.upgrade); diff --git a/js/webpack/config.js b/js/webpack/config.js index 77eaceee5..814c731a3 100644 --- a/js/webpack/config.js +++ b/js/webpack/config.js @@ -40,6 +40,7 @@ module.exports = { index: './index.js' }), output: { + publicPath: '/', path: path.join(__dirname, '../', DEST), filename: '[name].[hash].js' }, @@ -145,13 +146,5 @@ module.exports = { } return plugins; - }()), - - devServer: { - contentBase: path.resolve(__dirname, `../${DEST}`), - historyApiFallback: false, - quiet: false, - hot: !isProd, - proxy: Shared.proxies - } + }()) }; diff --git a/js/webpack/dev.server.js b/js/webpack/dev.server.js new file mode 100644 index 000000000..7ebdd815e --- /dev/null +++ b/js/webpack/dev.server.js @@ -0,0 +1,68 @@ +// Copyright 2015, 2016 Ethcore (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +const webpack = require('webpack'); +const webpackDevMiddleware = require('webpack-dev-middleware'); +const webpackHotMiddleware = require('webpack-hot-middleware'); + +const http = require('http'); +const express = require('express'); + +const webpackConfig = require('./config'); +const Shared = require('./shared'); + +const hotMiddlewareScript = 'webpack-hot-middleware/client'; + +/** + * Add webpack hot middleware to each entry in the config + * and HMR to the plugins + */ +(function updateWebpackConfig () { + Object.keys(webpackConfig.entry).forEach((key) => { + const entry = webpackConfig.entry[key]; + + webpackConfig.entry[key] = [].concat(entry, hotMiddlewareScript); + }); + + webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin()); + webpackConfig.plugins.push(new webpack.NoErrorsPlugin()); +})(); + +const app = express(); +const compiler = webpack(webpackConfig); + +app.use(webpackDevMiddleware(compiler, { + noInfo: false, + quiet: false, + publicPath: webpackConfig.output.publicPath, + stats: { + colors: true + } +})); + +app.use(webpackHotMiddleware(compiler, { + log: console.log +})); + +app.use(express.static(webpackConfig.output.path)); + +// Add the dev proxies in the express App +Shared.addProxies(app); + +const server = http.createServer(app); +server.listen(process.env.PORT || 3000, function () { + console.log('Listening on port', server.address().port); +}); diff --git a/js/webpack/shared.js b/js/webpack/shared.js index f5ef423b9..0fe3d3275 100644 --- a/js/webpack/shared.js +++ b/js/webpack/shared.js @@ -46,18 +46,26 @@ function getPlugins (_isProd = isProd) { ] }), + new HappyPack({ + id: 'babel', + threads: 4, + loaders: ['babel'] + }), + new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify(ENV), RPC_ADDRESS: JSON.stringify(process.env.RPC_ADDRESS), PARITY_URL: JSON.stringify(process.env.PARITY_URL), + DAPPS_URL: JSON.stringify(process.env.DAPPS_URL), LOGGING: JSON.stringify(!isProd) } - }) + }), + + new webpack.optimize.OccurrenceOrderPlugin(!_isProd) ]; if (_isProd) { - plugins.push(new webpack.optimize.OccurrenceOrderPlugin(false)); plugins.push(new webpack.optimize.DedupePlugin()); plugins.push(new webpack.optimize.UglifyJsPlugin({ screwIe8: true, @@ -97,47 +105,48 @@ const postcss = [ }) ]; -const proxies = [ - { - context: (pathname, req) => { - return pathname === '/' && req.method === 'HEAD'; - }, +function addProxies (app) { + const proxy = require('http-proxy-middleware'); + + app.use(proxy((pathname, req) => { + return pathname === '/' && req.method === 'HEAD'; + }, { target: 'http://127.0.0.1:8180', changeOrigin: true, autoRewrite: true - }, - { - context: '/api', + })); + + app.use('/api', proxy({ target: 'http://127.0.0.1:8080', changeOrigin: true, autoRewrite: true - }, - { - context: '/app', + })); + + app.use('/app', proxy({ target: 'http://127.0.0.1:8080', changeOrigin: true, pathRewrite: { '^/app': '' } - }, - { - context: '/parity-utils', + })); + + app.use('/parity-utils', proxy({ target: 'http://127.0.0.1:3000', changeOrigin: true, pathRewrite: { '^/parity-utils': '' } - }, - { - context: '/rpc', + })); + + app.use('/rpc', proxy({ target: 'http://127.0.0.1:8080', changeOrigin: true - } -]; + })); +} module.exports = { getPlugins: getPlugins, dappsEntry: getDappsEntry(), - postcss: postcss, - proxies: proxies + addProxies: addProxies, + postcss: postcss }; diff --git a/js/webpack/vendor.js b/js/webpack/vendor.js index 2e7edc771..c7efe3edf 100644 --- a/js/webpack/vendor.js +++ b/js/webpack/vendor.js @@ -29,6 +29,7 @@ let modules = [ 'brace', 'browserify-aes', 'chart.js', + 'ethereumjs-tx', 'lodash', 'material-ui', 'mobx', @@ -57,7 +58,8 @@ module.exports = { }, { test: /\.js$/, - loaders: [ 'happypack/loader?id=js' ] + include: /(ethereumjs-tx)/, + loaders: [ 'happypack/loader?id=babel' ] } ] },