PAIR-code / PAIR-code/deliberate-lab

Build: Streamline frontend config

Open
#999 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

stale
Dominant language
TypeScript
Stars
96
Forks
40
Avg merge
2d 11h
Merged PRs (30d)
20

Description

Background: Currently, in order to build the frontend workspace, one needs to create two files: index.html and firebase_config.ts. There are example files for each (index.example.html and firebase_config.example.ts). Minimally, one must copy the example files to build. The files themselves are .gitignored to prevent committing.

This design does prevent marginally sensitive values from being committed to the repo (such as the Firebase API key). However, it does not take full advantage of Webpack's ability to perform substitutions and inject environment variables.

Proposal:

  1. Delete both *.example.* files.
  2. Remove the exclusions from .gitignore.
  3. Make both files depend on Webpack-injected fields (no hard coded secrets).
  4. Check in the config-based files.
  5. Update GitHub Actions (`ci.yaml') as needed to build using the streamlined procedure.
  6. Update the Google Cloud Build (cloudbuild.yaml) as needed.
  7. Update documentation on how to build and deploy based on the updated method.

It may make sense to create files like firebase_config.dev.json and firebase_config.prod.json, the latter of which would be .gitignored. Then, in the Webpack build, bring in these files' contents for the particular kind of build being performed.

See #996 for discussion on streamlining the frontend build process.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the example files, .gitignore, ci.yaml, cloudbuild.yaml, and the existing Webpack configuration, then review discussion in #996. Map how frontend builds currently obtain index.html and firebase_config.ts, and update the workflow, Cloud Build configuration, and build/deploy documentation so the streamlined procedure works without the example files.

Written by the indexing model from the issue text.

Assessment

Tech stack
firebase, gcp, github-actions, typescript, webpack
Domain
build-system, ci-cd, cloud, documentation, frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.