GitHub Actions have massively reduced the complexity in setting up CI pipelines for projects.

GitHub Actions are free, and configuration of your actions are maintained within the .github/workflows/directory of your git repo.

Here’s an example of a simple config file I use to check my PRs before merging them into a master branch:

name: CI

on: [push]

jobs:
build:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v2
- name: Install packages
run: yarn install
- name: Lint
run: yarn lint
- name: Build app
run: yarn build

Note, that this is for a JavaScript / TypeScript project where lint and build are commands that are defined in my package.json


Tools like create-react-app come pre-configured to change the file names of the JavaScript bundles they output, but what about the index.html files that are also outputted?

If not configured otherwise, browsers will cache your index.html files, and I’ve found this may lead to problems where cached index files point to obsolete, or worse still, non-existent JavaScript files.

If you use nginx, you can use the following snippet to circumvent this (and force browsers to fetch a new copy of your index.html on every request):

location / {
add_header Cache-Control 'no-store';
add_header Cache-Control 'no-cache';
expires 0;
...
}

After adding a strict Content Security Policy to your Single Page App, you may encounter the following error:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' XXX". Either the 'unsafe-inline' keyword, a hash ('sha256-X='), or a nonce ('nonce-...') is required to enable inline execution.

By default, Create React App injects an inline script into the HTML file it outputs. To force it to bundle this script as a separate JS file, you’ll need to prefix you build command with:

INLINE_RUNTIME_CHUNK=false

See more details here: https://create-react-app.dev/docs/advanced-configuration/

About

Full-stack + Product. Available for hire either as an independent contractor, or as part of a voliyo.dev team. Inquiries: mail [at] voliyo.dev.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store