mirror of
https://github.com/fleetdm/fleet
synced 2026-04-21 13:37:30 +00:00
3a9381c5b3
* Add sensible React base to the app for frontend This PR attempts to "reactify" Kolide and provide a sane development environment that a front-end engineer would probably expect. This PR accomplishes by doing the following: 1. Reorganizes the app into a `server/` and `client/` folders to keep golang logic separated from react logic. 2. Adds an "asset pipeline" via webpack which knows how to build a js and css bundle. 3. Packages up all static assets in a go-bindata file so that the binary remains portable without external file dependencies. 1. Add a Makefile with several targets that will be common in everyday development. For example, we have `serve` target which spins up a nodejs reverse proxy on port 8081 which then watches for changed files, automatically rebuilds the app, and hot loads the new JS/CSS in. **Note:** Please use `make` to build the app, not `go build` as there are now several things that need to be orchestrated beyond the go code to build the app. * Create build if it doesn't exist, and use `go get` * Improve README to reflect new dev workflow * Document css vars and funcs and use alias paths * makefile and structure modifications
98 lines
2.6 KiB
JavaScript
98 lines
2.6 KiB
JavaScript
require('es6-promise').polyfill();
|
|
|
|
var path = require('path');
|
|
var webpack = require('webpack');
|
|
var autoprefixer = require('autoprefixer');
|
|
var precss = require('precss');
|
|
var functions = require('postcss-functions');
|
|
var ExtractTextPlugin = require("extract-text-webpack-plugin");
|
|
|
|
var postCssLoader = [
|
|
'css-loader?module',
|
|
'&localIdentName=[name]__[local]___[hash:base64:5]',
|
|
'&disableStructuralMinification',
|
|
'!postcss-loader'
|
|
];
|
|
|
|
var plugins = [
|
|
new webpack.NoErrorsPlugin(),
|
|
new webpack.optimize.DedupePlugin(),
|
|
new ExtractTextPlugin('bundle.css'),
|
|
];
|
|
|
|
if (process.env.NODE_ENV === 'production') {
|
|
plugins = plugins.concat([
|
|
new webpack.optimize.UglifyJsPlugin({
|
|
output: {comments: false},
|
|
test: /bundle\.js?$/
|
|
}),
|
|
new webpack.DefinePlugin({
|
|
'process.env': {NODE_ENV: JSON.stringify('production')}
|
|
})
|
|
]);
|
|
|
|
postCssLoader.splice(1, 1) // drop human readable names
|
|
};
|
|
|
|
var config = {
|
|
entry: {
|
|
bundle: path.join(__dirname, 'frontend/index.js')
|
|
},
|
|
output: {
|
|
path: path.join(__dirname, 'build'),
|
|
publicPath: "/assets/",
|
|
filename: '[name].js'
|
|
},
|
|
plugins: plugins,
|
|
module: {
|
|
loaders: [
|
|
{test: /\.css/, loader: ExtractTextPlugin.extract('style-loader', postCssLoader.join(''))},
|
|
{test: /\.(png|gif)$/, loader: 'url-loader?name=[name]@[hash].[ext]&limit=5000'},
|
|
{test: /\.svg$/, loader: 'url-loader?name=[name]@[hash].[ext]&limit=5000!svgo-loader?useConfig=svgo1'},
|
|
{test: /\.(pdf|ico|jpg|eot|otf|woff|ttf|mp4|webm)$/, loader: 'file-loader?name=[name]@[hash].[ext]'},
|
|
{test: /\.json$/, loader: 'json-loader'},
|
|
{
|
|
test: /\.jsx?$/,
|
|
include: path.join(__dirname, 'frontend'),
|
|
loaders: ['babel']
|
|
}
|
|
]
|
|
},
|
|
resolve: {
|
|
extensions: ['', '.js', '.jsx', '.css'],
|
|
alias: {
|
|
'#app': path.join(__dirname, 'frontend'),
|
|
'#c': path.join(__dirname, 'frontend/components'),
|
|
'#css': path.join(__dirname, 'frontend/css')
|
|
}
|
|
},
|
|
svgo1: {
|
|
multipass: true,
|
|
plugins: [
|
|
// by default enabled
|
|
{mergePaths: false},
|
|
{convertTransform: false},
|
|
{convertShapeToPath: false},
|
|
{cleanupIDs: false},
|
|
{collapseGroups: false},
|
|
{transformsWithOnePath: false},
|
|
{cleanupNumericValues: false},
|
|
{convertPathData: false},
|
|
{moveGroupAttrsToElems: false},
|
|
// by default disabled
|
|
{removeTitle: true},
|
|
{removeDesc: true}
|
|
]
|
|
},
|
|
postcss: function() {
|
|
return [autoprefixer, precss({
|
|
variables: {
|
|
variables: require('./frontend/css/vars')
|
|
}
|
|
}), functions({
|
|
functions: require('./frontend/css/funcs')
|
|
})]
|
|
}
|
|
};
|
|
|
|
module.exports = config;
|