How to Build a URL Shortener With Node.js and MongoDB

How to Build a URL Shortener With Node.js and MongoDB

How to Build a URL Shortener With Node.js and MongoDB - If you've ever embedded a link, you've probably used an app liky bit.ly or goo.gl. In this tutorial, we'll learn how to make our own version of these popular web apps!

How to Build a URL Shortener With Node.js and MongoDB - If you've ever embedded a link, you've probably used an app liky bit.ly or goo.gl. In this tutorial, we'll learn how to make our own version of these popular web apps!

In this post, we’ll show you how to build a URL shortening service like bit.ly or goo.gl using Express.js (Node.js) and MongoDB. Here’s a demo of the final product we’ll be building through our MongoDB hosting platform.

How Does a URL Shortener Work?

At a very high level, the URL shortener works by taking an entered URL and creating a relatively shortened version simplified into an easy to share format. The shortened hash will be generated by base-encoding an auto-incremented counter and creates a minimum three-character hash that increases as the number of stored URLs go up.

When the shortened version of the URL is visited, the service will decode the hash to fetch the original URL stored in MongoDB and then redirect your user to it.

Getting Started

Here’s a list of the technologies we’ll use to build the URL shortener in this tutorial:

Express.js (Node.js backend)

  • A web application framework for Node.js. We’ll use it to build an API for shortening URLs and redirect users to the original URL.

    MongoDB (storing URLs)

  • A web application framework for Node.js. We’ll use it to build an API for shortening URLs and redirect users to the original URL.

    HTML, CSS, JavaScript (front-end)

  • A web application framework for Node.js. We’ll use it to build an API for shortening URLs and redirect users to the original URL.

    URL Shortener Tutorial

    Setup the MongoDB Database Structure

  1. Let’s start by creating a Shared MongoDB Cluster on ScaleGrid. This is the easiest way to create a quick cluster, but you can also install MongoDB on your machine and get started there.connection string that can be copied with a single click from your Cluster Details page. We’ll need this string to connect to the cluster from our application. Remember, never share your connection string with anyone.We’ll need two collections for the URL shortener:

Collection 1

  • A web application framework for Node.js. We’ll use it to build an API for shortening URLs and redirect users to the original URL.

    Collection 2

  • A web application framework for Node.js. We’ll use it to build an API for shortening URLs and redirect users to the original URL.

    Set Up the Express.js Backend

  1. Let’s start by creating a Shared MongoDB Cluster on ScaleGrid. This is the easiest way to create a quick cluster, but you can also install MongoDB on your machine and get started there.connection string that can be copied with a single click from your Cluster Details page. We’ll need this string to connect to the cluster from our application. Remember, never share your connection string with anyone.We’ll need two collections for the URL shortener:
  • A web application framework for Node.js. We’ll use it to build an API for shortening URLs and redirect users to the original URL.
{
  "name": "sg-url-shortener",
  "version": "1.0.0",
  "description": "A simple URL shortener built with Node.js and MongoDB",
  "dependencies": {
    "atob": "^2.0.3",
    "body-parser": "^1.15.2",
    "btoa": "^1.1.2",
    "dotenv": "^4.0.0",
    "express": "^4.10.2",
    "mongoose": "^4.13.7"
  },
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "engines": {
    "node": "4.8.4"
  }
}
  1. Let’s start by creating a Shared MongoDB Cluster on ScaleGrid. This is the easiest way to create a quick cluster, but you can also install MongoDB on your machine and get started there.connection string that can be copied with a single click from your Cluster Details page. We’ll need this string to connect to the cluster from our application. Remember, never share your connection string with anyone.We’ll need two collections for the URL shortener:
connectionString=mongodb://user:[email protected]
  1. Let’s start by creating a Shared MongoDB Cluster on ScaleGrid. This is the easiest way to create a quick cluster, but you can also install MongoDB on your machine and get started there.connection string that can be copied with a single click from your Cluster Details page. We’ll need this string to connect to the cluster from our application. Remember, never share your connection string with anyone.We’ll need two collections for the URL shortener:

