Creating a QR Code with Node.JS

QR codes (Quick Response codes) offer a quick and convenient way to access information. You can easily create your own QR codes using Node.js, and a couple of npm packages. In this tutorial, I’ll guide you through the process step by step 🚀

Installing Packages

• Before we start coding, let’s install the external packages we’ll use: Inquirer and QR-Image. Both are popular choices readily available on the npm package manager.
• If you haven’t already, it’s a good practice to initialize your Node.js project using npm init. This command creates a package.json file, which serves as the backbone of your project by storing dependencies and project details. You can simply press Enter to accept the default settings or customize them as needed.
• Now that our project is set up, let’s install the required packages using the npm i command followed by the package name.

npm i inquirer qr-image

Importing Packages

For projects using modern JavaScript features, you might want to update your package.json file with a "type": "module" property. This ensures you're using the latest import syntax for Node.js modules.

Modern JavaScript (sometimes referred to as ECMAScript) is a simpler way to import packages. It’s equivalent to using the traditional “require” syntax. Here’s how it works:

import inquirer from "inquirer"; // User interaction
import qr from "qr-image"; // QR code generation
import fs from "fs"; // File system access

Writing Functions

To create QR codes, we’ll follow these simple steps:

• Get User Input: We’ll use the inquirer package to ask the user for a website address (URL).
• Generate the QR Code: Using the qr package, we'll transform the entered URL into a QR image format.
• Save the Information: Finally, with the help of the fs package, we'll store the user's URL as a text file (.txt).

While you might find code snippets on the npm website, it’s important to grasp the logic behind them. This way, you can troubleshoot issues, adapt the code to your needs, and become a more confident developer.

Do yourself a favor and do not blindly copy someone’s code, it’ll be a waste of your time and effort 🥲

const inquirer = require("inquirer"); // Import the inquirer package
const qr = require("qr-image"); // Import the qr-image package
const fs = require("fs"); // Import the fs (file system) package

// Step 1: Get User Input for the URL
inquirer
  .prompt([
    {
      message: "Please enter your link to generate a QR code:",
      name: "URL",
    },
  ])
  .then((answers) => {
    const url = answers.URL; // Extract the URL from the answer object

    // Step 2: Generate QR Code Image
    const qr_image = qr.image(url, { type: "png" }); // Create QR image data

    // Save the QR Code Image (png format)
    qr_image.pipe(fs.createWriteStream("qr_code.png"));

    // Step 3: Save User Input as Text File
    fs.writeFile("URL.txt", url, (err) => {
      if (err) throw err;
      console.log("The file has been saved!");
    });
  })
  .catch((error) => {
    console.error("An error occurred:", error); // Handle errors
  });

Let’s do another recap:

• User Input: The inquirer package displays a question and captures the user's URL input.
• QR Code Generation: The qr-image package takes the URL and creates image data representing the QR code.
• Saving the QR Code: The fs package is used to write the QR code image data to a file named "qr_code.png".
• Saving the URL: Again using fs, the user's URL is written to a separate text file named "URL.txt".
• Error Handling: The code includes basic error handling to catch any issues during the process.

Running the Code and Generating Your QR Code

Now that we’ve built the code, let’s put it to the test! Open your terminal and navigate to your project directory. Then, simply run the command node index.js. If everything works as expected, you’ll see a prompt asking you to “Please enter your link to generate a QR code:”. Enter the website address (URL) for which you want to create a QR code, and watch the magic happen.

That’s it! 👋 Thanks for reading my article, you can find more interesting stuff on my website. Feel free to connect with me here or here too. See you!

QR code from the tutorial. Scan at your own risk…