Writing a QR code generator
Introduction
This example shows how to write a QR code generator and how to import a module.
Setup your development environment
First of all, you need to install Node.js and NPM.
Setup your project
Create a new directory and initialize a new Node.js project:
mkdir qr-code
cd qr-code
npm init -y
Install dependencies
npm install --save qrcode-svg esbuild
Write the code
Create a file named worker.ts
and paste the following code:
import QRCode from 'qrcode-svg';
addEventListener('fetch', (event: FetchEvent) => {
event.respondWith(
handleRequest(event.request)
// If the request handler throws an error, return a 500 response.
.catch(() => new Response('Internal Server Error', { status: 500 }))
);
});
async function handleRequest(request: Request): Promise<Response> {
const url = new URL(request.url);
const content = url.searchParams.get('text') || 'Hello, World!';
const svg = new QRCode({ content, background: 'transparent' }).svg();
return new Response(svg, { headers: { 'Content-Type': 'image/svg+xml' } });
}
Build the worker
Add the following script to the package.json
file:
{
"scripts": {
"build": "esbuild worker.ts --bundle --minify --outfile=worker.js"
}
}
Then run the following command to build the worker:
npm run build
Deploy the worker
Go to the OpenWorkers dashboard and create a new worker.
Then, go to the "Edit" tab and paste the generated code into the editor.
Finally, click "Save and deploy" to deploy the worker.
Test the worker
In the preview section of the edit page, you can see the generated QR code.
Change the URL to add a text
query parameter to change the content of the QR code:
/?text=Hello World!