Skip to content

Commit

Permalink
Debugging updates, bundle cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
William Dibbern committed May 2, 2020
1 parent fa0b263 commit 812d705
Show file tree
Hide file tree
Showing 12 changed files with 1,069 additions and 1,372 deletions.
Binary file removed .DS_Store
Binary file not shown.
8 changes: 7 additions & 1 deletion .babelrc
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
{
"presets": [
"@babel/preset-env",
["@babel/preset-env", {
"corejs": {
"proposals": true,
"version": 3
},
"useBuiltIns": "usage"
}],
"@babel/preset-react"
],
"plugins": [
Expand Down
6 changes: 5 additions & 1 deletion .env.example
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
DEBUG_BUNDLE_SIZE=1
DEBUG_REDUX=1
DEBUG_RENDER=1
DEBUG_FIREBASE=1
FATHOM_SITE_ID=
FIREBASE_API_KEY=API_KEY
FIREBASE_AUTH_DOMAIN=monikerz.firebaseapp.com
FIREBASE_DATABASE_URL=https://monikerz.firebaseio.com
FIREBASE_PROJECT_ID=monikerz
HONEYBADGER_API_KEY=
ASSETS_URL=https://monikerz.web.app
HONEYBADGER_ASSETS_URL=https://monikerz.web.app
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -116,4 +116,5 @@ dist

webpack_cache/
manifest.json
.env
.env
.DS_Store
17 changes: 16 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,26 @@ Monikerz is a party game that is similar to Celebrity or Charades. Teams play ag

It is recommended to use VS Code for development. There are recommended extensions for this repository.

### Environment Variables

Note that changing an environment variable requires restarting webpack.

|Variable|Description|
|---|---|
|`DEBUG_BUNDLE_SIZE`|Enabled `webpack-bundle-analyzer` to check on bundle bloat|
|`DEBUG_FIREBASE`|Enables firebase logging to the console, when in development mode|
|`DEBUG_REDUX`|Enables `redux-logger` to output to the console, when in development mode|
|`DEBUG_RENDER`|Enables `why-did-you-render` to help troubleshoot unnecessary component updates, when in development mode|
|`FATHOM_SITE_ID`|Site ID for Fathom Analytics, when in production mode|
|`FIREBASE_*`|Firebase config values for interacting with firestore and dynamic links APIs. These come from the firebase web console.|
|`HONEYBADGER_API_KEY`|Honeybadger API key for error reporting and sourcemap upload, when in production mode|
|`HONEYBADGER_ASSETS_URL`|Base URL for production assets, required for `honeybadger-webpack` in production mode|

### Development

1. Ensure `node` and `yarn` are installed globally.
2. Clone this repository.
3. Copy `.env.example` to `.env` and configure the relevant environment variables.
3. Copy `.env.example` to `.env` and configure the relevant environment variables. See above for descriptions.
4. Run `yarn install` from the root of the repository.
5. Run `yarn dev:dll` once to build the webpack dll of dependencies.
6. Run `yarn dev` to start webpack in watch mode.
Expand Down
13 changes: 7 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -67,19 +67,19 @@
"babel-eslint": "^10.1.0",
"babel-jest": "^25.3.0",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.1",
"core-js": "^3.6.5",
"css-loader": "^3.4.2",
"dotenv": "^8.2.0",
"eslint": "^6.8.0",
"eslint-config-defaults": "^9.0.0",
"eslint-loader": "^3.0.3",
"eslint-loader": "^4.0.2",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-jest": "^23.8.2",
"eslint-plugin-react": "^7.18.3",
"file-loader": "^5.1.0",
"html-webpack-plugin": "^3.2.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"jest": "^25.3.0",
"jest-in-case": "^1.0.2",
"mini-css-extract-plugin": "^0.9.0",
Expand All @@ -90,9 +90,10 @@
"sass-loader": "^8.0.2",
"source-map-loader": "^0.2.4",
"style-loader": "^1.1.3",
"svg-url-loader": "^4.0.0",
"url-loader": "^3.0.0",
"svg-url-loader": "^5.0.0",
"url-loader": "^4.1.0",
"webpack": "^4.42.0",
"webpack-bundle-analyzer": "^3.7.0",
"webpack-cli": "^3.3.11",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.10.3",
Expand Down
4 changes: 3 additions & 1 deletion src/data/firebase.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ app.initializeApp(config);

app.firestore().settings({ });

// app.firestore.setLogLevel('debug');
if (process.env.DEBUG_FIREBASE) {
app.firestore.setLogLevel('debug');
}

export default app;
8 changes: 4 additions & 4 deletions src/index-template.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="description" content="<%= htmlWebpackPlugin.options.description %>" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.0/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>

<meta property="og:title" content="Monikerz" />
<meta property="og:description" content="Monikerz is a party game that is similar to Celebrity or Charades. Teams play against each other by trying to guess as many names as possible before time runs out." />
Expand Down
13 changes: 8 additions & 5 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,20 @@ import 'utilities/fontawesome';
import { App } from './modules/app';

if (process.env.NODE_ENV !== 'development') {
const whyDidYouRender = require('@welldone-software/why-did-you-render');
whyDidYouRender(React, {
trackAllPureComponents: true,
});

Honeybadger.configure({
apiKey: process.env.HONEYBADGER_API_KEY,
environment: process.env.NODE_ENV,
revision: 'master'
});
}
else {
if (process.env.DEBUG_RENDER) {
const whyDidYouRender = require('@welldone-software/why-did-you-render');
whyDidYouRender(React, {
trackAllPureComponents: true,
});
}
}

render(
<App />,
Expand Down
2 changes: 1 addition & 1 deletion src/modules/app/store.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { firebaseReducer as firebase } from 'react-redux-firebase';
import { firestoreReducer as firestore } from 'redux-firestore';

const middlewares = [];
if (process.env.NODE_ENV !== 'production') {
if (process.env.NODE_ENV !== 'production' && process.env.DEBUG_REDUX) {
const { logger } = require('redux-logger');
middlewares.push(logger);
}
Expand Down
19 changes: 14 additions & 5 deletions webpack/webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const HoneybadgerSourceMapPlugin = require('@honeybadger-io/webpack');
Expand All @@ -15,7 +16,10 @@ const outputDir = path.resolve(root, 'dist');
const dllManifestPath = path.resolve(root, 'manifest.json');
const currentEnv = dotenv.config({ path: path.resolve(root, '.env') }).parsed;
const ASSETS_LIMIT = 100000;
let plugins = [];

let plugins = [
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en/),
];

if (!fs.existsSync(dllManifestPath)) {
throw new Error('Webpack DLL Manifest missing, please run the DLL build first');
Expand All @@ -26,7 +30,6 @@ module.exports = (options) => {
log.info('webpack', `running ${options.env.NODE_ENV.toUpperCase()} build`);
const isProduction = options.env.NODE_ENV === 'production';


if (isProduction) {
plugins = plugins.concat([
new webpack.optimize.ModuleConcatenationPlugin(),
Expand All @@ -37,7 +40,7 @@ module.exports = (options) => {
].join('\n')),
new HoneybadgerSourceMapPlugin({
apiKey: currentEnv.HONEYBADGER_API_KEY,
assetsUrl: currentEnv.ASSETS_URL,
assetsUrl: currentEnv.HONEYBADGER_ASSETS_URL,
revision: 'master',
silent: false
})
Expand All @@ -47,15 +50,21 @@ module.exports = (options) => {
plugins.push(
new webpack.HotModuleReplacementPlugin()
);

if (currentEnv.DEBUG_BUNDLE_SIZE) {
plugins.push(
new BundleAnalyzerPlugin()
);
}
}

const webpackConfig = {
mode: options.env.NODE_ENV,
context: path.resolve(root + '/src'),
entry: ['babel-polyfill', './index'],
entry: ['./index'],
devtool: options.devtool,
optimization: {
minimize: isProduction,
minimize: isProduction
},
output: {
path: outputDir,
Expand Down
Loading

0 comments on commit 812d705

Please sign in to comment.