From b0f7ba919f9de793c1e474a72825e5a3a51084ff Mon Sep 17 00:00:00 2001 From: lauragift21 Date: Fri, 16 Jun 2023 14:22:17 +0200 Subject: [PATCH 1/6] update qr code generator tutorial --- .../build-a-qr-code-generator/index.md | 343 ++++++++++-------- 1 file changed, 198 insertions(+), 145 deletions(-) diff --git a/content/workers/tutorials/build-a-qr-code-generator/index.md b/content/workers/tutorials/build-a-qr-code-generator/index.md index 6500720e9cdb98..379d3b5c2e9589 100644 --- a/content/workers/tutorials/build-a-qr-code-generator/index.md +++ b/content/workers/tutorials/build-a-qr-code-generator/index.md @@ -1,5 +1,5 @@ --- -updated: 2020-03-09 +updated: 2023-06-16 difficulty: Beginner content_type: 📝 Tutorial pcx_content_type: tutorial @@ -9,130 +9,132 @@ layout: single # Build a QR code generator -{{}} - {{}} ## Overview -In this tutorial, you will build and publish a serverless function that generates QR codes, using Cloudflare Workers. +In this tutorial, you will build and publish a application that generates QR codes, using Cloudflare Workers. -This guide will teach you how to build and publish serverless functions. This guide does not assume prior experience with serverless functions or Cloudflare Workers. +This guide will teach you how to build and publish a Worker. This guide does not assume prior experience with Cloudflare Workers. If you would like to review the code for this tutorial, the final version of the codebase is [available on GitHub](https://github.com/codewithkristian/workers-qr-code-generator). You can take the code provided in the example repository, customize it, and deploy it for use in your own projects. -## Init - -Cloudflare’s command-line tool for managing Worker projects, [Wrangler](https://github.com/cloudflare/wrangler-legacy), supports various templates — pre-built collections of code that make it easy to start writing Workers. You will make use of the default JavaScript template to start building your project. +## 1. Create a new project -In the command line, run the `wrangler init` command to create your Worker project and pass the project name `qr-code-generator`: +First, use the [`create-cloudflare` CLI](/pages/get-started/c3) to create a new Cloudflare Workers project. To do this, open a terminal window and run the following command: ```sh --- -header: Creating a new project with Wrangler +header: Create a new project with C3 --- -$ wrangler init qr-code-generator -$ cd qr-code-generator -$ wrangler dev +$ npm create cloudflare@latest qr-code-generator ``` -Inside of your new `qr-code-generator` directory, `index.js` represents the entry point to your Cloudflare Workers application. +When configuring your Worker: + +* Choose `"Hello World" script` for the type of application you would like to create. +* Answer `no` to using TypeScript. +* Answer `no` to deploying your Worker + +Inside of your new `qr-code-generator` directory, `worker.js` represents the entry point to your Cloudflare Workers application. All Cloudflare Workers applications start by listening for `fetch` events, which are triggered when a client makes a request to a Workers route. After a request is received by the Worker, the response your application constructs will be returned to the user. This tutorial will guide you through understanding how the request/response pattern works and how you can use it to build fully featured applications. ```js --- -filename: "index.js" +filename: "worker.js" --- -addEventListener("fetch", event => { - event.respondWith(handleRequest(event.request)) -}) - -/** - * Fetch and log a request - * @param {Request} request - */ -function handleRequest(request) { - return new Response("Hello worker!") -} +export default { + async fetch(request, env, ctx) { + return new Response('Hello Worker!'); + }, +}; ``` -In your default `index.js` file, you can see that request/response pattern in action. The `handleRequest` constructs a new `Response` with the body text `"Hello worker!"`, as well as an explicit `200` status code. - -When a Worker receives a `fetch` event, the script must use `event.respondWith` to return the newly constructed response to the client. Your Cloudflare Worker script will serve new responses directly from [Cloudflare's global network](https://www.cloudflare.com/network) instead of continuing to your origin server. A standard server would accept requests and return responses. Cloudflare Workers allows you to respond quickly by constructing responses directly on the Cloudflare global network. +In your default `worker.js` file, you can see that request/response pattern in action. The `fetch` constructs a new `Response` with the body text `"Hello Worker!"`. -## Build +When a Worker receives a `fetch` event, the script returns the newly constructed response to the client. Your Worker script will serve new responses directly from [Cloudflare's global network](https://www.cloudflare.com/network) instead of continuing to your origin server. A standard server would accept requests and return responses. Cloudflare Workers allows you to respond quickly by constructing responses directly on the Cloudflare global network. -Any project you publish to Cloudflare Workers can make use of modern JavaScript tooling like ES modules, `npm` packages, and [`async`/`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) functions to build your application. In addition to writing serverless functions, you can use Workers to [build full applications](/workers/tutorials/build-a-slackbot/) using the same tooling and process as in this tutorial. +## 2. Handle Incoming Request -The QR code generator you will build in this tutorial will be a serverless function that runs on a single route and receives requests. Each request will contain a text message (a URL, for example), which the function will encode into a QR code. The function will then respond with the QR code in PNG image format. +Any project you publish to Cloudflare Workers can make use of modern JavaScript tooling like ES modules, `npm` packages, and [`async`/`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) functions to build your application. In addition to writing Workers, you can use Workers to [build full applications](/workers/tutorials/build-a-slackbot/) using the same tooling and process as in this tutorial. -### Handling requests +The QR code generator you will build in this tutorial will be a Worker that runs on a single route and receives requests. Each request will contain a text message (a URL, for example), which the function will encode into a QR code. The function will then respond with the QR code in PNG image format. -At this point in the tutorial, your Worker function can receive requests and return a simple response with the text `"Hello worker!"`. To handle data coming into your serverless function, check if the incoming request is a `POST`: +At this point in the tutorial, your Worker function can receive requests and return a simple response with the text `"Hello Worker!"`. To handle data coming into your Worker, check if the incoming request is a `POST` request: ```js --- -filename: "index.js" +filename: "worker.js" highlight: [2, 3, 4] --- -function handleRequest(request) { - if (request.method === "POST") { - return new Response("Hello worker!") - } -} +export default { + async fetch(request, env, ctx) { + if (request.method === 'POST') { + return new Response('Hello Worker!'); + } + }, +}; ``` Currently, if an incoming request is not a `POST`, the function will return `undefined`. However, a Worker always needs to return a `Response`. Since the function should only accept incoming `POST` requests, return a new `Response` with a [`405` status code](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/405) if the incoming request is not a `POST`: ```js --- -filename: "index.js" -highlight: [5] +filename: "worker.js" +highlight: [7, 8] --- -function handleRequest(request) { - if (request.method === "POST") { - return new Response("Hello worker!") - } - return new Response("Expected POST", { status: 405 }) -} +export default { + async fetch(request, env, ctx) { + if (request.method === 'POST') { + return new Response('Hello Worker!'); + } + + return new Response('Expected POST request', { + status: 405, + }) + }, +}; ``` -You have established the basic flow of `handleRequest`. You will now set up a response to incoming valid requests. If a `POST` request comes in, the function should generate a QR code. To start, move the `"Hello worker!"` response into a new function, `generate`, which will ultimately contain the bulk of your function’s logic: +You have established the basic flow of the request. You will now set up a response to incoming valid requests. If a `POST` request comes in, the function should generate a QR code. To start, move the `"Hello Worker!"` response into a new function, `generateQRCode`, which will ultimately contain the bulk of your function’s logic: ```js --- -filename: "index.js" -highlight: [1, 2, 3] +filename: "worker.js" +highlight: [7, 8, 9] --- -async function generate(request) { - // TODO: Include QR code generation - return new Response("Hello worker!") +export default { + async fetch(request, env, ctx) { + if (request.method === "POST") {} + } } -async function handleRequest(request) { - // ... +async function generateQRCode(request) { + // TODO: Include QR code generation + return new Response("Hello worker!") } ``` -With the `generate` function filled out, call it within `handleRequest` and return its result directly to the client: +With the `generateQRCode` function filled out, call it within `fetch` function and return its result directly to the client: ```js --- -filename: "index.js" +filename: "worker.js" highlight: [4] --- -function handleRequest(request) { - // ... - if (request.method === "POST") { - return generate(request) - // ... +export default { + async fetch(request, env, ctx) { + if (request.method === "POST") { + return generateQRCode(request) + } + } } ``` -### Building a QR code +## 3. Build a QR code generator -All projects deployed to Cloudflare Workers support npm packages. This support makes it easy to rapidly build out functionality in your serverless functions. The [`qr-image`](https://github.com/alexeyten/qr-image) package is a great way to take text and encode it into a QR code. The package supports generating the QR codes in a number of file formats (such as PNG, the default, and SVG) and configuring other aspects of the generated QR code. In the command line, install and save `qr-image` to your project’s `package.json`: +All projects deployed to Cloudflare Workers support npm packages. This support makes it easy to rapidly build out functionality in your Workers. The [`qr-image`](https://github.com/alexeyten/qr-image) package is a great way to take text and encode it into a QR code. The package supports generating the QR codes in a number of file formats (such as PNG, the default, and SVG) and configuring other aspects of the generated QR code. In the command line, install and save `qr-image` to your project’s `package.json`: ```sh --- @@ -141,41 +143,29 @@ header: Installing the qr-image package $ npm install --save qr-image ``` -To use the `qr-image` package, configure the `type` to `"webpack"`. This instructs Wrangler to use [Webpack](/workers/wrangler/migration/v1-to-v2/eject-webpack/) to package your project for deployment. Learn more about [`type` configuration](/workers/wrangler/migration/v1-to-v2/wrangler-legacy/configuration/) in the Wrangler documentation. - -```toml ---- -filename: wrangler.toml -highlight: [3] ---- -name = "qr-code-generator" -account_id = "$yourAccountId" -type = "webpack" -``` - -In `index.js`, require the `qr-image` package as the variable `qr`. In the `generate` function, parse the incoming request as JSON using `request.json`, and generate a QR code from `text` using `qr.imageSync`: +In `worker.js`, import the `qr-image` package as the variable `qr`. In the `generateQRCode` function, parse the incoming request as JSON using `request.json`, and generate a QR code from `text` using `qr.imageSync`: ```js --- -filename: "index.js" +filename: "worker.js" highlight: [1, 2, 3, 4, 5, 6] --- const qr = require("qr-image") -async function generate(request) { +async function generateQRCode(request) { const { text } = await request.json() const qr_png = qr.imageSync(text || "https://workers.dev") } ``` -By default, the QR code is generated as a PNG. Construct a new instance of `Response`, passing in the PNG data as the body, and a `Content-Type` header of `image/png` — this will allow browsers to properly parse the data coming back from your serverless function as an image: +By default, the QR code is generated as a PNG. Construct a new instance of `Response`, passing in the PNG data as the body, and a `Content-Type` header of `image/png` — this will allow browsers to properly parse the data coming back from your Worker as an image: ```js --- -filename: "index.js" +filename: "worker.js" highlight: [3, 5] --- -async function generate(request) { +async function generateQRCode(request) { const { text } = await request.json() const headers = { "Content-Type": "image/png" } const qr_png = qr.imageSync(text || "https://workers.dev") @@ -183,109 +173,172 @@ async function generate(request) { } ``` -### Testing in an application UI +The `qr-image` package we installed depends on Node.js APIs, for this to work, you need to set the `node_compat` flag in your wrangler configuration file: + +```toml +--- +filename: "wrangler.toml" +--- +node_compat = true +``` + +## 4. Test in an application UI -The serverless function will work if a user sends a `POST` request to a route, but it would be best practice to also be able to test the function with a proper interface. At this point in the tutorial, if any request is received by your function that is not a `POST`, a `405` response is returned. The new version of `handleRequest` should return a new `Response` with a static HTML document instead of the `405` error: +The Worker will work if a user sends a `POST` request to a route, but it would be best practice to also be able to test the function with a proper interface. At this point in the tutorial, if any request is received by your function that is not a `POST`, a `405` response is returned. The new version of `fetch` should return a new `Response` with a static HTML document instead of the `405` error: ```js --- -filename: "index.js" -highlight: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 22] +filename: "worker.js" +highlight: [23-54] --- -const landing = ` -

