Let’s Make a QR Code Generator With a Serverless Operate! | CSS-Tips

QR codes are humorous, proper? We love them, then hate them, then love them once more. In any case, they’ve currently been popping up once more and it obtained me occupied with how they’re made. There are like a gazillion QR code mills on the market, however say it’s one thing you have to do by yourself web site. This bundle can do this. But it surely’s additionally weighs in at a hefty 180 KB for every little thing it must generate stuff. You wouldn’t need to serve all that together with the remainder of your scripts.

Now, I’m comparatively new to the idea of cloud features, however I hear that’s the bee’s knees for one thing identical to this. That means, the perform lives someplace on a server that may be known as when it’s wanted. Sorta like a little bit API to run the perform.

Some hosts supply some type of cloud perform characteristic. DigitalOcean occurs to be one in all them! And, like Droplets, features are fairly simple to deploy.

Create a features folder regionally

DigitalOcean has a CLI that with a command that’ll scaffold issues for us, so cd wherever you need to set issues up and run:

doctl serverless init --language js qr-generator

Discover the language is explicitly declared. DigitalOcean features additionally help PHP and Python.

We get a pleasant clear mission known as qr-generator with a /packages folder that holds all of the mission’s features. There’s a pattern perform in there, however we are able to overlook it for now and create a qr folder proper subsequent to it:

That folder is the place each the qrcode bundle and our qr.js perform are going to dwell. So, let’s cd into packages/pattern/qr and set up the bundle:

npm set up --save qrcode

Now we are able to write the perform in a brand new qr.js file:

const qrcode = require('qrcode')

exports.important = (args) => {
  return qrcode.toDataURL(args.textual content).then(res => ({
    headers:  { 'content-type': 'textual content/html; charset=UTF-8' },
    physique: args.img == undefined ? res : `<img src="https://css-tricks.com/lets-make-a-qr-code-generator-with-a-serverless-function/${res}">`
  }))
}

if (course of.env.TEST) exports.important({textual content:"howdy"}).then(console.log)

All that’s doing is requiring the the qrcode bundle and exporting a perform that mainly generates an <img> tag with the a base64 PNG for the supply. We will even try it out within the terminal:

doctl serverless features invoke pattern/qr -p "textual content:css-tricks.com"

Verify the config file

There may be one additional step we want right here. When the mission was scaffolded, we obtained this little mission.yml file and it configures the perform with some details about it. That is what’s in there by default:

targetNamespace: ''
parameters: {}
packages:
  - identify: pattern
    atmosphere: {}
    parameters: {}
    annotations: {}
    actions:
      - identify: howdy
        binary: false
        important: ''
        runtime: 'nodejs:default'
        internet: true
        parameters: {}
        atmosphere: {}
        annotations: {}
        limits: {}

See these highlighted strains? The packages: identify property is the place within the packages folder the perform lives, which is a folder known as pattern on this case. The actions/ identify property is the identify of the perform itself, which is the identify of the file. It’s howdy by default after we spin up the mission, however we named ours qr.js, so we oughta change that line from howdy to qr earlier than transferring on.

Deploy the perform

We will do it straight from the command line! First, we connect with the DigitalOcean sandbox atmosphere so we’ve a dwell URL for testing:

## You will have an DO API key helpful
doctl sandbox join

Now we are able to deploy the perform:

doctl sandbox deploy qr-generator

As soon as deployed, we are able to entry the perform at a URL. What’s the URL? There’s a command for that:

doctl sbx fn get pattern/qr --url
https://faas-nyc1-2ef2e6cc.doserverless.co/api/v1/internet/fn-10a937cb-1f12-427b-aadd-f43d0b08d64a/pattern/qr

Heck yeah! No extra must ship that total bundle with the remainder of the scripts! We will hit that URL and generate the QR code from there.

Demo

We fetch the API and that’s actually all there may be to it!