How to Set Up Continuous Integration & Deployment for Your React App

As a React developer, delivering high-quality code and shipping new features quickly is critical for success. However, manually testing, building, and deploying your application every time you make a change is time-consuming and error-prone. That‘s where continuous integration and deployment (CI/CD) comes in.

By automating key parts of your development workflow, CI/CD helps you catch bugs early, deploy more frequently, and deliver value to your users faster. In this guide, I‘ll walk you through how to set up a robust CI/CD pipeline for your React application using industry-standard tools and best practices.

The React CI/CD Stack

While there are many great tools available, here‘s the stack we‘ll be using:

• React App: We‘ll create our app using Create React App (CRA), the official bootstrapping tool from the React team at Facebook. CRA gives us a production-ready build pipeline out of the box.
• CircleCI: A popular CI/CD platform that integrates with GitHub. It will automate our build, test and deployment process.
• Jest: The testing framework that comes bundled with CRA. It provides a fast, interactive watch mode and code coverage reports.
• Netlify: A powerful platform for automating deployment of modern web projects. We‘ll use it to host our React app.

If you don‘t already have an account with CircleCI and Netlify, go ahead and sign up now – both have free tiers that are perfect for this tutorial.

Step 1: Set Up Your React App

First, make sure you have a recent version of Node.js and npm installed. Then open up your terminal and run:

npx create-react-app my-awesome-app
cd my-awesome-app
npm start

This will bootstrap a new React application in the my-awesome-app directory and start the development server. If everything is set up correctly, you should see the default CRA welcome page when you open http://localhost:3000 in your browser.

Create a new repository on GitHub and push your application code to it:

git remote add origin https://github.com/YOUR_USERNAME/my-awesome-app.git
git push -u origin master 

Replace YOUR_USERNAME with your actual GitHub username. We‘re now ready to start setting up CI/CD!

Step 2: Configure CircleCI

CircleCI makes it super easy to automate your build, test and deployment pipeline. It integrates with GitHub and automatically runs your pipeline every time you push code or open a pull request.

To get started, sign in to the CircleCI dashboard with your GitHub account and add your repository as a new project. Then, create a new file called .circleci/config.yml in the root of your project with the following contents:

version: 2.1

orbs:
  netlify: netlify/[email protected]

jobs:
  test:
    docker:
      - image: cimg/node:16.13 
    steps:
      - checkout
      - restore_cache:
          keys:
            - npm-cache-v1-{{ checksum "package-lock.json" }}
      - run:
          name: Install dependencies
          command: npm ci
      - save_cache:
          paths:
            - ~/usr/local/lib/node_modules  
          key: npm-cache-v1-{{ checksum "package-lock.json" }}
      - run:
          name: Run tests and collect coverage
          command: npm test -- --coverage
      - store_artifacts:
          path: coverage

workflows:
  build:
    jobs:
      - test
      - netlify/deploy:
          requires: 
            - test
          filters:
            branches:
              only: main

Let‘s break this down:

• We specify the CircleCI configuration version and import the Netlify orb for easy deployment.
• We define a "test" job that uses a Node.js Docker image to run our tests. The steps:
  1. Check out our code
  2. Restore cached npm dependencies, if any
  3. Install dependencies with npm ci (faster than npm install and requires package-lock.json)
  4. Save dependencies to cache for future builds
  5. Run Jest tests with coverage collection
  6. Store the coverage report as a build artifact for easy access
• We define a workflow that runs our test job on every commit and deploys to Netlify if tests pass on the main branch.

Commit this file and push it to GitHub to trigger your first CircleCI build. You should see the build start automatically on the CircleCI dashboard. If everything is configured correctly, the tests will pass and you‘ll see a green check mark next to the commit on GitHub.

Step 3: Set Up Netlify Deployment

Now that our tests are running on every commit, let‘s set up automatic deployment to Netlify.

On the Netlify dashboard, click "New site from Git" and choose GitHub as your Git provider. Select your repository and click "Deploy site".

Under "Basic build settings", set the build command to npm run build and the publish directory to build. These are the defaults used by Create React App.

Next, go to "Site settings" > "Build & deploy" > "Environment" and add a new environment variable called CI with the value true. This tells Create React App that it‘s running in a CI environment and it should exit if it encounters any warnings that could fail the build.

Finally, go back to the CircleCI dashboard and navigate to your project‘s settings. Under "Environment Variables", click "Add Environment Variable" and add NETLIFY_AUTH_TOKEN and NETLIFY_SITE_ID with the values from your Netlify "Site settings" > "Build & deploy" > "Deploy contexts". This allows the Netlify orb to deploy your site.

Commit and push a change to your main branch to trigger a new build on CircleCI. If everything is set up correctly, your site will automatically deploy to Netlify after the tests pass! You can find your site‘s URL on the Netlify dashboard.

Additional Considerations

Congrats, you now have a working CI/CD pipeline for your React app! Here are some additional things to consider as you iterate on your setup:

• Optimize build times: As your app grows, your build times may start to slow down. Consider techniques like parallelizing jobs, using smaller Docker images, and only installing necessary dependencies.
• Integrate with communication tools: Integrate your pipeline with Slack, email or other tools to notify your team of failures or successful deploys.
• Scale to larger apps: For larger React apps with more complex builds, consider splitting your tests into multiple jobs that run in parallel. Use tools like Lerna or Yarn Workspaces to manage multiple packages.
• Security best practices: Always use environment variables for sensitive values like API keys and password. Use security scanning tools to check for vulnerabilities in your dependencies.

Conclusion

Setting up continuous integration and deployment for your React app is a key step in optimizing your development workflow and delivering high-quality software. By automating the tedious parts of testing and deployment, you can focus on writing great code and delivering value to your users.

While there are many tools to choose from, the combination of Create React App, CircleCI, Jest and Netlify provides a powerful, yet easy to set up stack for CI/CD with React. I encourage you to take the time to set up a pipeline for your own projects and experience the benefits firsthand.

For more information on the tools and techniques covered in this guide, check out the official documentation for Create React App, CircleCI, Jest, and Netlify.

Happy building!