QR Generator

-

Click the below button to generate a new QR code. This will make a request to your serverless function.

- - -

Check the "Network" tab in your browser’s developer tools to see the generated QR code.

- -` -function handleRequest(request) { - if (request.method === "POST") { - return generate(request) - } return new Response(landing, { headers: { "Content-Type": "text/html" } }) +}, +} + +async function generateQRCode(request) { + const { text } = await request.json() + const headers = { "Content-Type": "image/png" } + const qr_png = qr.imageSync(text || "https://workers.dev") + + return new Response(qr_png, { headers }); } + +const landing = ` +

QR Generator

+

Click the below button to generate a new QR code. This will make a request to your Worker.

+ + +

Generated QR Code Image

+ + +` ``` -The `landing` variable, which is a static HTML string, sets up an `input` tag and a corresponding `button`, which calls the `generate` function. This function will make an HTTP `POST` request back to your serverless function, allowing you to see the corresponding QR code image data inside of your browser’s network inspector. +The `landing` variable, which is a static HTML string, sets up an `input` tag and a corresponding `button`, which calls the `generateQRCode` function. This function will make an HTTP `POST` request back to your Worker, allowing you to see the corresponding QR code image returned on the page. -With the above steps complete, your serverless function is ready. The full version of the code looks like this: +To ensure the QR image shows up on the page, we need to pass in the generated `qr_png` to the image element. ```js --- -filename: "index.js" +filename: "worker.js" +highlight: [2, 4, 5, 6, 7] --- -const qr = require("qr-image") +async function generateQRCode(request) { + ... + const qr_png = qr.imageSync(text || "https://workers.dev") -async function generate(request) { - const { text } = await request.json() - const headers = { "Content-Type": "image/png" } - const qr_png = qr.imageSync(text || "https://workers.dev") - return new Response(qr_png, { headers }) + const landingWithQR = landing.replace( + '', + `` + ); + + return new Response(qr_png, { headers }); +} +``` + +With the above steps complete, your Worker is ready. The full version of the code looks like this: + +```js +--- +filename: "worker.js" +--- +const qr = require('qr-image'); + +export default { + async fetch(request, env, ctx) { + if (request.method === 'POST') { + return generateQRCode(request) + } + + return new Response(landing, { + headers: { + "Content-Type": "text/html" + } + }) + }, +}; + +async function generateQRCode(request) { + const { text } = await request.json() + const headers = { "Content-Type": "image/png" } + const qr_png = qr.imageSync(text || "https://workers.dev") + + const landingWithQR = landing.replace( + '', + `` + ); + + return new Response(qr_png, { headers }); } const landing = `

