Code With Wolf


Github Actions for React and fixing Treat Warnings as Errors CI Issue

Github Actions for React

I'm back!

So first off, I have been consistent with my blogs and actually producing more posts than I originally had planned. However, you may have noticed that I did not publish any posts in February. This is because I had sent out a few applications for new positions and my free time for coding outside of my full time job was pretty consumed with cleaning up portfolio projects, completing code challenges, and interviewing.

I ended up landing a position that looks like it will be a great opportunity with interesting work so I am excited to start that in two weeks.


What are Github Actions

Github Actions allow you to automate workflows in your Github repositories. You can set up powerful CI/CD processes.

There is also a ton of boiler plate already written for you so you can build out a CI/CD pipeline very quickly and modify it as needed.


What Can You Do With Github Actions?

I wanted to take one of my open source projects (React-Jack, a React/Redux blackjack game) and add a pipeline that would install my node modules, run my unit tests, and then build my application. I wanted to be alerted if the CI pipeline failed.

I will get into how I did this in a moment, but wanted to talk about other options. The cool thing about Github Actions is there are already tons of actions that are built and can be added to your pipeline without re-creating the boiler plate.

There are actions that will deploy your app to Netlify, S3, etc. You can deploy a .NET app to Azure, or do just about any workflow in any language. You can run a pipeline on a Pull Request, and a separate one when the PR is merged, etc. I noticed you can set up actions on commit messages, issues being created, etc.

If you have a CI workflow you want to run, it seems like there are already Github Actions created to at least get you started and a good amount of the way there.


Node JS Setup

I wanted to create a pipeline that installs npm package, ran my tests, and built my project.

Getting started is really easy. For a lot of JS projects, the basic node JS set up would work great to achieve my goals. React has a small nuance, so let's walk through this.


1. Add Actions To Repo

First step is to add an action to your project. Do this by clicking the Actions tab in your Github repo.

add-github-actions-to-react-app

2. In Actions Tab, Search Github MarketPlace for 'Node'

Next, we want to search the Github Marketplace in the Actions tab for Node. This will give us a great starting point for a project based on Node.

add-github-actions-to-react-app-node-setup

3. Select the Node Workflow

You will see this creates a file at <Project_root>/.github/workflows/main.yaml.

Let's walk through what's going on.

name: Node.js CI

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [10.x, 12.x, 14.x, 15.x]
 
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test

This is a default node job that will work on a push and a PR to master branch. The job is called build and runs on the latest version of ubuntu. It will run for each version of node.js in the matrix, so for this file it will run 4 times for each version listed in the strategy matrix.

The steps are pretty straight forward. It will run a clean install (ci), run a build (if there is a build script) and then run the test command.


4. Customizaion

You can take this template and customize it. I think it's a good starting place for a modern JS UI project. If you want to use yarn there is a plugin for that in the Github Marketplace. There are plenty of great options.

Personally, I don't see the point in running this for 4 versions of node js for my particular project right now, so I changed that to just use node JS version 12 for now.


5. Common React Error: Treating warnings as errors because process.env.CI = true.

I ran into a very common react error with the basic node yaml and finally was able to fix it.

I had a few warnings that the build script caught. I can't say any of these warnings bothered me. They were all pretty benign.

But still, the build failed completely. I didn't actually see any errors in my build logs though, which was weird.

Instead, what I saw was before the warnings was:
Treating warnings as errors because process.env.CI = true.

Well, that ain't what I want!

It took me a while to fix this. I tried setting the CI environment variable to false explicitly. That should work. But it didn't!

react-script's build command would take false for the CI environment variable and set it to true! Sounds like a joke, but it ain't. Try it out yourself.

Then, I added CI="", and believe it or not, that worked.

My Final yaml File

Here is what my final yaml file looked like in my github workflows directory. On pushing any branch, I would install npm packages, run tests, and build my project with node.js 12.

name: CI
on: [push]
jobs:
  test_commit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with: 
          node-version: 12
      - run: npm install
      - run: npm test
      - run: CI="" npm run build


© 2022 Code With Wolf