Build Self Hosted QR-Code Generator

Introduction

Hi, Folks. QR (Quick Response) codes have become increasingly popular in recent years due to their ability to store various types of information in a compact format. QR codes provide a convenient way to transmit data, whether for sharing URLs, contact details, or product information. In this blog post, we'll explore how to build your own QR code server using Node.js, allowing you to generate and serve QR codes dynamically.

Let's Begin

Before starting out your own QR - code generator service from scratch. Let's see the steps to follow

• Setting up the Node.js Environment

• Installing Dependencies

• Designing the API Endpoints

• Generating QR Codes

Setting up the Node.js Environment

Setting up a node.js environment is a pretty easy task. The setting up environment is out of the scope of this article. If you have trouble setting up the environment check the article Node JS Environment Setup - Node.js installation.

Installing Dependencies

We are going to use Express.js for building a web server. Follow the steps below for initial setup.

mkdir qrCodeGenerator
cd qrCodeGenerator

Open the project root in your favorite editor and start initializing the project.

npm init -y

Then Let's start installing the required packages. We are going to use Express.js dotenv & QR-code package.

npm i express
npm i dotenv
npm i qrcode

Once all the dependencies are installed your package.json file would be seems like below.

{
  "name": "qr-code-generator",
  "version": "1.0.0",
  "description": "The self hosted server for generating QR-Code",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "keywords": [
    "server"
  ],
  "author": "saravanasai",
  "license": "MIT",
  "dependencies": {
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "qrcode": "^1.5.3"
  }
}

Designing the API Endpoints

Now let's start building the endpoints for the open world to generate the Q-code.

Create a server.js file on the project root folder. First, we want to create a basic w sever using experss.js.For configuring the port. we are using a dotenv file for future configuration.

PORT = 3000

require('dotenv').config()
const express = require('express')
const app = express()

app.listen(process.env.PORT, () => {
    console.log("Server started on port" + process.env.PORT);
})

Now, Our basic web server is ready. Let's create an endpoint for QR-code conversion.

app.get('/generate-qr-code', async function (req, res) {

    let { data } = req.query
    let dataUrl = await QRCode.toDataURL(String(data));
    res.json({ code: dataUrl })

})

This is our endpoint that converts given data into QR-code data URL.The file server.js looks like the code below.

require('dotenv').config()
const express = require('express')
const QRCode = require('qrcode')
const app = express()

app.get('/generate-qr-code', async function (req, res) {

    let { data } = req.query
    let dataUrl = await QRCode.toDataURL(String(data));
    res.json({ code: dataUrl })

})

app.listen(process.env.PORT, () => {
    console.log("Server started on port" + process.env.PORT);
})

Awesome that's it. We have to build a self-hosting QR-code generator using Node.js.

Generating QR Codes

Now we can call the endpoint from different applications to generate a QR code. The API reference follows.

API Reference

To generate QR-Code

  GET http://localhost:3000/generate-qr-code

Sample Response

{ 
  code: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAAAklEQVR4AewaftIAAAKpSURBVO3BQa7jSAwFwUxC97/yGy+5KkCQ/KdNMMJ8sMYo1ijFGqVYoxRrlGKNUqxRijVKsUYp1ijFGqVYoxRrlGKNUqxRijXKxUMq
}

For a re-built solution check out my self-hosting-QR-code-generator.

Conclusion

In conclusion, self-hosting a QR code generator can be a viable and beneficial option for various reasons. By hosting the generator on your own server or infrastructure, you have more control over the data and privacy aspects, and you can customize the generator to fit your specific needs.

I hope you have learned something new today. Share this with your friends & give a thumbs up for more content like this.