├── project.yml ├── web ├── assets │ └── do.png ├── dist │ ├── assets │ │ └── do.png │ └── index.html ├── build.sh └── index.html ├── .gitignore ├── packages └── qr │ └── qr │ ├── package.json │ └── qr.js ├── .do └── deploy.template.yaml └── README.md /project.yml: -------------------------------------------------------------------------------- 1 | packages: 2 | - name: qr 3 | actions: 4 | - name: qr 5 | runtime: nodejs:default -------------------------------------------------------------------------------- /web/assets/do.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalocean/sample-functions-nodejs-qrcode/HEAD/web/assets/do.png -------------------------------------------------------------------------------- /web/dist/assets/do.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/digitalocean/sample-functions-nodejs-qrcode/HEAD/web/dist/assets/do.png -------------------------------------------------------------------------------- /web/build.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | rm -rf dist/ 4 | mkdir dist; 5 | sed -e "s|%%FUNCTION_API_URL%%|${FUNCTION_API_URL}|" index.html > dist/index.html; 6 | 7 | cp -R assets dist/ -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *~ 2 | node_modules 3 | # package-lock.json 4 | yarn.lock 5 | __deployer__.zip 6 | .nimbella 7 | .project 8 | .settings 9 | .idea 10 | demo-projects.iml 11 | pnpm-lock.yaml 12 | vendor 13 | composer.lock 14 | -------------------------------------------------------------------------------- /packages/qr/qr/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qr", 3 | "version": "1.0.0", 4 | "description": "Serverless QR generator", 5 | "main": "qr.js", 6 | "dependencies": { 7 | "qrcode": "^1.3.2" 8 | }, 9 | "devDependencies": {} 10 | } 11 | -------------------------------------------------------------------------------- /packages/qr/qr/qr.js: -------------------------------------------------------------------------------- 1 | const qrcode = require('qrcode') 2 | 3 | exports.main = (args) => { 4 | return qrcode.toDataURL(args.text).then(res => ({ 5 | headers: { 'content-type': 'text/html; charset=UTF-8' }, 6 | body: args.img == undefined ? res : `` 7 | })) 8 | } 9 | 10 | if (process.env.TEST) exports.main({text:"hello"}).then(console.log) 11 | -------------------------------------------------------------------------------- /.do/deploy.template.yaml: -------------------------------------------------------------------------------- 1 | spec: 2 | alerts: 3 | - rule: DEPLOYMENT_FAILED 4 | - rule: DOMAIN_FAILED 5 | functions: 6 | - git: 7 | branch: main 8 | repo_clone_url: https://github.com/digitalocean/sample-functions-nodejs-qrcode 9 | name: qrcode 10 | routes: 11 | - path: /api 12 | source_dir: / 13 | name: qrcode-app 14 | static_sites: 15 | - build_command: ./build.sh 16 | environment_slug: html 17 | envs: 18 | - key: FUNCTION_API_URL 19 | scope: BUILD_TIME 20 | value: ${qrcode.PUBLIC_URL} 21 | git: 22 | branch: main 23 | repo_clone_url: https://github.com/digitalocean/sample-functions-nodejs-qrcode 24 | name: qrcode-ui 25 | output_dir: dist 26 | routes: 27 | - path: / 28 | source_dir: web 29 | -------------------------------------------------------------------------------- /web/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Serverless Cloud. Beautiful. 6 | 7 | 8 | 18 | 19 | 20 | 21 |
22 |
23 |

Cloud-native by construction.
No tools added.

24 |
25 |
26 | 28 | 29 |
30 |
31 |
32 |
33 |
34 | 35 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Serverless Cloud. Beautiful. 6 | 7 | 8 | 18 | 19 | 20 | 21 |
22 |
23 |

Cloud-native by construction.
No tools added.

