How to Set Up a React App for Continuous Integration

[00:00 - 00:08] Lesson 2 - Building an app to deploy. Once we're working locally, we're not often concerned with performance or security or how things are being built and run.

[00:09 - 00:31] A lot of this is taken care of by the tuning we use and we're in a secure environment on our local machine, a machine that's 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 Local host, Par 3000 and hot swapping any changes.

[00:32 - 00:47] However, if we were to just stuff all this code into a hosting environment and have it run in, we'd find that over time it would get less performance. Things like Optimization, Minification, CSS Cleanup and other production ready processes would be skipped, potentially exposing our users to very rough code.

[00:48 - 00:56] And that's if the code would run at all. Some people like Webpack or Parcel do much more than just minifying and optimizing code, they make sure it works in the first place.

[00:57 - 01:12] 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 backwards compatible flavor or polyfill to ensure that it works smoothly.

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

[01:32 - 01:41] But how do we 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 .

[01:42 - 01:59] If we 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's start for running our apps locally on some address like local host 3000 but when it comes time to build our code ready to deploy it's Yarn build that we'll need to run.

[02:00 - 02:11] So let's give it a try. Back in our project we'll open our terminal and we'll type the following command, Yarn build.

[02:12 - 02:17] We'll see some brief messages and then nothing. Let's take another look at the project directory.

[02:18 - 02:33] You should see a folder "Build" here and have a look in there and you'll see a few new files and folders especially in the JS folder. This is where there are a number of .js files.

[02:34 - 02:45] 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 our visitors.

[02:46 - 02:51] Continuous deployment and integration. Continuous deployment and integration is often shortened to CI and CD.

[02:52 - 03:03] Continuous deployment is a broad term that encapsulates the processes that happen when new code is committed to a code base. Broadly speaking it describes an often automated environment that flows like this.

[03:04 - 03:15] Code is checked into one or more version branches that are being watched by the CI/CD environment for changes, the changes noticed by the CI/CD environment. Automated tests are usually run next, unit tests or integration tests.

[03:16 - 03:20] On a successful test run a new build is started. Whatever build commands we have are run.

[03:21 - 03:33] On a successful build the built processed package code is collected 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.

[03:34 - 03:55] 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 process involved will make it easier for you to communicate with Dev Ops teams in your workplace.

[03:56 - 04:02] Now that we've got an idea with the concepts involved in building and deploying our apps and websites let's start deploying our very own project in the next lesson.