├── .env.example
├── .gitignore
├── README.md
├── index.js
├── package-lock.json
├── package.json
└── wrangler.toml


/.env.example:
--------------------------------------------------------------------------------
1 | BUCKET_NAME="mybucketname"
2 | CLOUDFLARE_ACCOUNT_ID=""
3 | CLOUDFLARE_AUTH_EMAIL=""
4 | CLOUDFLARE_AUTH_KEY=""
5 | CLOUDFLARE_ZONE_ID=""
6 | WORKER_ROUTE="serverless-workers.signalnerve.com/*"
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Hugo default output directory
 2 | /public
 3 | 
 4 | # Serverless config
 5 | node_modules
 6 | .serverless
 7 | 
 8 | ## OS Files
 9 | # Windows
10 | Thumbs.db
11 | ehthumbs.db
12 | Desktop.ini
13 | $RECYCLE.BIN/
14 | 
15 | # OSX
16 | .DS_Store
17 | 
18 | # env config
19 | .env
20 | 
21 | dist
22 | worker
23 | 
24 | .wrangler
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | QR Code Generator, built with Workers
2 | 
3 | There is a [tutorial available](https://developers.cloudflare.com/workers/tutorials/build-a-serverless-function/) if you would like more details on how this works. 
4 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import QRCode from 'qrcode-svg'
 2 | 
 3 | const generate = async request => {
 4 |   const { text } = await request.json()
 5 |   const qr = new QRCode({ content: text || 'https://workers.dev' })
 6 |   return new Response(qr.svg(), { headers: { 'Content-Type': 'image/svg+xml' } })
 7 | }
 8 | 
 9 | const landing = `
10 | <h1>QR Code Generator</h1>
11 | <p>Click the below button to generate a new QR code. This will make a request to your serverless function.</p>
12 | <input type="text" id="text" value="https://workers.dev"></input>
13 | <button onclick='generate()'>Generate QR Code</button>
14 | <p>Check the "Network" tab in your browser's developer tools to see the generated QR code.</p>
15 | <img id="qr"></img>
16 | <script>
17 |   function generate() {
18 |     fetch(window.location.pathname, {
19 |       method: "POST",
20 |       headers: { "Content-Type": "application/json" },
21 |       body: JSON.stringify({ text: document.querySelector("#text").value })
22 |     })
23 |     .then(response => response.blob())
24 |     .then(blob => {
25 |       const reader = new FileReader();
26 |       reader.onloadend = function () {
27 |         document.querySelector("#qr").src = reader.result; // Update the image source with the newly generated QR code
28 |       }
29 |       reader.readAsDataURL(blob);
30 |     })
31 |   }
32 | </script>
33 | `
34 | 
35 | export default {
36 |   fetch: async (request, env) => {
37 |     let response
38 |     if (request.method === 'POST') {
39 |       response = await generate(request)
40 |     } else {
41 |       response = new Response(landing, { headers: { 'Content-Type': 'text/html' } })
42 |     }
43 |     return response
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "workers-qr-code-generator",
 3 |   "version": "0.1.0",
 4 |   "lockfileVersion": 3,
 5 |   "requires": true,
 6 |   "packages": {
 7 |     "": {
 8 |       "name": "workers-qr-code-generator",
 9 |       "version": "0.1.0",
10 |       "dependencies": {
11 |         "qrcode-svg": "^1.1.0"
12 |       }
13 |     },
14 |     "node_modules/qrcode-svg": {
15 |       "version": "1.1.0",
16 |       "resolved": "https://registry.npmjs.org/qrcode-svg/-/qrcode-svg-1.1.0.tgz",
17 |       "integrity": "sha512-XyQCIXux1zEIA3NPb0AeR8UMYvXZzWEhgdBgBjH9gO7M48H9uoHzviNz8pXw3UzrAcxRRRn9gxHewAVK7bn9qw==",
18 |       "license": "MIT",
19 |       "bin": {
20 |         "qrcode-svg": "bin/qrcode-svg.js"
21 |       }
22 |     }
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "workers-qr-code-generator",
 3 |   "main": "index.js",
 4 |   "private": true,
 5 |   "description": "Example project for generating QR codes with Workers",
 6 |   "version": "0.1.0",
 7 |   "author": "Kristian Freeman <kristian@kristianfreeman.com>",
 8 |   "scripts": {
 9 |     "start": "wrangler dev",
10 |     "deploy": "wrangler publish"
11 |   },
12 |   "dependencies": {
13 |     "qrcode-svg": "^1.1.0"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/wrangler.toml:
--------------------------------------------------------------------------------
1 | name = "qr-code-generator"
2 | compatibility_date = "2024-09-30"
3 | main = "index.js"
4 | 


--------------------------------------------------------------------------------