github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-03-03 18:20:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1354 from weaveworks/asset-fingerprinting

Browse Source 
Asset fingerprinting
This commit is contained in:
David
2016-04-21 15:59:52 +02:00
parent e6c3bb1665 b1f8e89227
commit 7e9edb03a7
15 changed files with 88 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@@ -109,7 +109,7 @@ endif
ifeq ($(BUILD_IN_CONTAINER),true)
client/build/app.js: $(shell find client/app/scripts -type f) $(SCOPE_UI_BUILD_UPTODATE)
client/build/app.js: $(shell find client/app -type f) $(SCOPE_UI_BUILD_UPTODATE)
mkdir -p client/build
$(SUDO) docker run $(RM) $(RUN_FLAGS) -v $(shell pwd)/client/app:/home/weave/app \
-v $(shell pwd)/client/build:/home/weave/build \

3
client/.gitignore vendored
View File

@@ -1,5 +1,4 @@
node_modules
build/app.js
build/*[woff2?|ttf|eot|svg]
build/
coverage/
test/*png

23
client/README.md
View File

@@ -1,14 +1,10 @@
# Scope UI
## Requirements
## Getting Started (using local node)
- You need nodejs 4.2.2 and a running `weavescope` container
- Setup: `npm install`
- Build: `npm run build`, output will be in `build/`
- Develop: `BACKEND_HOST=<dockerhost-ip>:4040 npm start` and then open `http://localhost:4042/`
- Develop: `BACKEND_HOST=<dockerhost-ip> npm start` and then open `http://localhost:4042/`
This will start a webpack-dev-server that serves the UI and proxies API requests to the container.
@@ -19,6 +15,11 @@ This will start a webpack-dev-server that serves the UI and proxies API requests
This will start a webpack-dev-server that serves the UI from the UI build container and proxies API requests to the weavescope container.
## Test Production Bundles Locally
- Build: `npm run build`, output will be in `build/`
- Serve files from `build/`: `BACKEND_HOST=<dockerhost-ip> npm run start-production` and then open `http://localhost:4042/`
## Coding
This directory has a `.eslintrc`, make sure your editor supports linter hints.
@@ -26,15 +27,15 @@ To run a linter, you also run `npm run lint`.
## Logging
To enable logging in the console, activate it via `localStorage` in the dev tools console:
```
localStorage["debug"] = "scope:*"
```
The Scope UI uses [debug](https://www.npmjs.com/package/debug) for logging, e.g.,:
```
const debug = require('debug')('scope:app-store');
debug('Store log message');
```
To enable logging in the console, activate it via `localStorage` in the dev tools console:
```
localStorage["debug"] = "scope:*"
```

3
client/build/index.html → client/app/html/index.html
View File

@@ -13,8 +13,5 @@
<div class="wrap">
<div id="app"></div>
</div>
<script src="vendors.js"></script>
<script src="app.js"></script>
</body>
</html>

BIN
client/app/images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 741 B

1
client/app/scripts/contrast-main.js
View File

@@ -1,5 +1,6 @@
require('font-awesome-webpack');
require('../styles/contrast.less');
require('../images/favicon.ico');
import React from 'react';
import ReactDOM from 'react-dom';

1
client/app/scripts/main.js
View File

@@ -1,5 +1,6 @@
require('font-awesome-webpack');
require('../styles/main.less');
require('../images/favicon.ico');
import React from 'react';
import ReactDOM from 'react-dom';

1
client/app/scripts/terminal-main.js
View File

@@ -1,4 +1,5 @@
require('../styles/main.less');
require('../images/favicon.ico');
import React from 'react';
import ReactDOM from 'react-dom';

20
client/build/contrast.html
View File

@@ -1,20 +0,0 @@
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Weave Scope</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="wrap">
<div id="app"></div>
</div>
<script src="vendors.js"></script>
<script src="contrast-app.js"></script>
</body>
</html>

20
client/build/debug.html
View File

@@ -1,20 +0,0 @@
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Weave Scope</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="wrap">
<div id="app"></div>
</div>
<script src="vendors.js"></script>
<script src="app.js"></script>
</body>
</html>

20
client/build/terminal.html
View File

@@ -1,20 +0,0 @@
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Weave Scope Terminal</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="wrap">
<div id="app"></div>
</div>
<script src="vendors.js"></script>
<script src="terminal-app.js"></script>
</body>
</html>

3
client/package.json
View File

@@ -37,13 +37,16 @@
"babel-loader": "6.2.4",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"clean-webpack-plugin": "^0.1.8",
"css-loader": "0.23.1",
"eslint": "2.4.0",
"eslint-config-airbnb": "6.1.0",
"eslint-loader": "1.3.0",
"eslint-plugin-jasmine": "1.6.0",
"eslint-plugin-react": "4.2.2",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "0.8.5",
"html-webpack-plugin": "^2.16.0",
"http-proxy-rules": "^1.0.1",
"immutable-devtools": "0.0.6",
"jest-cli": "~0.9.2",

40
client/server.js
View File

@@ -21,34 +21,33 @@ var WEBPACK_SERVER_HOST = process.env.WEBPACK_SERVER_HOST || 'localhost';
*
************************************************************/
// Serve application file depending on environment
app.get(/(app|contrast-app|terminal-app|vendors).js/, function(req, res) {
var filename = req.originalUrl;
if (process.env.NODE_ENV === 'production') {
res.sendFile(__dirname + '/build' + filename);
} else {
res.redirect('//' + WEBPACK_SERVER_HOST + ':4041/build' + filename);
}
});
// Proxy to backend
var proxy = httpProxy.createProxy({
var backendProxy = httpProxy.createProxy({
ws: true,
target: 'http://' + BACKEND_HOST + ':4040'
});
proxy.on('error', function(err) {
backendProxy.on('error', function(err) {
console.error('Proxy error', err);
});
app.all('/api*', backendProxy.web.bind(backendProxy));
app.all('/api*', proxy.web.bind(proxy));
// Serve index page
app.use(express.static('build'));
// Serve application file depending on environment
if (process.env.NODE_ENV === 'production') {
// serve all precompiled content from build/
app.use(express.static('build'));
} else {
// redirect the JS bundles
app.get(/.*js/, function(req, res) {
res.redirect('//' + WEBPACK_SERVER_HOST + ':4041' + req.originalUrl);
});
// proxy everything else
var staticProxy = httpProxy.createProxy({
target: 'http://' + WEBPACK_SERVER_HOST + ':4041'
});
app.all('*', staticProxy.web.bind(staticProxy));
}
/*************************************************************
*
@@ -64,7 +63,6 @@ if (process.env.NODE_ENV !== 'production') {
var config = require('./webpack.local.config');
new WebpackDevServer(webpack(config), {
publicPath: 'http://' + WEBPACK_SERVER_HOST + ':4041/build/',
hot: true,
noInfo: true,
historyApiFallback: true,
@@ -91,7 +89,7 @@ var server = app.listen(port, function () {
console.log('Scope UI listening at http://%s:%s', host, port);
});
server.on('upgrade', proxy.ws.bind(proxy));
server.on('upgrade', backendProxy.ws.bind(backendProxy));
/*************************************************************

21
client/webpack.local.config.js
View File

@@ -1,6 +1,7 @@
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
/**
* This is the Webpack configuration file for local development. It contains
@@ -47,7 +48,6 @@ module.exports = {
// by the dev server for dynamic hot loading.
output: {
path: path.join(__dirname, 'build/'),
publicPath: 'http://' + WEBPACK_SERVER_HOST + ':4041/build/',
filename: '[name].js'
},
@@ -55,7 +55,22 @@ module.exports = {
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
chunks: ['vendors', 'contrast-app'],
template: 'app/html/index.html',
filename: 'contrast.html'
}),
new HtmlWebpackPlugin({
chunks: ['vendors', 'terminal-app'],
template: 'app/html/index.html',
filename: 'terminal.html'
}),
new HtmlWebpackPlugin({
chunks: ['vendors', 'app'],
template: 'app/html/index.html',
filename: 'index.html'
})
],
// Transform source code using Babel and React Hot Loader
@@ -85,7 +100,7 @@ module.exports = {
loader: 'url-loader?limit=10000&minetype=application/font-woff'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
test: /\.(ttf|eot|svg|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
},
{

33
client/webpack.production.config.js
View File

@@ -2,6 +2,10 @@ var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var path = require('path');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var GLOBALS = {
'process.env': {NODE_ENV: '"production"'}
};
@@ -43,16 +47,21 @@ module.exports = {
loaders: [
{
test: /\.less$/,
loader: 'style-loader!css-loader?minimize!postcss-loader!less-loader'
loader: ExtractTextPlugin.extract('style-loader',
'css-loader?minimize!postcss-loader!less-loader')
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
test: /\.(ttf|eot|svg|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
},
{
test: /\.ico$/,
loader: 'file-loader?name=[name].[ext]'
},
{ test: /\.jsx?$/, exclude: /node_modules|vendor/, loader: 'babel' }
]
},
@@ -72,6 +81,7 @@ module.exports = {
},
plugins: [
new CleanWebpackPlugin(['build']),
new webpack.DefinePlugin(GLOBALS),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
new webpack.optimize.OccurenceOrderPlugin(true),
@@ -80,6 +90,25 @@ module.exports = {
compress: {
warnings: false
}
}),
new ExtractTextPlugin('style-[name].css'),
new HtmlWebpackPlugin({
hash: true,
chunks: ['vendors', 'contrast-app'],
template: 'app/html/index.html',
filename: 'contrast.html'
}),
new HtmlWebpackPlugin({
hash: true,
chunks: ['vendors', 'terminal-app'],
template: 'app/html/index.html',
filename: 'terminal.html'
}),
new HtmlWebpackPlugin({
hash: true,
chunks: ['vendors', 'app'],
template: 'app/html/index.html',
filename: 'index.html'
})
]
};