React Workflow Without Create React App (CRA)

Updated November 28, 2018

Note on src/favicon.ico issue that comes up in the workflow:

I made a quick change to get rid of the src folder. Instead of injecting favicon.ico into index.html (which causes src/ to be copied into dist/), I placed favicon.ico into the root of static/. It then was copied into the root of dist where index.html resides. Result? No more src folder. Now you just have to manually add your favicon.ico link tag into index.html in src. That way it will copy over with the rest of index.html into dist.

Note December 2, 2018 re importing images in React:

As some of you may know, I wrote an article on October 7, 2017, regarding importing images in React based on the first edition of my custom React workflow. But now I am on to the second edition, and the changes that took place with various dependencies also impacted the configuration/support of image imports. Last night I tried to import images in to a new React project utilizing configurations from the old workflow, but it caused my Jest tests to fail. NOT GOOD! I did end up updating my Jest configurations to provide support for image imports, and then wrote about those changes. Please visit either my developer blog or Medium.com to read the articles:

On My Developer Blog:

My updated custom React workflow (2nd edition) is here

The Importance Of ESlint (And React)

Importing Images in React 2.0: Jest (and Babel 7)

The Jest Side Effect

The New Babel 7 Config

On Medium:

My updated custom React workflow (2nd Edition) is here

The Importance Of EsLint (And React)

Importing Images in React 2.0: Jest (and Babel 7)

The Jest Side Effect

The New Babel 7 Config

How to fix the src/favicon.ico issue in dist/:

• remove favicon.ico from the src folder
• move favicon.ico into the root of static/ in src
• remove import './favicon.ico'; from index.js
• remove favicon: 'src/favicon.ico', from new htmlWebpackPlugin({}) configuration within plugins in config/webpack.base.config.js
• don't forget to manually place the favicon.ico link in the head section of index.html in the src folder under the title tag: <link rel="shortcut icon" href="favicon.ico">

Reflects changes to React 16.6.3, Babel 7, ESLint 5.9.0, and Webpack 4.3.0

This is the second edition of a custom workflow I created for my React applications, incorporating changes that took place in React 16.6.3, ESLint 5.9.0, Babel 7, and Webpack 4. This is not meant as an all inclusive example of what has changed in those dependencies/devDependencies. Hopefully it will encourage others to take a deeper dive into them and expand their horizons as developers. I know that creating this deck expanded my horizons, and I had loads of fun learning new things along the way. To go through the first edition, please visit the React Workflow Presentation repository.

If you feel that there are improvements that can be made to any of the documentation, please make a pull request and it will be reviewed for approval. Thanks!

Site Map:

• Landing Page: Landing Page

• About This Presentation: Slide 1

• A Bit About Me:

  • Hi There! Slide 2
  • About Me Slide 3
  • Background Slide 4

• Why Discuss React Workflows?:

  • Why Discuss React Workflows? Slide 5
  • Simple Slide 6
  • blindly accepting Slide 7
  • Why blindly? Slide 8
  • once you eject Slide 9
  • one thing I know for sure ... Slide 10
  • Starting Over Slide 11
  • Where Webpack Comes In Slide 12
  • So why webpack? Slide 13
  • If done from scratch ... Slide 14
  • if you are familiar with CRA ... Slide 15
  • Nothing wrong with that Slide 16
  • The Problem Slide 17
  • stunt one's growth Slide 18
  • the bug Slide 19
  • Debugging Difficulties Slide 20

• Custom React Workflows:

  • Custom React Workflows Slide 21
  • What This React Workflow Supports Slide 22
  • What This React Workflow Uses Slide 23

• package.json: Slide 24

• Jest:

  • What Has Not Changed (Jest): Slide 25
  • What Has Changed (Jest): Slide 26
  • What Has Not Changed (Jest DevDeps): Slide 27
  • What has Changed (Jest DevDeps): Slide 28

• Configuring Babel 7:

  • everything changed Slide 29

  • .babelrc (previously) Slide 30

  • .babelrc (now) Slide 31

  • Babel < 7 Presets: Slide 32

  • Babel 7 Presets:

    • .babelrc Slide 33
    • @babel/preset-env Slide 34 @babel/preset-react Slide 35
    • naming Slide 36

  • Babel Plugins:

    • @babel/plugin-proposal-class-properties Slide 37
    • @babel/plugin-proposal-export-namespace-from Slide 38, Slide 39, Slide 40
    • @babel/plugin-proposal-throw-expressions Slide 41
    • babel/plugin-syntax-dynamic-import Slide 42
    • config/webpack.base.config.js:
      • JS$ rules Slide 43
      • JS$ test property Slide 44
      • JS$ exclude property Slide 45
      • JS$ use property Slide 46

  • Babel 7 Packages:

    • @babel/core Slide 47
    • "babel-core": "^7.0.0-bridge.0" Slide 48
    • @babel/polyfill Slide 49
    • @babel/register Slide 50

• Configuring ESLint:

  • package.json Slide 51
  • .eslintrc.json Slide 52
  • config/webpack.base.config.js Slide 53

• Configuring Webpack:

  • much changed Slide 54
  • config folder Slide 55
  • why the new configs Slide 56
  • what requires/variables have NOT changed (base config) Slide 57
  • what requires/variables have changed (base config) Slide 58
  • how module.exports has changed (base config) Slide 59
  • config/webpack.base.config.js Slide 60
  • Dependency Graph Slide 61
  • webpack basics: Slide 62

