@coast/qrcode-svg

createQRCode

Generates a QRCode in SVG with an integrated Coast logo at the bottom.

Generating Quest PDFs

Append the /upload path to the base app URL to upload the CSV file.

Due to memory constraints, the app will only process 100 rows at a time. If you try to process more than 100 rows at once, the app will likely be killed due to violating the memory constraint. See the Heroku section for more information on dyno size and how to manually restart the app.

Expected CSV format

The CSV MUST include the following columns:

• Asset Details URL
• Service Request URL

The CSV can OPTIONALLY include the following columns:

• Manufacturer
• Model
• Serial Number
• Coast ID
• Acquired Year

All other columns will be ignored.

Generate command

Run yarn generate:pdfs path/to/data.csv.

PDFs will be output in the top-level pdfs folder, as numbered files. Note: any existing files in this folder will be removed when the script is run.

Troubleshooting

If the CSV format is incorrect, the app will say that it processed the file, but it will not display an error nor generate/display a link to a zip file containing the PDFs. You will need to follow the instructions in the section further down to tail the Heroku logs to see any error messages.

Usage

import { createQRCode } from '@coast-app/qrcode-svg';

const url = 'https://shared.coastapp.com/r/d634c3d2-4708-42f3-8dbe-a987696a8bb3';
const width = 400;
const showBorder = true;
const svg = createQRCode({ url, width, showBorder });

Props:

• url: string
• width?: number - if omitted, SVG will be size-agnostic / responsive
• showBorder?: boolean - defaults to false
• showLogo?: boolean - defaults to true

Publishing

• Run yarn build && git add dist && git commit -m "Update distribution"
• Bump the version via npm version (this will create a vXXX tag)
• Merge your changes to the main branch
• Push up the new version tag via git push --tags
• Update the the reference in the package that uses this library to point at the new version tag

Development

This project includes a dev environment for modifying the output of the createQRCode SVG generator. It uses a SvelteKit server to show the rendered SVG in a browser.

Run the app

yarn
yarn dev

Then open http://localhost:5173

Testing

Tests run in vitest.

yarn test

Note: the SVG fixtures are read in as files at the beginning of the test run, so any changes to the fixtures will require restarting the tests. (Press R while in watch mode.)

Heroku

Access at https://dashboard.heroku.com/apps/qrcode-svg

Install the Heroku CLI and sign in by running heroku login

Dyno size

At the moment the primary app constraint is memory. We are currently limited to using a 2x dyno size with 1 GB memory. After we have an invoice for at least $30 for a month, we can use larger dyno sizes with more memory.

https://dashboard.heroku.com/apps/qrcode-svg/resources

App configuration

Config vars

PUPPETEER_EXECUTABLE_PATH: /app/.chrome-for-testing/chrome-linux64/chrome
NODE_ENV: production

Buildpacks

Add heroku-community/chrome-for-testing

Watch app logs

heroku logs -a qrcode-svg --tail

Clear app cache

heroku builds:cache:purge -a qrcode-svg

Restart app

heroku ps:restart -a qrcode-svg