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.

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 run at 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.

<html>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"  crossorigin="anonymous">

    <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 Qrcode</button>

                </form>    

            </td>

             </tr>

             <tr>

               <td>

                <%if(data!=''){%>

                    <img src="<%= data.replace(/"/g,"") %>" class="form-control">

                    <%}%>

               </td>

             </tr>

           </table>

    </div>

</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!




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

Hashing Password With Bcrypt In Node

Image
Image by Jae Rue from Pixabay Introduction In this article we will be using the bcryptjs javascript library for hashing and compare password.Here we will build a simple api fore register and login.when we will hash the password when user register and then compare that password with hash when they login. What is bcrypt ? bcrypt is a  password hashing function  designed by  Niels Provos  and David Mazières, based on the  Blowfish  cipher, and presented at  USENIX  in 1999.Besides incorporating a  salt  to protect against  rainbow table  attacks, bcrypt is an adaptive function: over time, the iteration count can be increased to make it slower, so it remains resistant to  brute-force search  attacks even with increasing computation power. What is hashing ?  Hashing is a one way function (well, a mapping). It's irreversible, you apply the secure hash algorithm and you cannot ge...
Read more