• config/webpack.base.config.js:

  • entry Slide 63, Slide 64
  • module.exports changed Slide 65
  • entry changed Slide 66
  • webpack-merge Slide 67
  • main Slide 68
  • main index.js Slide 69
  • core.js in index.js: Slide 70
  • ReactDOM.render() Slide 71
  • Code/Bundle Splitting Slide 72
  • Browser Caching Slide 73
  • Clearing The Cache Slide 74
  • Caching Headaches Slide 75
  • Output Slide 76
  • filename Slide 77, Slide 78
  • chunkFilename Slide 79
  • path Slide 80, Slide 81
  • [name] Slide 82
  • Bundle Splitting vs Code Splitting Slide 83, Slide 84
  • [name] Slide 85
  • [contenthash] Slide 86, Slide 87, Slide 88, Slide 89
  • < /> === 3 Slide 90
  • Runtime Slide 91
  • Manifest Slide 92
  • Runtime/Manifest Slide 93
  • Side Effects Slide 94
  • [chunkhash] Slide 95
  • CommonsChunkPlugin Slide 96
  • SplitChunksPlugin Slide 97, Slide 98, Slide 99, Slide 100
  • (SplitChunksPlugin) Conditions Slide 101
  • Extracting a Runtime Slide 102
  • Dev Output In Terminal Slide 103, Slide 104
  • custom script, webpack-dev-server:

    • (npm run start) Slide 105

      • --mode development Slide 106, Slide 107

    • custom script, webpack-dev-server Slide 108, Slide 109, Slide 110, Slide 111

      • style-loader Slide 112
      • --history-api-fallback Slide 113
      • --env.PLATFORM=local Slide 114
      • --env.VERSION=stag Slide 115

    • Dev Output In Terminal:

      • dev instance info:
        • clean-webpack-plugin Slide 116
        • [wds] Slide 117
        • --history-api-fallback Slide 118
        • [wdm] Slide 119 [wds]/[wdm] Slide 120, Slide 121 [wdm] (when change is made to dev build) Slide 122
      • dev instance info Slide 123
      • assets emitted Slide 124, Slide 125
      • other webpack base configs:
        • (optimization.splitChunks.chunks) Slide 126
        • CopyWebpackPlugin Slide 127
        • WorkboxPlugin Slide 128, Slide 129
        • service worker (precache files) Slide 130
        • workbox and precaching Slide 131
        • precache-manifest.json Slide 132, Slide 133, Slide 134, Slide 135

    • Build Output in Terminal Slide 136

      • custom script, npm run predeploy Slide 137
      • --mode production Slide 138, Slide 139, Slide 140, Slide 141
      • assets emitted Slide 142
      • assets emitted: bundle splitting Slide 143

• config/webpack.prod.config.js Slide 144

  • Build Output In Terminal:
    • (vendor) node_module bundle splitting Slide 145, Slide 146
  • Build Output In Terminal:
    • (vendor) bundle splitting Slide 147

• webpack.prod.config.js:

  • what hasn't changed Slide 148
  • what's new Slide 149, Slide 150
  • prodConfiguration Slide 151
  • merge() Slide 152
  • optimization Slide 153
  • splitChunks Slide 154, Slide 155, Slide 156
  • cacheGroups Slide 157, Slide 158
  • Configuring cacheGroups: vendor Slide 159, Slide 160, Slide 161, Slide 162, Slide 163, Slide 164, Slide 165, Slide 166, Slide 167, Slide 168
  • cacheGroups: styles Slide 169, Slide 170, Slide 171, Slide 172, Slide 173, Slide 174
  • optimization: runtimeChunk Slide 175
  • optimization: minimizer Slide 176, Slide 177
  • plugins Slide 178, Slide 179
  • asset-manifest.json Slide 180, Slide 181, Slide 182
  • HashedModuleIdsPlugin Slide 183
  • Publishing to gh-pages on Build Slide 184
  • Separating Concerns Slide 185
  • HtmlWebpackPlugin Slide 186, Slide 187
  • HtmlWebpackPlugin Configuration:
    • template Slide 188
    • favicon Slide 189
    • styles Slide 190
    • inject Slide 191
  • Separating Concerns (recap) Slide 192, Slide 193
  • Resolving Order Slide 194
  • Blocking Change Slide 195
  • Named Modules Plugin Slide 196
  • HashedModuleIdsPlugin (recap) Slide 197
  • HashedModuleIdsPlugin (before) Slide 198, Slide 199, Slide 200
  • HashedModuleIdsPlugin (after)
    • Vendor remains constant Slide 201
  • Loaders (recap) Slide 202
  • MiniCssExtractPlugin (recap) Slide 203, Slide 204, Slide 205, Slide 206
  • vs ExtractTextWebpackPlugin (recap) Slide 207
  • MiniCssExtractPlugin (recap) Slide 208
  • MiniCssExtractPlugin (prod config) Slide 209
    • CSS test property Slide 210
    • CSS exclude property Slide 211
    • MiniCssExtractPlugin.loader Slide 212
    • CSS Loader and CSS Modules Slide 213
    • CSS Modules Slide 214, Slide 215
    • SCSS, CSS Modules, and React Slide 216
    • css hot loader Slide 217, Slide 218
    • Hot Module Replacement Slide 219
    • [contenthash] (recap) Slide 220, Slide 221
    • Plugins (recap) Slide 222
    • Require (recap) Slide 223
    • Add Slide 224
    • CRA approach Slide 225
    • Custom NPM Scripts (recap) Slide 226
      • clean script Slide 227
      • cleanSrc script Slide 228, Slide 229
    • POSTCSS Slide 230
    • Wrap Up Slide 231
    • CRA Slide 232
    • Custom React App - Amido Slide 233
    • React Slide 234
    • React DevTools Slide 235
    • webpack Slide 236
    • Resources Slide 237, Slide 238, Slide 239