Initializing the Application

  1. Let’s start by creating a Shared MongoDB Cluster on ScaleGrid. This is the easiest way to create a quick cluster, but you can also install MongoDB on your machine and get started there.connection string that can be copied with a single click from your Cluster Details page. We’ll need this string to connect to the cluster from our application. Remember, never share your connection string with anyone.We’ll need two collections for the URL shortener:
if(process.env.NODE_ENV !== 'production') {
    require('dotenv').load();
}
  1. Let’s start by creating a Shared MongoDB Cluster on ScaleGrid. This is the easiest way to create a quick cluster, but you can also install MongoDB on your machine and get started there.connection string that can be copied with a single click from your Cluster Details page. We’ll need this string to connect to the cluster from our application. Remember, never share your connection string with anyone.We’ll need two collections for the URL shortener:
var express = require('express'),
    bodyParser = require('body-parser'),
    app = express(),
    http = require('http').Server(app),
    mongoose = require('mongoose'),
    btoa = require('btoa'),
    atob = require('atob'),
    promise,
    connectionString = process.env.connectionString,
    port = process.env.PORT || 8080;

http.listen(port, function() {
    console.log('Server Started. Listening on *:' + port);
});

app.use(express.static('public'));
app.use(bodyParser.urlencoded({
    extended: true
}));
  1. Let’s start by creating a Shared MongoDB Cluster on ScaleGrid. This is the easiest way to create a quick cluster, but you can also install MongoDB on your machine and get started there.connection string that can be copied with a single click from your Cluster Details page. We’ll need this string to connect to the cluster from our application. Remember, never share your connection string with anyone.We’ll need two collections for the URL shortener:
app.get('/', function(req, res) {
    res.sendFile('views/index.html', {
        root: __dirname
    });
});

Storing URLs in MongoDB

  1. Let’s start by creating a Shared MongoDB Cluster on ScaleGrid. This is the easiest way to create a quick cluster, but you can also install MongoDB on your machine and get started there.connection string that can be copied with a single click from your Cluster Details page. We’ll need this string to connect to the cluster from our application. Remember, never share your connection string with anyone.We’ll need two collections for the URL shortener:
var countersSchema = new mongoose.Schema({
    _id: { type: String, required: true },
    count: { type: Number, default: 0 }
});

var Counter = mongoose.model('Counter', countersSchema);

var urlSchema = new mongoose.Schema({
    _id: {type: Number},
    url: '',
    created_at: ''
});

urlSchema.pre('save', function(next) {
    console.log('running pre-save');
    var doc = this;
    Counter.findByIdAndUpdate({ _id: 'url_count' }, { $inc: { count: 1 } }, function(err, counter) {
        if(err) return next(err);
        console.log(counter);
        console.log(counter.count);
        doc._id = counter.count;
        doc.created_at = new Date();
        console.log(doc);
        next();
    });
});

var URL = mongoose.model('URL', urlSchema);
  1. Let’s start by creating a Shared MongoDB Cluster on ScaleGrid. This is the easiest way to create a quick cluster, but you can also install MongoDB on your machine and get started there.connection string that can be copied with a single click from your Cluster Details page. We’ll need this string to connect to the cluster from our application. Remember, never share your connection string with anyone.We’ll need two collections for the URL shortener:
promise = mongoose.connect(connectionString, {
    useMongoClient: true
});

promise.then(function(db) {
    console.log('connected!');
    URL.remove({}, function() {
        console.log('URL collection removed');
    })
    Counter.remove({}, function() {
        console.log('Counter collection removed');
        var counter = new Counter({_id: 'url_count', count: 10000});
        counter.save(function(err) {
            if(err) return console.error(err);
            console.log('counter inserted');
        });
    });
});
  1. Let’s start by creating a Shared MongoDB Cluster on ScaleGrid. This is the easiest way to create a quick cluster, but you can also install MongoDB on your machine and get started there.connection string that can be copied with a single click from your Cluster Details page. We’ll need this string to connect to the cluster from our application. Remember, never share your connection string with anyone.We’ll need two collections for the URL shortener:
