Key Vault

A safer way to store and manage stream keys for big events.

This is a Google Apps Script web app backed by a Google Sheet. After creating and configuring the Apps Script project, you will be able to:

• Create events.
• Add stream keys for an event.
• Add role-based access controls to restrict which keys each user can access.

Project structure

├── src/
│   ├── Code.ts          # Google Apps Script backend source
│   ├── Index.html       # Generated Apps Script HTML shell
│   └── appsscript.json  # Apps Script manifest
├── frontend/
│   ├── src/*.ts         # Frontend TypeScript source
│   ├── index.html       # HTML shell template and demo page template
│   └── input.css        # Tailwind CSS source
└── build-tools/         # Build and release scripts

Local development

npm install
npm run dev

This does an initial CSS compile, then serves the app locally at http://localhost:3000 with live reload.

To only compile CSS:

npm run css

frontend/output.css is generated from frontend/input.css and is intentionally ignored by git. Local development and release builds create it as needed.

Releases

This repo now follows the same release pattern as multi-lang-qa.

Pushing to master publishes the mock-backed demo frontend to GitHub Pages. Pushing a git tag also publishes the latest demo and deploys the production Apps Script build. The Apps Script deployment is rebuilt as a self-contained HTML project; it does not load its JavaScript or CSS from GitHub Pages.

npm version 0.3.2
git push origin master --tags

npm version updates package.json and package-lock.json, creates the release commit, and creates the git tag. With the default tag-version-prefix of v, npm version 0.3.2 creates the tag v0.3.2.

The release tag must match package.json. GitHub Actions checks this before deploying. Run npm version from a clean git working tree.

To build the generated Apps Script project locally:

npm run css
npm run apps-script:build

The generated Apps Script files are written to .clasp-build/. Index.html contains the frontend CSS and JavaScript inline. The logo and Apps Script favicon use the unversioned GitHub Pages logo URL.

One-time Apps Script deployment setup

Create these GitHub repository secrets before expecting tag releases to update the live Apps Script deployment:

• APPS_SCRIPT_ID: the script ID from the Apps Script project settings.
• APPS_SCRIPT_DEPLOYMENT_ID: the deployment ID of the existing web app deployment that should keep the same public URL.
• CLASPRC_JSON: the contents of the .clasprc.json file created by npx clasp login.

Once these are set, a tag like v0.3.2 will:

• publish the mock-backed demo site and logo to GitHub Pages
• generate a self-contained Apps Script project in .clasp-build/
• push the generated project with clasp
• create a new Apps Script version and update the existing deployment to point at it

Deploying to Google Apps Script manually

If you want to collaborate with others in real time, you will need to create a Google Apps Script project.

1. Create a spreadsheet with these tabs and columns: Role: id, event, email, type, language, remarks Event: id, name (id is generated as E01, E02, etc.) Language: id, name, order (id should be a string from L01 to L99) Key: id, event, name, language, server, key, server2, key2, link, color, remarks
2. Create an Apps Script project and add a script property named SPREADSHEET_ID.
3. Run npm run css && npm run apps-script:build.
4. Add the generated files from .clasp-build/ to the Apps Script project.
5. Deploy the project as a web app.

Roles

• Owner: can edit or delete events and assign event admins.
• Admin: can add viewers and editors.
• Editor: can edit keys for an event and can be restricted to languages.
• Viewer: can only view an event's keys and can be restricted to languages.