24 |
25 |
26 | 28 | 29 |
30 |
31 |
32 |
33 |
34 | 35 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > ⚠️ **This repository is archived and kept for reference purposes only.** 2 | > It is no longer maintained and will not receive updates or support. 3 | 4 | # Sample Function: QR Code Generator 5 | 6 | ## Introduction 7 | 8 | This repository contains a sample QR code generator function. You can deploy it on DigitalOcean's App Platform as a Serverless Function component. 9 | Documentation is available at https://docs.digitalocean.com/products/functions. 10 | 11 | ### Requirements 12 | 13 | * You need a DigitalOcean account. If you don't already have one, you can sign up at [https://cloud.digitalocean.com/registrations/new](https://cloud.digitalocean.com/registrations/new). 14 | * To deploy from the command line, you will need the [DigitalOcean `doctl` CLI](https://github.com/digitalocean/doctl/releases). 15 | 16 | ## Deploying the Function 17 | 18 | ``` 19 | # clone this repo 20 | git clone git@github.com:digitalocean/sample-functions-nodejs-qrcode.git 21 | ``` 22 | 23 | ``` 24 | # deploy the project 25 | > doctl serverless deploy sample-functions-nodejs-qrcode 26 | Deploying 'sample-functions-nodejs-qrcode' 27 | to namespace 'fn-...' 28 | on host 'https://faas-...' 29 | Started running npm install --production in sample-functions-nodejs-qrcode/default/qr 30 | Finished running npm install --production in sample-functions-nodejs-qrcode/default/qr 31 | ... 32 | 33 | Deployed functions ('doctl sbx fn get --url' for URL): 34 | - qr 35 | ``` 36 | 37 | ## Using the Function 38 | 39 | ``` 40 | > doctl serverless functions invoke qr/qr -p text:hello 41 | { 42 | "body": "data:image/png;base64,iVB...5CYII=", 43 | "headers": { 44 | "content-type": "text/html; charset=UTF-8" 45 | } 46 | } 47 | ``` 48 | 49 | ### Project File Structure 50 | 51 | This app is a stateless single-page web application that generates a [QR code](https://en.wikipedia.org/wiki/QR_code) from text that a user submits. 52 | 53 | This project has the following components: 54 | 55 | - A single [`index.html`](./client/index.html) file, which has a field for a visitor to enter some text and click **Submit**. 56 | - A single JavaScript file [`qr.js`](./packages/default/qr/qr.js) that provides the backend logic for the conversion of text to QR code. 57 | - A Node package manager file called [`package.json`](./packages/default/qr/package.json), which describes what dependencies the function has. 58 | 59 | The GitHub project has the file structure that App Platform uses to intelligently deploy the project: 60 | 61 | - The [`packages`](./packages) directory contains the project's API implementation, and in this example, there's only one API implemented by a single function. The first subdirectory name usually serves as the package qualifier. The next subdirectory, [`qr`](./packages/default/qr), is the name of the function, and the file [`qr.js`](./packages/default/qr/qr.js) contains the logic for that function. The qualified name of the function is also the name of the API it implements which is `default/qr` in this case. 62 | - The [`client`](./client) directory contains the static web content for the project. In this case, there is just one HTML file and one image. The [`index.html`](./client/index.html) file contains a form with a text box for the user to input the text that will be converted. 63 | 64 | ### Notes on QR Logic 65 | 66 | The code for the QR action is standard Node.js. It uses an existing Node [library](https://www.npmjs.com/package/qrcode) package for the actual QR code generation. 67 | 68 | ### Notes on QR Web Content 69 | 70 | The [`index.html`](./client/index.html) file contains the usual markup and logic that you'd write for standard web deployment, with an input form for text. In this case, it calls an API to retrieve a QR code for the form input. This API is implemented by [`qr.js`](./packages/default/qr/qr.js). 71 | 72 | ### Notes on `package.json` 73 | 74 | The [`package.json`](./packages/default/qr/package.json) file in the [`qr`](./packages/default/qr) directory triggers an automatic build of the action when the function in [`qr.js`](./packages/default/qr/qr.js) is modified. 75 | 76 | ### Learn More 77 | 78 | You can learn more about Functions and App Platform integration in [the official App Platform Documentation](https://www.digitalocean.com/docs/app-platform/). 79 | --------------------------------------------------------------------------------