How to Generate Barcodes in Node.js Using Express, EJS, and JsBarcode

How to Generate Barcodes in Node.js Using Express, EJS, and JsBarcode

Generating barcodes programmatically is a frequent requirement when building inventory systems, invoicing modules, or shipping portals. While many developers rely on heavy client-side libraries or external APIs, you can easily build a server-side barcode generator using Node.js, Express, EJS, and the Canvas package.

In this tutorial, we will walk through a complete implementation of a dynamic barcode web app that accepts user input via a form, generates a barcode image server-side using JsBarcode and canvas, and renders it instantly on an EJS template.

Prerequisites & Tech Stack

Make sure you have Node.js installed on your system. We will use the following packages:

  • Express: Fast, unopinionated web framework for Node.js.
  • EJS: Embedded JavaScript templating engine.
  • Canvas: To provide a headless HTML5 Canvas implementation in Node.js.
  • JsBarcode: A lightweight barcode generation library.

Step 1: Initialize Project and Install Dependencies

Open your terminal, create a new directory for your project, initialize the package, and install the required dependencies:

mkdir barcode
cd barcode
npm init -y
npm install express ejs canvas jsbarcode

Step 2: Set Up the Express Server (index.js)

Create your main server file named index.js and add the server configuration and routing logic:

const express = require('express');
const { Canvas } = require("canvas");
const JsBarcode = require('jsbarcode');

const app = express();

app.set('view engine', 'ejs');

app.use(express.urlencoded({ extended: false }));
app.use(express.json());

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

app.post('/', (req, res) => {
    const canvas = new Canvas();
    JsBarcode(canvas, req.body.qrcodee, {
        lineColor: "#0aa",
        width: 4,
        height: 40,
        displayValue: false
    });

    canvas.toDataURL('image/png', (err, png) => {
        console.log(png);
        res.render('index', { data: png });
    });
});

app.listen(3000, () => console.log('Server running at http://localhost:3000'));

Step 3: Create the EJS Template (views/index.ejs)

Create a folder named views, and inside it, create a file named index.ejs. This template includes a Bootstrap-styled form for user input and dynamically renders the generated barcode image.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node.js Barcode Generator</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
    <div class="container" style="margin-top: 100px;">
        <table border="1" class="table"> 
            <tr>
                <td>
                    <form action="/" method="post">
                        <input type="text" name="qrcodee" placeholder="enter barcode text" class="form-control"><br>
                        <button class="btn btn-primary" type="submit">Generate Barcode</button>
                    </form>    
                </td>
            </tr>
            <tr>
                <td>
                    <% if (data !== '') { %>
                        <img src="<%= data.replace(/"/g, "") %>" class="form-control" alt="Generated Barcode">
                    <% } %>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Step 4: Run and Test Your Application

  1. Start your server in your terminal:
    node index.js
  2. Open your web browser and navigate to:
    http://localhost:3000
  3. Type any text into the input field and click Generate Barcode to view your server-rendered barcode instantly!

References & Source Code

Video Tutorial: Watch Video Tutorial on YouTube

Source Code: Download Source Code on GitHub

Comments

Post a Comment

Popular posts from this blog

How to Setup a Flask Project in Python: Step-by-Step Guide

Image
Prerequisite Python What Is Flask ? Flask is a lightweight Web framework written in Python. It is developed by  Armin Ronacher. Flask is based on the Werkzeug WSGI toolkit and Jinja2 template engine Setup Development Environment First Install Virtualenv In Python virtualenv  is a virtual python environment builder.virtualenv    is used to manage python packages for different projects. Using virtualenv allows you to avoid installing python packages globally which could break system tools or other projects. Install the virtualenv using the following command.This command needs administrator privileges # pip install virtualenv After installing the virtualenv . Make Folder create new folder using the following command  # mkdir flaskdemo change to the current created directory/folder # cd flaskdemo Create a Virtual Environment for Flask In Folder Now we will create a virtualenv .  The commands below will c...
Read more

How to Use Sequelize-CLI to Create Tables and Relationships in Node.js

Introduction In this article, we will explore how to use Sequelize-CLI for creating database tables and setting up powerful relationships between multiple tables using foreign keys in Node.js and MySQL. Project Structure |--------- config |--------- config.json |--------- models |--------- index.js |--------- department.js |--------- emp.js |--------- migrations |--------- [timestamp]-create-department.js |--------- [timestamp]-create-emp.js |--------- seeders |--------- app.js |--------- package.json Setup The Node Project Let's begin by initializing our workspace: Open your console and create a new directory: mkdir seqlcli Navigate into that directory: cd seqlcli Initialize the Node.js project by running: npm init This will prompt you for basic project metadata like name, version, and author, generating a package.json file. Install P...
Read more

How to Upload Images in Node.js and Express Using AJAX and jQuery

How to Upload Images in Node.js and Express Using AJAX and jQuery Handling asynchronous file uploads without refreshing the page provides a seamless user experience. In this tutorial, we will explore how to upload an image file using AJAX and jQuery in a Node.js and Express application. We will use the browser's FileReader API to read the selected file as a Data URL, send the Base64-encoded payload to the server via AJAX, and save it directly to the server using Node's fs (File System) module. Project Structure Your project directory should be structured as follows: upload/ ├── views/ │ └── demo.ejs ├── app.js └── package.json Step 1: Set Up Your Project Folder Open your command prompt or terminal and initialize a new directory for your project: mkdir upload cd upload Step 2: Initialize Node.js and Install Dependencies Initialize your Node.js environment by creating a package.json f...
Read more