kapehe-jorgenson

Kapehe is an R&D Content Engineer for Auth0 with a passion for learning and teaching. With her primary focus on ReactJS and JavaScript, she is impressed with what code can create for the web. Technology and web development are constantly evolving and naturally bring that need for continual learning. She enjoys writing tutorials, hosting local meetups, and learning with others to expand coding knowledge.

R&D Content Engineer

Kapehe Jorgenson



**TL;DR:** - In this article, we are going to go over the new updates and features added in the major release of the `create-react-app` tool. We will go over the changes that ReactJS announced and what we can find in this great update. We will also go over the addition of TypeScript support and how that can benefit your project.

## Create React App 2.0 - The Big Reveal

On October 1, 2018, [ReactJS tweeted](https://twitter.com/reactjs/status/1046933146736963587) their release announcement of [Create React App 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html). 

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">We’ve just released Create React App 2.0, including a year’s worth of improvements. <a href="https://t.co/O2AjlHOUjp">https://t.co/O2AjlHOUjp</a> <a href="https://t.co/sV8YbY7IED">pic.twitter.com/sV8YbY7IED</a></p>&mdash; React (@reactjs) <a href="https://twitter.com/reactjs/status/1046933146736963587?ref_src=twsrc%5Etfw">October 2, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## The Useful Create React App

Once released, developers were excited, to say the least. If you have used ReactJS, chances are you have used the bash command:

```bash
create-react-app name-of-app
```

Once that command starts running, you get to sit back and relax. You will see that ReactJS is taking care of all the setup and configuration. Once it’s finished, the `package.json` is compiled, starting dependencies are installed, and it gives you the initial project structure. What’s in this new and flashy Create React App 2.0? Let’s check it out!

<include src="TweetQuote" quoteText="On October 1, 2018, ReactJS tweeted their release announcement of Create React App 2.0. Once released, developers were excited, to say the least."/>

## Sass and CSS Modules

Have you ever had to install Sass loaders yourself? Have you had to configure [Sass](https://sass-lang.com/) throughout your project yourself? Well now, in Create React App 2.0, you can get Sass running in your project with a simple bash command and some file name changes. Run:

```bash
npm install node-sass
```

Change your `src/App.css` to `src/App.scss` and make sure to update that file name in the top part of `src/App.js` and you are ready to use and reuse your stylesheets. It’s great!

## Babel 7

[Babel](https://babeljs.io/) released their Babel 7 version this year as well and it did not take long for React to switch over. You can learn all about the new [Babel 7 features here](https://babeljs.io/blog/2018/08/27/7.0.0). Babel is important because it converts ES6 into code that browsers can read.  Babel 7 is faster, can now parse TypeScript syntax, and even gives support for the React fragment syntax.

Want to learn more about React fragments? Dive into the [React docs on Fragments](https://reactjs.org/docs/fragments.html#short-syntax).

## Webpack 4

React, having always used [Webpack](https://webpack.js.org/), has now updated to Webpack 4. Webpack 4 is much faster, decreases your build time, and allows you to set up a particular environment whether it's development or production.

![Webpack 4 logo - JavaScript module bundler](https://images.ctfassets.net/23aumh6u8s0i/72d1mUghQG0alzmyZsIM9r/87b1d6cf5fad0164df47e1e6f79c1079/webpack-4-logo)

In short, it is a module bundler for JavaScript applications and version 4 splits the bundles into a more intelligent and better performant way. There is so much that goes with Webpack 4, if you want to learn more about it, you can [visit the Webpack website here](https://webpack.js.org/).

<include src="TweetQuote" quoteText="React has now updated to Webpack 4, a module bundler for JavaScript applications."/>

## Jest 23

When Create React App 2.0 came out, they launched it with that latest version of [Jest](https://jestjs.io/). Jest 23 is more stable and much quicker, which will help you when running tests. You’ll feel more confident with more immediate feedback and reliable results.

![Jest logo - An open-source testing framework](https://images.ctfassets.net/23aumh6u8s0i/3lWxbu0X1JZtfNmfOZM2hg/d5d74ad73a0040712d26427e94de0eae/jest-logo)

Jest is an open-source testing framework that has just been updated to version 23. It has some great new features. One of those updates is the new watch menu option called Interactive Snapshot Mode. You are able to look through each snapshot and review your failed ones. While reviewing you can choose to update or skip each one. Jest has a great list of some of the updates that you can find [here on Jest’s blog](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing#interactive-snapshot-mode).

## PostCSS

PostCSS, a great tool with over 200 custom plugins has been added to Create React App 2.0. By using JavaScript, you are able to easily transform your CSS. Create React App did not have this neat feature, but the team at React thought that adding this in would be a great for developers. I would have to agree!

If you were to head over to [PostCSS.org](https://postcss.org/) you would see a list of features that come with PostCSS.

* Increased code readability
* Converts modern CSS into a more readable version for browsers
* Uses [CSS Modules](https://github.com/css-modules/css-modules) which keeps all class and animation names local
* Utilizes [stylelint](https://stylelint.io/), a modern CSS linter
* Offers a powerful grid system

## Apollo, Relay Modern, MDX, and other third-party Babel Macros transforms

Imagine being able to use a third-party platform like [Apollo](https://www.apollographql.com/), [MDX](https://mdxjs.com/), or [Relay Modern](https://facebook.github.io/relay/) without extra configuration or setup. There is no longer the issue of being able to use Babel Macros without ejecting first, Create React App 2.0 is taking care of that setup for us.

Check out this tutorial on [how to create a React app with MDX](https://auth0.com/blog/how-to-build-an-app-with-react-and-mdx/?utm_source=linkedin&utm_medium=sc&utm_campaign=mdx_react).

## SVG

We have all seen an SVG tag:

```html
<svg width="100" height="100">
   <circle cx=“50” cy=“50” r=“40” stroke=“blue” stroke-width=“5” fill="black" />
</svg> 
```

This one is a simple circle but some SVG tags can get pretty long and confusing. SVG’s are great because they allow for cleaner looking lines, richer color, and change your images into code.

What if I told you that now you can import an SVG as a React component?

Simply import the component at the top:

`import SVGIcon from "./svgicon";`

And use it down within the file:

`<SVGIcon name="image" width={50} fill={red} />`
or
`<SVGIcon />`

This can give a lot of flexibility in where you use your SVG’s and allows for better readability.


## Yarn Plug’n’Play

Hmmm, getting rid of the `node_modules` seems far-fetched but this experimental [Yarn](https://yarnpkg.com/en/) Plug’n’Play allows for just that. If you look at the bullet points in [this GitHub PR conversation](https://github.com/yarnpkg/rfcs/pull/101), you’ll see that there are some awesome aspects to it:

* Installs ran using Plug'n'Play are up to 70% faster than regular ones.
* Starting from this PR, Yarn will now be on the path to make yarn install a no-op on CI (Continuous Integration).
* Yarn will now be able to tell you precisely when you forgot to list packages in your dependencies.
* Your applications will boot faster through a hybrid approach of static resolutions.

This is something that if you want to try out in your React project, go ahead. This feature is just a fun new add-on that is completely optional.

Here you'll see [Dan Abramov](https://twitter.com/dan_abramov) trying out Yarn Plug-n-Play:

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">I’m trying out Yarn Plug’n’Play and it’s pretty incredible. This GIF is *not* speeded up. I literally created a project in five seconds (on a warm cache). No node_modules. It works. <a href="https://t.co/AjJP5vXxEi">pic.twitter.com/AjJP5vXxEi</a></p>&mdash; Dan Abramov (@dan_abramov) <a href="https://twitter.com/dan_abramov/status/1047583342072406022?ref_src=twsrc%5Etfw">October 3, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Proxy Implementation

Want to configure your own proxy? Create React App 2.0 let’s you do that now!

All you need to do is install the dependency:

```bash
npm install http-proxy-middleware
```

And then create a file called `src/setupProxy.js`. Once you import that dependency, you are ready to go! It’s that easy to get it started!

## Use packages written for latest Node versions

Use any Node version package and with the help of Babel 7 and Webpack 4, it won’t break the build. You will not need to do any addition configuration and will feel confident that it’s being bundled correctly.

## A Smaller CSS Bundle

Chances are you are going to be pointing your project towards modern browsers. If you decide to only target those, maybe a smaller CSS bundle would be beneficial for your project and you could experience faster load times by making fewer requests.

Avoid targeting the following:

`-webkit`
`-ms`

in your CSS and that will help in keeping those bundled. Instead point the browsers to the `package.json`.

## Service Workers

Service workers are now opt-in and are built using [Google’s Workbox](https://developers.google.com/web/tools/workbox/). Workbox is a JavaScript library that gives offline support to your project. It can help with your project’s performance and resilience by caching assets such as: 

* Fonts
* Images
* JavaScript
* CSS
* Other files

## The Addition of TypeScript

[TypeScript](http://www.typescriptlang.org/), an Object-oriented programming language, can be beneficial to use versus JavaScript. Some strong benefits of using TypeScript are:

* It can help find errors more efficiently.
* Checks for "types" being correct.
* Same syntax as JavaScript, so easy to start with.

When starting your React project with `create-react-app`, simply add to the bash command:

```bash
--typescript
```

to add TypeScript to your project.

### Add TypeScript To Create React App Project

There are two ways to get TypeScript active in your project.

Add it into an already existing project:

```bash
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
```

or add it in at the beginning of a new project:

```bash
npx create-react-app name-of-app --typescript
```

Files that end in `.js` change to `.tsx` and you are good to go.

`src/index.js` --> `src/index.tsx`

If you add TypeScript to an already existing project, be sure to restart your development server to get the new changes going. You can find the documentation on this new [TypeScript addition here](https://facebook.github.io/create-react-app/docs/adding-typescript).

## Moving Forward with Create React App 2.0

With React’s new Create React App 2.0 being released, the next thought is, “Should I update all my past projects to 2.0?”. Unless it’s broken, just leave it as is. But in the future, when using the command `create-react-app` to start your project, you’ll know you have so many new features to help you build an amazing project.

To find out which version of Create React App you are using in a particular project, head on over to your `package.json` and find this line telling you which version you are currently utilizing:

```json
"react-scripts": "2.0.3"
```

This is also the place where you would update to 2.0 if desired.

Happy coding!

<include src="asides/AboutAuth0" />


Create React App 2.0: What's New?

37590801?s=460&v=4

A software engineer who dreams about non-electric sheep and autonomous vehicles and likes to champion security.

Software Engineer

Dan Arias

Learn how to easy prototype JavaScript apps using the zero config feature of Webpack 4.

Zero Config JavaScript App Prototyping with Webpack

andrea-chiarelli

I have over 20 years of experience as a software engineer and technical author. Throughout my career, I've used several programming languages and technologies for the projects I was involved in, ranging from C# to JavaScript, ASP.NET to Node.js, Angular to React, SOAP to REST APIs, etc.

In the last few years, I've been focusing on simplifying the developer experience with Identity and related topics, especially in the .NET ecosystem.

Principal Developer Advocate

Andrea Chiarelli

A tutorial about using FuseBox to configure your JavaScript development environment on Node.js

Introducing FuseBox, an alternative to Webpack

1097492785caf9ffeebffeb624202d8f?s=200 avatar

1097492785caf9ffeebffeb624202d8f?s=200

Prosper is a great speaker, community leader, open source hacker, technical consultant, and a fervent Developer Advocate. He is a full-stack software engineer who has worked on biometric, health and developer tools. Prosper recently co-founded a startup called Eden that’s focused on improving the quality of lives in Nigeria and currently leads the engineering team. He also co-founded forloop, the largest developer community in Africa.

Former Auth0 Employee

Prosper Otemuyiwa

Webpack 4.0 has officially been released. What's new? What improvements were made? Learn how to build faster web applications with this new release.



---

**TL;DR:** On Sunday, February 25, 2018, **Webpack 4.0**, was released to the public. **Legato** _(Weboack 4.0's codename)_ is a major release to the JavaScript module bundler. It has taken about eight months since the release of 3.0. In this article, I'll cover the new features in **Webpack 4.0** and several other changes and deprecations.

---

Webpack is a capable module bundler for JavaScript applications. It bundles every one of the modules in your application into at least one file (frequently, only one) and serves it to the browser. In any case, Webpack is something beyond a module bundler. With the assistance of loaders and plugins, it can change, minify and optimize a wide range of files before serving them as a bundle to the browser. It takes in different resources, for example, JavaScript, CSS, Fonts, Images, and HTML, and afterwards changes these assets into a configuration that is helpful to use through a browser. The genuine energy of Webpack is the whole of its parts.

Alright, that's enough, [this article](https://auth0.com/blog/webpack-a-gentle-introduction/) provides a gentle introduction to webpack. Now, what's new in Webpack 4.0?

# What's new in Webpack 4.0?

## 1. Node.js 4 Support Dropped

Node.js 4 is no longer supported. The source code was upgraded to a higher ECMAScript version.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Make sure to use node &gt;= 8.9.4 when using <a href="https://twitter.com/hashtag/webpack?src=hash&amp;ref_src=twsrc%5Etfw">#webpack</a> 4 legato.<br><br>Older versions will have reduced performance, because we started using newer JS features, which are less optimized in older V8 versions.<br><br>Btw. awesome work of the v8 team regarding performance.</p>&mdash; Tobias Koppers (@wSokra) <a href="https://twitter.com/wSokra/status/967852475918274561?ref_src=twsrc%5Etfw">February 25, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

The creator of Webpack, Tobias, warns users to use Node >= 8.9.4 for optimal performance because of newer JavaScript features now used in the codebase.

## 2. Farewell CommonsChunkPlugin, Hello SplitChunksPlugin

It's sad to see you go, dear `CommonsChunkPlugin`. The infamous _CommonsChunkPlugin_ has been removed and replaced with two new smooth APIs called `optimize.splitChunks` and `optimization.runtimeChunk`. Let me explain!

Webpack 4 shipped with huge improvements to the chunk graph and a new optimization technique for chunk splitting. A new plugin was born in the process of improvements called `SplitChunksPlugin`. The `SplitChunksPlugin` automatically identifies modules which should be split by heuristics and splits the chunks. And it has some other great features such as working efficiently on async chunks, and handling vendor splitting with multiple vendor chunks.

By default, shared chunks will be automatically generated for you out of the box in Webpack 4. And it is configurable via `optimize.splitChunks`. The `optimization.runtimeChunk: true` option adds an additional chunk to each entry point containing only the runtime.

Tobias has [compelling examples of how the new optimization technique works!](https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693).

## 3. WebAssembly Support Out of the Box

WebAssembly (wasm) is a new portable, and load-time-efficient format suitable for compilation to the web. It's really fast and the developer community is embracing it rapidly. For this reason, Webpack 4 now supports WebAssembly out of the box. In Webpack 4, you can import and export any local WebAssembly module. And you can write loaders that allow you to import C++, C and Rust directly.

**Note:** The WebAssembly modules can only be used in async chunks.

## 4. Support for various Module Types

Webpack 4 now supports five module types. These module types are:

* **javascript/auto:** Webpack 3 shipped with support for this module type with all module systems enabled, `CommonJS`, `AMD`, `ESM`.
* **javascript/esm:** Supports only ECMAScript modules.
* **javascript/dynamic:** Supports only CommonJS and AMD.
* **json:** Supports only JSON data, It's available via `require` and `import`.
* **webassembly/experimental:** Supports only WebAssembly modules. For now, it is currently experimental.

<include src="TweetQuote" quoteText="Webpack 4 now supports five module types."/>

## 5. Lighting the Fire with Mode

I am more excited about this feature than everyone in the universe at the moment. The Webpack team has introduced a new config property called `mode` all in the quest to achieve a zero-config (#0CJS) module bundler. The `mode` option can be set to either of these two values; `development` or `production`. Out of the box, it defaults to `production`.

The `production` option provides a set of sensible defaults that allows for:

* Small output size.
* Fast code at runtime.
* Omitting development-only code.
* Not exposing source code or file paths.
* Easy to use output assets.

The `development` option provides a set of sensible defaults that allows for:

* Better tooling for in-browser debugging.
* Fast incremental compilation for a fast development cycle.
* Better error messages at runtime.

Check out the [configuration options affected by `mode`](https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a).

**Note:** Without the `mode` option in your Webpack config, a warning will be thrown at you.

![Webpack 4 Mode warning](https://images.ctfassets.net/23aumh6u8s0i/1pywqp48M17uEI2pAdt8aC/850297e32eb039c6ce38b0633ab2bef5/modewarning)

## 6. Zero Config Module Bundler #OCJS

Before now, an entry point had to be defined inside a `webpack.config.js` file for Webpack to bundle your app. However, with Webpack 4, there is no need to define the entry point, it will take `./src/index.js` as the default.

Furthermore, there's also no need to define the output file, it emits the bundle to `/.dist/main.js`.

<include src="TweetQuote" quoteText="Webpack 4 supports zero-config (#0CJS) setups. For example, it will use ./src/index.js as the default entry point."/>

The significance of this slick feature comes to play when spinning up small projects. No need for a configuration file. Just webpack away!

![Webpack 4 without entry](https://images.ctfassets.net/23aumh6u8s0i/742oY1MfAFwJlXc72Qi3yL/cbc244952e08ff17567369038d5c3864/withoutindex)
_Webpack 4 without any config and entry file._

![Webpack 4 with index.js](https://images.ctfassets.net/23aumh6u8s0i/1UR6XUVw2VmNivcIfLPM6Y/f2b8f238d4d5b7b04a73d7f9f5bca1e1/withindex)
_Webpack 4 without any config file. Just a src/index.js file._

## 7. Faster Build Times

Webpack 4's build times are now up to about 98% faster than the previous major version. Don't take my word for it. Try it out yourself. You can get started with Webpack 4 like so:

```bash
npm i webpack --save-dev
```

or use yarn like so:

```bash
yarn add webpack --dev
```

In your package.json's `devDependencies` section, you should now have:

```js
"webpack": "^4.0.0"
 ```

Webpack 3: 2405ms
![Webpack 3's build time](https://images.ctfassets.net/23aumh6u8s0i/pjcYwgfXqTnJk3qI3Qcj3/e9e3e62728d25b6707028206cd3e1a20/buildtime)
_Webpack 3's build time_

Webpack 4: 1388ms
![Webpack 4's build time](https://images.ctfassets.net/23aumh6u8s0i/7ojTTm9RKywkGWRxpoyL7v/6e2e4db21a718228b6d360eca8a10121/buildtime)
_Webpack 4's build time_

Webpack v4 is almost 2x faster than v3 in build time!

Other performance tests from the community can be found below:

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">6 entries, dev mode, source maps off, using a bunch of loaders and plugins. dat speed ⚡️ <a href="https://t.co/fgzYPN24k1">pic.twitter.com/fgzYPN24k1</a></p>&mdash; Evan Scott (@probablyup) <a href="https://twitter.com/probablyup/status/965128389307846657?ref_src=twsrc%5Etfw">February 18, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 8. Fresh Plugin System

Webpack 4 ships with a complete overhaul of the plugin system. There is a new simple API for plugins and hooks which comes with the following configuration:

* The `hooks` object houses all hooks as property of the extensible class.
* Multiple `Hook` classes now exist depending on the hook type: `sync`, `async`, `normal`, `bailing`, `waterfall`, `looping`.
* You must provide a name when adding plugins.
* You can choose the type of the plugin (sync/callback/promise) when adding plugins.
* `this.hooks = { myHook: new SyncHook(...) }` is the new way of registering hooks. Creating a new Hook object as a property of the `hooks` object.

Tobias wrote a [comprehensive note on how the new plugin system works](https://medium.com/webpack/the-new-plugin-system-week-22-23-c24e3b22e95). The plugin method is backward-compatible.

## 9. Giant Move to webpack-cli

The Webpack's command line interface has been moved to [webpack-cli](https://github.com/webpack/webpack-cli), you need to install `webpack-cli` to use the CLI.

The [Webpack CLI documentation](https://webpack.js.org/api/cli/) can get you started on using the `webpack-cli` effectively.

## Deprecations and Other Updates

* These plugins have been deprecated, `NoEmitOnErrorsPlugin`, `ModuleConcatenationPlugin`, `NamedModulesPlugin`. You can now use `optimization.noEmitOnErrors`, `optimization.concatenateModules`, and `optimization.namedModules` respectively.
* `import()` always returns a namespace object.
* Webpack now removes dead branches by default.
* The use of `System.import()` now emits a warning.
* `webpackInclude` and `webpackExclude` are supported by the magic comment for `import()`. They allow to filter files when using a dynamic expression.

## Road to Webpack 5

There are several plans underway for Webpack 5. Some of these plans include:

* Stable WebAssembly support.
* The ability to create a custom module type and have Webpack support it.
* Eliminating `ExtractTextWebpackPlugin` and supporting a CSS module type out of the box.
* Supporting HTML module type out of the box.
* Persistent Caching

## Aside: Webpack and JavaScript at Auth0

At [Auth0](https://auth0.com/) we use JavaScript heavily in development and automate tasks using build tools such as Webpack. Using our authentication and authorization server from your JavaScript web apps is a piece of cake.

> [Auth0 offers a **free tier**](https://auth0.com/pricing) to get started with modern authentication.

It's as easy as installing the `auth0-js` and `jwt-decode` node modules like so:

```bash
npm install jwt-decode auth0-js --save
```

```js
import auth0 from 'auth0-js';

const auth0 = new auth0.WebAuth({
    clientID: "YOUR-AUTH0-CLIENT-ID",
    domain: "YOUR-AUTH0-DOMAIN",
    scope: "openid email profile YOUR-ADDITIONAL-SCOPES",
    audience: "YOUR-API-AUDIENCES", // See https://auth0.com/docs/api-auth
    responseType: "token id_token",
    redirectUri: "http://localhost:9000" //YOUR-REDIRECT-URL
});

function logout() {
    localStorage.removeItem('id_token');
    localStorage.removeItem('access_token');
    window.location.href = "/";
}

function showProfileInfo(profile) {
    var btnLogin = document.getElementById('btn-login');
    var btnLogout = document.getElementById('btn-logout');
    var avatar = document.getElementById('avatar');
    document.getElementById('nickname').textContent = profile.nickname;
    btnLogin.style.display = "none";
    avatar.src = profile.picture;
    avatar.style.display = "block";
    btnLogout.style.display = "block";
}

function retrieveProfile() {
    var idToken = localStorage.getItem('id_token');
    if (idToken) {
        try {
            const profile = jwt_decode(idToken);
            showProfileInfo(profile);
        } catch (err) {
            alert('There was an error getting the profile: ' + err.message);
        }
    }
}

auth0.parseHash(window.location.hash, (err, result) => {
    if(err || !result) {
        // Handle error
        return;
    }

    // You can use the ID token to get user information in the frontend.
    localStorage.setItem('id_token', result.idToken);
    // You can use this token to interact with server-side APIs.
    localStorage.setItem('access_token', result.accessToken);
    retrieveProfile();
});

function afterLoad() {
    // buttons
    var btnLogin = document.getElementById('btn-login');
    var btnLogout = document.getElementById('btn-logout');

    btnLogin.addEventListener('click', function () {
        auth0.authorize();
    });

    btnLogout.addEventListener('click', function () {
        logout();
    });

    retrieveProfile();
}

window.addEventListener('load', afterLoad);
```

Get the [full example using this code](https://github.com/auth0-blog/es2015-rundown-example).

Go ahead and check out our [quickstarts](https://auth0.com/docs/quickstarts) for how to implement authentication using different languages and frameworks in your apps.

## Conclusion

You have now learned the new additions to Webpack. Webpack 4.0 shipped with a lot of new features and improvements. The Webpack team is close to having a complete migration and additions guide to Webpack 4. In the upcoming weeks and months, they'll be out. New to Webpack? I wrote a [gentle introduction to the module bundler](https://auth0.com/blog/webpack-a-gentle-introduction). [Sean Larkin](https://twitter.com/thelarkinn) also has some awesome Webpack courses on [Webpack Academy](https://webpack.academy/).

Have you started working with Webpack 4 yet? What are your thoughts? Let me know in the comments section! 😊

Webpack 4.0 Release: What's New?

sandrino-di-mattia

Principal Architect

Sandrino Di Mattia

Making it easy to reproduce end-user issues and bugs with Flux.


---

**TL;DR**: You can check out the sample application in [this Github repository](https://github.com/auth0/react-flux-debug-actions-sample)

---

Troubleshooting applications running in production is not always easy. You might get bug reports like "Nothing works!" In addition, some errors might only occur based on the data that the user is working with, and reproducing the issue could be challenging because of specific dependencies (e.g., user, API) … the list goes on and on!

There are plenty of tools available out there that can catch any errors with a stack trace and very detailed information, but even then the error might be hard to reproduce.

In this blog post, we'll show how you can leverage your existing React and Flux infrastructure in order to have a better logging and debugging experience.

## Example: Customer Service Application

The example in this blog post is a customer service application that allows you to manage open tickets. You can view the open tickets and close tickets that have been resolved.

<img src="https://images.ctfassets.net/23aumh6u8s0i/7MFsGErVECNOx4uCcnpFDx/e63340e0f1f9962375e3c48f863db7c6/react-flux-debugging-tickets" class="expand" />

John, an end user, is solving the open tickets and closing them one by one. But suddenly... a crash! So John goes ahead and opens a bug: "Nothing works!"

<img src="https://images.ctfassets.net/23aumh6u8s0i/6cXn7s2HJazm45a8Q4ikaO/6e5b6f4d28648b7919f27641c3f36ba5/react-flux-debugging-end-user" class="expand" />

Jane, a developer, is now assigned to work on the "Nothing works!" bug. Great. Luckily, their application is recording all Flux actions executed by users. These actions are linked to a user's session, so she can just go ahead and look for John's session. After that, she can replay John's session and try to figure out the problem.

<img src="https://images.ctfassets.net/23aumh6u8s0i/34RKZ1DgEy7MwjKIgsX5a9/4f9abbd929a3362f0091c66f7421a3b7/react-flux-debugging-developer" class="expand" />

Aha! While replaying John's session, an error pops up in the developer console. It looks like there might be a bug in the `Error.jsx` component.

## How does this work?

Implementing this in your own Flux applications is really easy. In our blog post about [ReactJS authentication](https://auth0.com/blog/2015/04/09/adding-authentication-to-your-react-flux-app/) using Flux, we explain what a typical Flux application looks like. Actions are dispatched to stores, and stores will notify components to update themselves. So if we want to keep track of all actions, we'll need to start with the dispatcher:

```javascript
import Dispatcher from './dispatcher';
import LogActions from './actions/LogActions';

// Export the dispatch method.
export default function dispatch(action) {
  Dispatcher.dispatch(action);
  LogActions.log(action);
}
```

<include src="TweetQuote" quoteText="Actions are dispatched to stores, and stores will notify components to update themselves."/>

The `dispatch` method we're exposing here will forward the action to the dispatcher, but after that, it will forward the data to `LogActions.log`. This method will then send the action to our back-end:

```javascript
import httpClient from '../httpClient';
import LoginStore from '../stores/LoginStore'

export default {
  log: (action) => {
    console.log('Action:', action);

    if (LoginStore.sessionId && !action.debug) {
      httpClient.post(null, { url: `/sessions/${LoginStore.sessionId}/logs`, data: action }).catch(err => {
        console.log('Error sending log:', err);
      });
    }
  }
};
```

The message will first be logged to the console. This could be something you want to activate for your non-production builds. Then, if the user is logged in and it's not a "debug action", the data is posted to the back-end.

When we replay actions in a troubleshooting session, we'll mark these as "debug actions" to make sure that these actions are not sent to the server again.

And that's basically it. Our backend will store all actions in a "session" in chronological order. Then a developer might choose to replay a session:

```javascript
debugSession: (session, untilAction) => {
  console.log('Debugging session:', session);

  dispatch({ debug: true, actionType: RESET });
  dispatch({ debug: true, actionType: START_DEBUG });

  // Replay all actions with a delay.
  for (var i = 0; i < session.actions.length; i++) {
    let action = session.actions[i];

    setTimeout(() => {
      console.log(' > Dispatching debug action:', action);
      dispatch({
        ...action,
        debug: true
      });
    }, i * 250);

    if (untilAction && untilAction === action) {
      break;
    }
  }

  dispatch({ debug: true, actionType: STOP_DEBUG });
}
```

When replaying a session, we'll first dispatch the `RESET` and the `START_DEBUG` actions. The `RESET` action can be handled by all stores to reset their state (clear all data, clear alerts, etc.).

The `START_DEBUG` action tells the rest of the applications that we are now going to replay certain actions. This is very important because one thing we'll want to avoid is our application making calls to the API. So our HttpClient will not be making calls during this time (in the next section, we'll explain how this works and how we're leveraging Flux to record every request and every response so we can replay everything later without requiring interaction with the API).

Then we go over each action and dispatch it, after which we introduce a small delay. As a result, the developer will see every action that is replayed (in fast-forward, as the delay is always 250ms). And finally, the `STOP_DEBUG` action is sent to notify that we're done replaying the actions, which re-enables the HttpClient.

## Improving our API calls

When Jane was debugging John's session, we immediately noticed a bug in one of our components, so this approach is good to catch runtime errors. But what about API calls? When replaying the actions, the HttpClient will not be making any calls to our API, so how can we effectively replay and troubleshoot API calls? Well, we'll just need to dispatch an action each time we want to make a request, each time we get a successful response, and each time the API returns an error.

Here's what this could look like when we're making the request:

```javascript
{
  actionType: 'LOAD_OPEN_TICKETS',
  user: 'sandrino',
  sort: 'date'
}
```

When the request is successfully executed, we can dispatch the result.

```javascript
{
  actionType: 'LOAD_OPEN_TICKETS_SUCCESS',
  tickets: [...]
}
```

And in the case that something goes wrong, we will also dispatch this action with the actual error message:

```javascript
{
  actionType: 'LOAD_OPEN_TICKETS_FAILED',
  err: {
   message: 'The user "sandrino" has been disabled. You cannot load tickets for this user.'
  }
}
```

Frameworks like `redux` support concepts like middleware, which make it much easier to implement this in a generic way, but we'll just create a wrapper around a library like `axios` or `superagent` that handles this for us:

```javascript
class HttpClient {

  get(action, options) {
    var request = superagent.get(`${BASE_URL}${options.url}`);
    if (options.query) {
      request = request.query(options.query);
    }

    return this._execute(action, request);
  }

  post(action, options) {
    var request = superagent.post(`${BASE_URL}${options.url}`);
    if (options.data) {
      request = request.send(options.data);
    }

    return this._execute(action, request);
  }

  _execute(action, request) {
    if (debug.isActive) {
      console.log('Debug mode active - not executing Http Request:', request);
      return;
    }

    return new Promise((resolve, reject) => {
      request.end((err, res) => {
        if (err) {
          dispatch({ actionType: action + '_FAILED', err: err });
          return reject(err);
        }

        dispatch({ actionType: action + '_SUCCESS', res: res });
        return resolve(res);
      });
    });
  }
}

export default new HttpClient();
```

This class will dispatch `YOUR_ACTION` before the call is made to the API. Then, it will dispatch `YOUR_ACTION_SUCCESS` when the request has been executed or `YOUR_ACTION_FAILED` in the event of an error. This means that every request and response is dispatched and also being logged to our back-end. Thus, we can easily replay all actions, including the data returned by possible API calls, without having to interact with the actual API. This is useful if you need to reproduce an issue that occurred a few days ago for which the data might no longer exist or might have changed.

## Trying it out

The complete source of this application is available on GitHub: [https://github.com/auth0/react-flux-debug-actions-sample](https://github.com/auth0/react-flux-debug-actions-sample). Follow the instructions here to start the front-end and the back-end.

Happy troubleshooting!
