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 buildNote, 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=falseSee more details here: https://create-react-app.dev/docs/advanced-configuration/
About