QR Generator

-

Click the below button to generate a new QR code. This will make a request to your serverless function.

+

Click the below button to generate a new QR code. This will make a request to your Worker.

-

Check the "Network" tab in your browser’s developer tools to see the generated QR code.

+

Generated QR Code Image

+ ` - -function handleRequest(request) { - if (request.method === "POST") { - return generate(request) - } - return new Response(landing, { - headers: { - "Content-Type": "text/html" - } - }) -} - -addEventListener("fetch", event => { - event.respondWith(handleRequest(event.request)) -}) ``` -## Publish +## 5. Deploy your Worker -With all the above steps complete, you have written the code for a QR code serverless function on Cloudflare Workers. +With all the above steps complete, you have written the code for a QR code generator on Cloudflare Workers. -Wrangler has built-in support for bundling, uploading, and releasing your Cloudflare Workers application. To do this, run `wrangler publish`, which will build and publish your code. +Wrangler has built-in support for bundling, uploading, and releasing your Cloudflare Workers application. To do this, run `wrangler deploy`, which will build and deploy your code. ```sh --- -header: Publishing your project +header: Deploy your project --- -$ wrangler publish +$ wrangler deploy ``` ## Related resources -In this tutorial, you built and published a serverless function to Cloudflare Workers for generating QR codes. If you would like to see the full source code for this application, you can find it [on GitHub](https://github.com/codewithkristian/workers-qr-code-generator). +In this tutorial, you built and deployed a Worker application for generating QR codes. If you would like to see the full source code for this application, you can find it [on GitHub](https://github.com/codewithkristian/workers-qr-code-generator). If you want to get started building your own projects, review the existing list of [Quickstart templates](/workers/get-started/quickstarts/). From 062287adf0f568c4ebfdfb6c7bcdc049cda8039c Mon Sep 17 00:00:00 2001 From: lauragift21 Date: Fri, 16 Jun 2023 14:42:40 +0200 Subject: [PATCH 2/6] add code highlights --- .../workers/tutorials/build-a-qr-code-generator/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/workers/tutorials/build-a-qr-code-generator/index.md b/content/workers/tutorials/build-a-qr-code-generator/index.md index 379d3b5c2e9589..aac40282b39b22 100644 --- a/content/workers/tutorials/build-a-qr-code-generator/index.md +++ b/content/workers/tutorials/build-a-qr-code-generator/index.md @@ -102,7 +102,7 @@ You have established the basic flow of the request. You will now set up a respon ```js --- filename: "worker.js" -highlight: [7, 8, 9] +highlight: [7, 8, 9, 10] --- export default { async fetch(request, env, ctx) { @@ -163,7 +163,7 @@ By default, the QR code is generated as a PNG. Construct a new instance of `Resp ```js --- filename: "worker.js" -highlight: [3, 5] +highlight: [3, 4, 5] --- async function generateQRCode(request) { const { text } = await request.json() @@ -247,7 +247,7 @@ To ensure the QR image shows up on the page, we need to pass in the generated `q ```js --- filename: "worker.js" -highlight: [2, 4, 5, 6, 7] +highlight: [6-9] --- async function generateQRCode(request) { ... From 74dba4a5365f57fac0645d97b659ce6bb79c10ef Mon Sep 17 00:00:00 2001 From: lauragift21 Date: Fri, 16 Jun 2023 15:20:51 +0200 Subject: [PATCH 3/6] update tutorial --- .../build-a-qr-code-generator/index.md | 25 ------------------- 1 file changed, 25 deletions(-) diff --git a/content/workers/tutorials/build-a-qr-code-generator/index.md b/content/workers/tutorials/build-a-qr-code-generator/index.md index aac40282b39b22..d48733746638f5 100644 --- a/content/workers/tutorials/build-a-qr-code-generator/index.md +++ b/content/workers/tutorials/build-a-qr-code-generator/index.md @@ -242,26 +242,6 @@ const landing = ` The `landing` variable, which is a static HTML string, sets up an `input` tag and a corresponding `button`, which calls the `generateQRCode` function. This function will make an HTTP `POST` request back to your Worker, allowing you to see the corresponding QR code image returned on the page. -To ensure the QR image shows up on the page, we need to pass in the generated `qr_png` to the image element. - -```js ---- -filename: "worker.js" -highlight: [6-9] ---- -async function generateQRCode(request) { - ... - const qr_png = qr.imageSync(text || "https://workers.dev") - - const landingWithQR = landing.replace( - '', - `` - ); - - return new Response(qr_png, { headers }); -} -``` - With the above steps complete, your Worker is ready. The full version of the code looks like this: ```js @@ -289,11 +269,6 @@ async function generateQRCode(request) { const headers = { "Content-Type": "image/png" } const qr_png = qr.imageSync(text || "https://workers.dev") - const landingWithQR = landing.replace( - '', - `` - ); - return new Response(qr_png, { headers }); } From 73aee104e37de2bf709d58cda7b4782b006c2004 Mon Sep 17 00:00:00 2001 From: lauragift21 Date: Fri, 16 Jun 2023 15:41:42 +0200 Subject: [PATCH 4/6] update github url to worker-sdk link --- content/workers/tutorials/build-a-qr-code-generator/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/workers/tutorials/build-a-qr-code-generator/index.md b/content/workers/tutorials/build-a-qr-code-generator/index.md index d48733746638f5..a0f9f2a7b20b36 100644 --- a/content/workers/tutorials/build-a-qr-code-generator/index.md +++ b/content/workers/tutorials/build-a-qr-code-generator/index.md @@ -314,6 +314,6 @@ $ wrangler deploy ## Related resources -In this tutorial, you built and deployed a Worker application for generating QR codes. If you would like to see the full source code for this application, you can find it [on GitHub](https://github.com/codewithkristian/workers-qr-code-generator). +In this tutorial, you built and deployed a Worker application for generating QR codes. If you would like to see the full source code for this application, you can find it [on GitHub](https://github.com/cloudflare/workers-sdk/tree/main/templates/examples/qr-code-generator). If you want to get started building your own projects, review the existing list of [Quickstart templates](/workers/get-started/quickstarts/). From 46cdfbbd6098a85e112e37295b47ed9b47a98dc4 Mon Sep 17 00:00:00 2001 From: Kate Tungusova Date: Wed, 28 Jun 2023 16:10:55 +0100 Subject: [PATCH 5/6] PCX review --- .../build-a-qr-code-generator/index.md | 40 +++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/content/workers/tutorials/build-a-qr-code-generator/index.md b/content/workers/tutorials/build-a-qr-code-generator/index.md index a0f9f2a7b20b36..82d55faa0d8933 100644 --- a/content/workers/tutorials/build-a-qr-code-generator/index.md +++ b/content/workers/tutorials/build-a-qr-code-generator/index.md @@ -13,13 +13,11 @@ layout: single ## Overview -In this tutorial, you will build and publish a application that generates QR codes, using Cloudflare Workers. - -This guide will teach you how to build and publish a Worker. This guide does not assume prior experience with Cloudflare Workers. +In this tutorial, you will build and publish a Worker application that generates QR codes. If you would like to review the code for this tutorial, the final version of the codebase is [available on GitHub](https://github.com/codewithkristian/workers-qr-code-generator). You can take the code provided in the example repository, customize it, and deploy it for use in your own projects. -## 1. Create a new project +## 1. Create a new Workers project First, use the [`create-cloudflare` CLI](/pages/get-started/c3) to create a new Cloudflare Workers project. To do this, open a terminal window and run the following command: @@ -30,13 +28,13 @@ header: Create a new project with C3 $ npm create cloudflare@latest qr-code-generator ``` -When configuring your Worker: +To configure your Worker: * Choose `"Hello World" script` for the type of application you would like to create. -* Answer `no` to using TypeScript. -* Answer `no` to deploying your Worker +* Answer `No` to using TypeScript. +* Answer `No` to deploying your Worker. -Inside of your new `qr-code-generator` directory, `worker.js` represents the entry point to your Cloudflare Workers application. +Inside of your new `qr-code-generator` Worker project directory, `worker.js` represents the entry point to your Cloudflare Workers application. All Cloudflare Workers applications start by listening for `fetch` events, which are triggered when a client makes a request to a Workers route. After a request is received by the Worker, the response your application constructs will be returned to the user. This tutorial will guide you through understanding how the request/response pattern works and how you can use it to build fully featured applications. @@ -51,9 +49,9 @@ export default { }; ``` -In your default `worker.js` file, you can see that request/response pattern in action. The `fetch` constructs a new `Response` with the body text `"Hello Worker!"`. +In your default `worker.js` file, you can see that request/response pattern in action. The `fetch` constructs a new `Response` with the body text `'Hello Worker!'`. -When a Worker receives a `fetch` event, the script returns the newly constructed response to the client. Your Worker script will serve new responses directly from [Cloudflare's global network](https://www.cloudflare.com/network) instead of continuing to your origin server. A standard server would accept requests and return responses. Cloudflare Workers allows you to respond quickly by constructing responses directly on the Cloudflare global network. +When a Worker receives a `fetch` event, the Worker returns the newly constructed response to the client. Your Worker will serve new responses directly from [Cloudflare's global network](https://www.cloudflare.com/network) instead of continuing to your origin server. A standard server would accept requests and return responses. Cloudflare Workers allows you to respond quickly by constructing responses directly on the Cloudflare global network. ## 2. Handle Incoming Request @@ -65,7 +63,7 @@ At this point in the tutorial, your Worker function can receive requests and ret ```js --- -filename: "worker.js" +filename: worker.js highlight: [2, 3, 4] --- export default { @@ -81,7 +79,7 @@ Currently, if an incoming request is not a `POST`, the function will return `und ```js --- -filename: "worker.js" +filename: worker.js highlight: [7, 8] --- export default { @@ -101,7 +99,7 @@ You have established the basic flow of the request. You will now set up a respon ```js --- -filename: "worker.js" +filename: worker.js highlight: [7, 8, 9, 10] --- export default { @@ -147,7 +145,7 @@ In `worker.js`, import the `qr-image` package as the variable `qr`. In the `gene ```js --- -filename: "worker.js" +filename: worker.js highlight: [1, 2, 3, 4, 5, 6] --- const qr = require("qr-image") @@ -158,11 +156,11 @@ async function generateQRCode(request) { } ``` -By default, the QR code is generated as a PNG. Construct a new instance of `Response`, passing in the PNG data as the body, and a `Content-Type` header of `image/png` — this will allow browsers to properly parse the data coming back from your Worker as an image: +By default, the QR code is generated as a PNG. Construct a new instance of `Response`, passing in the PNG data as the body, and a `Content-Type` header of `image/png`. This will allow browsers to properly parse the data coming back from your Worker as an image: ```js --- -filename: "worker.js" +filename: worker.js highlight: [3, 4, 5] --- async function generateQRCode(request) { @@ -173,11 +171,11 @@ async function generateQRCode(request) { } ``` -The `qr-image` package we installed depends on Node.js APIs, for this to work, you need to set the `node_compat` flag in your wrangler configuration file: +The `qr-image` package you installed depends on Node.js APIs. For this to work, you need to set the `node_compat` flag in your Wrangler configuration file: ```toml --- -filename: "wrangler.toml" +filename: wrangler.toml --- node_compat = true ``` @@ -246,7 +244,7 @@ With the above steps complete, your Worker is ready. The full version of the cod ```js --- -filename: "worker.js" +filename: worker.js --- const qr = require('qr-image'); @@ -307,9 +305,9 @@ Wrangler has built-in support for bundling, uploading, and releasing your Cloudf ```sh --- -header: Deploy your project +header: Deploy your Worker project --- -$ wrangler deploy +$ npx wrangler deploy ``` ## Related resources From f1898b463cba2b8f5641934652c691295a659791 Mon Sep 17 00:00:00 2001 From: lauragift21 Date: Thu, 29 Jun 2023 13:19:44 +0200 Subject: [PATCH 6/6] update date timestamp --- content/workers/tutorials/build-a-qr-code-generator/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/workers/tutorials/build-a-qr-code-generator/index.md b/content/workers/tutorials/build-a-qr-code-generator/index.md index 82d55faa0d8933..c13363c71504f0 100644 --- a/content/workers/tutorials/build-a-qr-code-generator/index.md +++ b/content/workers/tutorials/build-a-qr-code-generator/index.md @@ -1,5 +1,5 @@ --- -updated: 2023-06-16 +updated: 2023-06-29 difficulty: Beginner content_type: 📝 Tutorial pcx_content_type: tutorial