Building an app to deploy

React apps need to be built and packaged up for deployment before we can think about sending them off to a hosting platform. This lessons covers how to build your React apps, ready for deployment.

Building an app to deploy#

Whilst we’re working locally, we’re not often concerned with performance or security or how things are being built and run. A lot of this is taken care of by the tooling we use and we’re in a secure environment on our local machine; a machine that is usually dedicated to running this local dev server with only us, a single user, accessing it.

With a tool like Create React App, behind the scenes, there is a heavily configured instance of Webpack which is bundling our code and serving it on a local URL like http://localhost:3000 and hot-swapping any changes.

However, if we were to just stuff all this code into a hosting environment and have it running, we’d find that, over time, it would get less performant. Things like optimization, minification, CSS clean up, and other production-ready processes would be skipped, potentially exposing our users to very rough code.

That’s if the code could run at all…

Bundlers such as Webpack or Parcel JS do much more than just minifying and optimizing our code, they make sure it works in the first place. Out of the box, a lot of modern JavaScript doesn’t run reliably in all browsers and environments. Some of the code we write is not supported in some browsers and tools like Babel JS are usually employed to transform this code into a backward-compatible flavor or poly-filled to ensure it works smoothly.

Building and processing the code before deployment also allows us to chunk code up into smaller parts and link together only the required parts of some JavaScript, say, for certain pages. We can also tree-shake our code to remove dead weight, run PostCSS rules and transforms, and basically smooth out any rough edges before we let it loose on our fans.

How to build our projects#

The process of building our applications and websites involves running a separate set of scripts, tools and, processes on our code before we send it to a hosting service.

If you take a look back at our most recent project from Module 4, and open up the package.json file, you’ll see the following section:

We’ve been using yarn start for running our apps locally on some address like http://localhost:3000. But when it's time to build our code ready to deploy, it’s yarn build that we’ll need to run.

Give it a try! Open up the terminal and type yarn build into it and hit enter.

You’ll see some brief messages in the console and then….nothing?

Take another look at your project directory. You should see a new folder, /build. Have a look in there and you’ll see a few new files and folders, especially in the /js folder where there are a number of .js files — this is our app!

This /build folder is the one we’ll want to deploy in the coming lessons as it holds the minified, optimized code that our hosting provider will be able to serve to our visitors.

Continuous deployment and continuous integration#

Continuous deployment and integration is often shortened to CI/CD. Continuous deployment is a broad term that encapsulates the processes that happen when new code is committed to a codebase.

Broadly speaking, it describes an often automated environment that flows like this:

  1. Code is checked into one or more versioned branches that are being watched by the CI/CD environment for changes.

  2. The change is noticed by the CI/CD environment.

  3. Automated tests are usually run next (unit tests or integration tests).

  4. On a successful test run, a new build is started.

  5. Whatever build commands we have are run.

  6. On a successful build, the built, processed, packaged code is collected up and deployed to one or more hosting environments.

In the next lesson, we’ll be setting up a simple CI/CD environment on Netlify to host our Furry Friends Gallery. In reality, CI/CD environments can be very complex beasts and are often managed by dedicated teams broadly grouped under the name DevOps.

It’s not imperative that you have a detailed knowledge of how to build and deploy your apps and sites at this level, but even having a basic grasp of the concepts and some experience with the processes involved will make it easier for you to communicate with dev ops teams in your workplace.

Now that we’ve got an idea of the concepts involved in building and deploying our apps and websites, let’s start deploying our very own project in the next lesson.

No discussions yet