Getting Your App Ready for Production

We've put together a pretty nice starter application in Create React App over the span of this book. While it probably won't win any awards, you now have the foundation that you need to be able to build on top of this and turn it into the next world-leading pomodoro tracker, or maybe something like a new task manager application for developers! Throughout all of this, we've covered the build process and the bootstrap process, but have yet to focus on the final portion of building any application: shipping it to production!

We've spent a lot of time talking about the different important features in Create React App, and have built an application on top of it. We've added a lot to our application; we took something from zero to an app that is functional, uses the latest and greatest modern JavaScript programming techniques...

Adding other libraries

As we mentioned previously, we'll be adding a few more libraries. If you're not interested in swapping either of these libraries, you can safely skip this section, but there are a few items to cover that may be representative of scenarios that you'll run into while working on JavaScript in a team environment. For example, Redux was, at one point, considered important (if not essential) for building a React project of any significant complexity. Recently, that mentality has ebbed a bit, and generally speaking, people will only opt for using libraries like Redux when it is more necessary and state management is a harder part of their applications. Regardless, we should have experience in adding it to our applications, so that we will be ready to contribute, should we ever be working on a project that is using it as well. There are a lot of other...

Creating a production build

Finally, we're ready to get this all bundled up and ready for a production deployment! Our code is done, our code works, and everything is great; so, what do we do now?

It's simple; we just run yarn build and call it a day! Well, that's most of the process. You see, when you run yarn build, Create React App tries to figure out the best, most efficient way to bundle up everything that you've been working on in your Create React App project and minify/productionize everything that you've written—every image and asset that you've added, every library that needs to be included—everything.

How to create a production build

To create a production build, we just...

Ejecting our project

One of the other options available to us is the ability to eject our project in Create React App. Ejecting an app means that it removes all of the scaffolds and confines of the Create React App CLI, with all of the bonuses and caveats that you might expect from such an operation. For one, we gain greater ability and control over our project, and can tweak things as we see fit, which is great; but it also puts you into a world where you need to understand your Babel configs, your Webpack configs, and every other behind the scenes configuration option that you were previously able to ignore.

Eject is very much a double-edged sword; it's a powerful tool, and it allows you to move beyond the rules that Create React App introduces into your world. However, you'll now be responsible for any headaches that come as a result of configuration modifications...

Summary

That's it! At this point, you should have a solid grasp of Create React App 2's changes and benefits. We've explored functionality, both old and new, to make sure that we're building the most up-to-date, modern JavaScript implementations that we possibly can! We're using libraries and techniques that we would already be using in most frontend projects that we might build.

We've also taken a deep dive into how to set up a healthy software development life cycle using Create React App, getting us to a point where our application runs smoothly and is resilient when changes do occur. Our application is well and thoroughly tested, and is not prone to random breaking. This is all something that we've done with absolutely zero configuration; in my mind, this is one of the biggest strengths of working with a frontend development project in Create...