app.post('/shorten', function(req, res, next) {
    console.log(req.body.url);
    var urlData = req.body.url;
    URL.findOne({url: urlData}, function(err, doc) {
        if(doc) {
            console.log('entry found in db');
            res.send({
                url: urlData,
                hash: btoa(doc._id),
                status: 200,
                statusTxt: 'OK'
            });
        } else {
            console.log('entry NOT found in db, saving new');
            var url = new URL({
                url: urlData
            });
            url.save(function(err) {
                if(err) return console.error(err);
                res.send({
                    url: urlData,
                    hash: btoa(url._id),
                    status: 200,
                    statusTxt: 'OK'
                });
            });
        }
    });
});
  1. Let’s start by creating a Shared MongoDB Cluster on ScaleGrid. This is the easiest way to create a quick cluster, but you can also install MongoDB on your machine and get started there.connection string that can be copied with a single click from your Cluster Details page. We’ll need this string to connect to the cluster from our application. Remember, never share your connection string with anyone.We’ll need two collections for the URL shortener:

Redirecting Users

  1. Let’s start by creating a Shared MongoDB Cluster on ScaleGrid. This is the easiest way to create a quick cluster, but you can also install MongoDB on your machine and get started there.connection string that can be copied with a single click from your Cluster Details page. We’ll need this string to connect to the cluster from our application. Remember, never share your connection string with anyone.We’ll need two collections for the URL shortener:
app.get('/:hash', function(req, res) {
    var baseid = req.params.hash;
    var id = atob(baseid);
    URL.findOne({ _id: id }, function(err, doc) {
        if(doc) {
            res.redirect(doc.url);
        } else {
            res.redirect('/');
        }
    });
});
  1. Let’s start by creating a Shared MongoDB Cluster on ScaleGrid. This is the easiest way to create a quick cluster, but you can also install MongoDB on your machine and get started there.connection string that can be copied with a single click from your Cluster Details page. We’ll need this string to connect to the cluster from our application. Remember, never share your connection string with anyone.We’ll need two collections for the URL shortener:

More URL Shortener Enhancements

And we’re done! We have a bare-bones URL shortener that can be used internally to simplify your links. If you’d like to add more bells and whistles, here is a list of things you can additionally implement:

  • A web application framework for Node.js. We’ll use it to build an API for shortening URLs and redirect users to the original URL.

The entire code is available here: ScaleGrid URL Shortener Code Samples - GitHub

A demo application is hosted on Heroku: ScaleGrid URL Shortener Demo.

============================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ The Complete Node.js Developer Course (3rd Edition)

☞ Angular & NodeJS - The MEAN Stack Guide

☞ NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL)

☞ Docker for Node.js Projects From a Docker Captain

☞ Intro To MySQL With Node.js - Learn To Use MySQL with Node!

node-js mongodb

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

How to Use Express.js, Node.js and MongoDB.js

In this post, I will show you how to use Express.js, Node.js and MongoDB.js. We will be creating a very simple Node application, that will allow users to input data that they want to store in a MongoDB database. It will also show all items that have been entered into the database.

Build a REST API using Node.js, Express.js, Mongoose.js and MongoDB

Node.js, Express.js, Mongoose.js, and MongoDB is a great combination for building easy and fast REST API. You will see how fast that combination than other existing frameworks because of Node.js is a packaged compilation of Google’s V8 JavaScript engine and it works on non-blocking and event-driven I/O. Express.js is a Javascript web server that has a complete function of web development including REST API.

Node.js, ExpressJs, MongoDB and Vue.js (MEVN Stack) Application Tutorial

In this tutorial, you'll learn how to integrate Vue.js with Node.js backend (using Express framework) and MongoDB and how to build application with Node.js, ExpressJs, MongoDB and Vue.js

Hands on with Node.Js Streams | Examples & Approach

The practical implications of having Streams in Node.js are vast. Nodejs Streams are a great way to handle data chunks and uncomplicate development.

MongoDB, Express, Vue.js 2, Node.js (MEVN) and SocketIO Chat App

The comprehensive tutorial on MongoDB, Express, Vue.js 2, Node.js (MEVN) and SocketIO Chat Application