Hey Everyone,

In this article, we will learn how to generate QR code in node js and we will use QRcode npm package to generate QR code.

Uses and importance of QR Codes

QR means “Quick Response”. QR scanners can instantly process the data by scanning it. Now We will see some of the major uses of QR Codes:

For payment methods.
For bike share and scooter share rentals.
Shopping and E-commerce.
View business location.
Send a message.
By companies to advertise and download apps and so much more…

Let’s start by setting up our project directory. Create a folder and name it QRcode. Open the folder with Visual Studio Code. Once inside VS Code, open the terminal.

Create a package.json file by running:

npm init -y

Once created, Execute the following command to install express, QRcode, body-parser, and ejs dependencies in your node js app:

npm i express qrcode body-parser ejs

Create an index.js file, So go to your app root directory and create it. Now import the below dependencies in the index.js file:

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const qrcode = require("qrcode");

Now let’s use the express package to set our template engine (view engine) and the body-parser middleware for parsing bodies from URL and JSON objects.

app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

Let’s Create a simple route (/) and render the index.ejs file.

app.get("/", (req, res) => {
    res.render("index");
});

Now, Add a POST request to convert Text/URL to QR Code.

app.post("/scan", (req, res) => {
    const url = req.body.url;
    if (url.length === 0) res.send("Empty Data!");
    qrcode.toDataURL(url, (err, src) => {
        if (err){
      res.send("Error occured");
    }
        res.render("qrcode", { src });
    });
});

Let’s create a node js server and starts the server.

const port = 3000;
app.listen(port, () => console.log("Server at 3000"));

Inside the main directory, create an additional folder called views”. In this directory, add 2 new files and name them index.ejs and qrcode.ejs.

Now, Copy the below code and paste it inside the index.ejs file.

<!doctype html>
<html lang="en">
<head>
    <title>QR Code Generator</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
        * {
            font-family: Montserrat;
        }
        body {
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1 class="text-center">QR CODE GENERATOR</h1>
        <hr>
    </div>
    <h4>Input</h4>
<hr>
<p>Please type the URL or Text below and click Generate!</p>
<form class="form" action="/scan" method="POST">
    <input name="url" class="form-control" placeholder="URL or Text" type="text" required>
    <br>
    <button type="submit" class="btn btn-primary" value="Get QR">Generate</button>
</form>
</body>
</html>

Now, Inside the qrcode.ejs file, add a below code that will contain the QR Code image generated. Add a button that returns us to the previous page.

<img src=<%=src%> alt="QR Code Image">
<p>Scan the QR Code to access data!</p>
<a href="/"><button type="button" class="btn btn-primary">Back</button></a>

Let’s run our application using Node.js by running the command below inside the terminal:

node index.js

How to Generate QR Code Using Node.js.

Uses and importance of QR Codes

Output:

Main Webpage:

QR Webpage:

Utsav Vasoya

Submit a Comment Cancel reply

Subscribe