Skip to content

Commit

Permalink
Centralize build output to /dist with copy to config location support
Browse files Browse the repository at this point in the history
  • Loading branch information
@drolsen
drolsen committed Sep 12, 2019
1 parent 291abbd commit 3ab0af8
Show file tree
Hide file tree
Showing 13 changed files with 83 additions and 43 deletions.
41 changes: 36 additions & 5 deletions build/configs/build.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
*/

// devDependencies
const fs = require('fs');
const fs = require('fs-extra');
const path = require('path');
const Package = require('../../package.json');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { WebpackHooks } = require('./webpack/webpack.plugins');

// build configuration files
const js = require('./js/js.config.js'); // all js file related build configurations
Expand All @@ -23,9 +24,9 @@ const config = {
assets: './build/assets.jsx'
},
output: {
path: path.resolve(__dirname, `../../${Package.directories.dest}`), // sets default location for all compiled files
publicPath: Package.directories.publicPath, // sets a default public location (required by react-routes)
filename: `.${Package.directories.assetPath}/js/[name].js`, // sets filename of bundled .js file (relative to output.path config)
path: path.resolve(__dirname, `../../dist`), // sets default location for all compiled files
publicPath: Package.directories.publicPath, // sets a default public location (required by react-routes)
filename: `${Package.directories.assetPath}/js/[name].js`, // sets filename of bundled .js file (relative to output.path config)
pathinfo: false
},
module: {
Expand All @@ -41,7 +42,33 @@ const config = {
...js.plugins, // see build/config/js/js.config.js
...img.plugins, // see build/config/img/img.config.js
...font.plugins, // see build/config/font/font.config.js
...alias.plugins // see build/config/alias.config.js
...alias.plugins, // see build/config/alias.config.js,
new WebpackHooks({
done: () => {
// If output location is not dist, we copy results from dist
if (Package.directories.dest !== 'dist') {
// Clean configured output location
fs.remove(
path.resolve(
__dirname,
`../../${Package.directories.dest}/${Package.directories.assetPath}/img`
)
);

// Copy from /dist to configured output location
fs.copy(
path.resolve(
__dirname,
`../../dist`
),
path.resolve(
__dirname,
`../../${Package.directories.dest}`
)
);
}
}
})
],
...stats.config, // see build/configs/webpack/stats.config.js
resolve: {
Expand All @@ -52,6 +79,10 @@ const config = {
performance: {
maxAssetSize: 170000,
assetFilter: (asset) => {
if (asset.match('guide.js')) {
return false;
}

return asset.match('assets.js');
}
},
Expand Down
2 changes: 1 addition & 1 deletion build/configs/css/css.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ module.exports = {
]
}),
new MiniCssExtractPlugin({ // used to compile our css file.
filename: `.${Package.directories.assetPath}/css/[name].css`,
filename: `${Package.directories.assetPath}/css/[name].css`,
chunkFilename: './[name].css'
})
]
Expand Down
10 changes: 5 additions & 5 deletions build/configs/dev.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ const config = {
guide: './build/guide.jsx' // entry point for style guide assets
},
output: {
path: path.resolve(__dirname, `../../${Package.directories.dest}`), // sets default location for all compiled files
publicPath: Package.directories.publicPath, // sets a default public location (required by react-routes)
filename: `.${Package.directories.assetPath}/js/[name].js`, // sets filename of bundled .js file (relative to output.path config)
path: path.resolve(__dirname, `../../dist`), // sets default location for all compiled files
publicPath: '/', // sets a default public location (required by react-routes)
filename: `${Package.directories.assetPath}/js/[name].js`, // sets filename of bundled .js file (relative to output.path config)
pathinfo: false
},
module: {
Expand Down Expand Up @@ -66,8 +66,8 @@ const config = {

// Prod vs. Dev config customizing
module.exports = (env, argv) => {
if (!fs.existsSync(path.resolve(__dirname, `../../${Package.directories.dest}/index.html`))) {
execSync('npm run guide'); // when missing a required "first time build"
if (!fs.existsSync(path.resolve(__dirname, '../../dist/index.html'))) {
execSync('npm run guide'); // fix for cold guide builds
}

return config;
Expand Down
2 changes: 1 addition & 1 deletion build/configs/font/font.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ module.exports = {
'loader': 'file-loader',
'options': {
'name': '[name].[ext]',
'outputPath': `.${Package.directories.assetPath}/fonts/`
'outputPath': `${Package.directories.assetPath}/fonts/`
}
}
]
Expand Down
16 changes: 4 additions & 12 deletions build/configs/guide.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ const config = {
guide: './build/guide.jsx' // entry point for style guide assets
},
output: {
path: path.resolve(__dirname, `../../${Package.directories.dest}`), // sets default location for all compiled files
publicPath: Package.directories.publicPath, // sets a default public location (required by react-routes)
filename: `.${Package.directories.assetPath}/js/[name].js`, // sets filename of bundled .js file (relative to output.path config)
path: path.resolve(__dirname, `../../dist`), // sets default location for all compiled files
publicPath: '/', // sets a default public location (required by react-routes)
filename: `${Package.directories.assetPath}/js/[name].js`, // sets filename of bundled .js file (relative to output.path config)
pathinfo: false
},
module: {
Expand All @@ -49,16 +49,12 @@ const config = {
...alias.plugins, // see build/config/alias.config.js
...stats.plugins, // see build/configs/stats.config.js
new CopyWebpackPlugin([ // react-routes rewrite files for hosting guide on remote a web server.
{
from: path.resolve(__dirname, `../../${Package.directories.dest}`),
to: path.resolve(__dirname, `../../dist`)
},
{
'from': path.resolve(
__dirname,
`../scaffolding/${(Package.remote.type !== 'IIS') ? '.htaccess' : 'web.config'}`
),
'to': path.resolve(__dirname, `../../${Package.directories.dest}`)
'to': path.resolve(__dirname, '../../dist')
}
])
],
Expand All @@ -77,9 +73,5 @@ const config = {

// Prod vs. Dev config customizing
module.exports = (env, argv) => {
if (!fs.existsSync(path.resolve(__dirname, `../../${Package.directories.dest}`))) {
exec('npm run build'); // when missing a required "first time build"
}

return config;
};
6 changes: 3 additions & 3 deletions build/configs/html/html.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ module.exports = {
plugins: [
new HtmlWebPackPlugin({ // used to compile our html files/
'title': `${Package.name} ${Package.version}`,
'template': './src/index.html',
'filename': './index.html',
'favicon': './src/elements/atoms/Icon/assets/favicon.ico',
'template': 'src/index.html',
'filename': 'index.html',
'favicon': 'src/elements/atoms/Icon/assets/favicon.ico',
}),
new WebpackCDNInject({
head: [
Expand Down
6 changes: 3 additions & 3 deletions build/configs/img/img.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ module.exports = {
'loader': 'file-loader', // (see: https://www.npmjs.com/package/file-loader)
'options': {
'name': '[name].[ext]',
'outputPath': `.${Package.directories.assetPath}/img` // see package.json
'outputPath': `${Package.directories.assetPath}/img` // see package.json
}
},
{
Expand All @@ -36,7 +36,7 @@ module.exports = {
},
'svgo': {
'options': {
'output': `${Package.directories.dest}${Package.directories.assetPath}/img` // see package.json
'output': `${Package.directories.assetPath}/img` // see package.json
},
'plugins': [
{ 'cleanupAttrs': true },
Expand Down Expand Up @@ -76,7 +76,7 @@ module.exports = {
plugins: [
// Builds our icon svg sprite file (see: https://www.npmjs.com/package/webpack-svg-spritely)
new WebpackSvgSpritely({
output: `${Package.directories.assetPath}/img`,
output: `/${Package.directories.assetPath}/img`,
entry: 'assets'
}),
new CleanWebpackPlugin({
Expand Down
2 changes: 1 addition & 1 deletion build/configs/js/js.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ module.exports = {
{
context: path.resolve(__dirname, '../../../src/data/'),
from: path.resolve(__dirname, '../../../src/data/*.*'), // for IIS servers
to: `./${Package.directories.assetPath}/data/` // relative to Package.directories.dest
to: `${Package.directories.assetPath}/data/` // relative to Package.directories.dest
}
])
]
Expand Down
8 changes: 3 additions & 5 deletions build/configs/webpack/server.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,13 @@ module.exports = {
config: {
devServer: {
port: (Package.local.port.length) ? Package.local.port : '', // package.json is this config entry point (see: https://webpack.js.org/configuration/dev-server/#devserver-port)
host: Package.local.host, // package.json is this config entry point (see: https://webpack.js.org/configuration/dev-server/#devserver-host)
publicPath: Package.directories.publicPath,
contentBase: Package.directories.dest,
allowedHosts: Package.local.allowedHosts, // package.json is this config entry point (see: https://webpack.js.org/configuration/dev-server/#devserver-allowedhosts)
host: Package.local.host, // package.json is this config entry point (see: https://webpack.js.org/configuration/dev-server/#devserver-host)
allowedHosts: Package.local.allowedHosts, // package.json is this config entry point (see: https://webpack.js.org/configuration/dev-server/#devserver-allowedhosts)
historyApiFallback: true,
watchOptions: {
ignored: /node_modules/
},
before: (app, server) => { // Webpack-dev-server routes (see: https://webpack.js.org/configuration/dev-server/#devserver-before)
before: (app, server) => { // Webpack-dev-server routes (see: https://webpack.js.org/configuration/dev-server/#devserver-before)
// All unslated GUI /api calls funneled here
app.get('/api', (req, res) => {
const query = res.req.query;
Expand Down
21 changes: 20 additions & 1 deletion build/configs/webpack/webpack.plugins.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,26 @@ class MetricsBundle {
}
}

/*
Helper plugin to copy production builds to configured output location
*/

class WebpackHooks {
constructor(hooks) {
this.hooks = hooks;
}

apply(compiler) {
Object.keys(this.hooks).map((i) => {
compiler.hooks[i].tap('WebpackHooks', (data) => {
this.hooks[i]();
});
});
}
}

module.exports = {
StaticBundle,
MetricsBundle
MetricsBundle,
WebpackHooks,
};
2 changes: 1 addition & 1 deletion build/guide/src/elements/atoms/Form/Form.Container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const Form = (el) => {

xhttp.open(
el.method,
`$(el.dataset.xhr}?${Utils.serialize(el, 'urlencode')}`,
`${el.dataset.xhr}?${Utils.serialize(el, 'urlencode')}`,
true
);

Expand Down
8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
"author": "Devin Olsen",
"license": "MIT",
"directories": {
"source": "/src",
"dest": "/dist",
"assetPath": "/assets",
"source": "src",
"dest": "dist",
"assetPath": "assets",
"publicPath": "/"
},
"statics": {
Expand All @@ -27,7 +27,7 @@
"allowedHosts": []
},
"optimize": {
"js": false,
"js": true,
"css": true
},
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion src/elements/atoms/Form/Form.Container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const Form = (el) => {

xhttp.open(
el.method,
`$(el.dataset.xhr}?${Utils.serialize(el, 'urlencode')}`,
`${el.dataset.xhr}?${Utils.serialize(el, 'urlencode')}`,
true
);

Expand Down

0 comments on commit 3ab0af8

Please sign in to comment.