Build Your Own URL Shortener with Node.js

Introduction

In today’s digital world, short URLs have become an essential part of online communication, allowing users to share links in a more manageable and user-friendly way. Creating your own URL shortener from scratch can be a fun and educational project, and in this blog, we’ll walk through how to build a basic URL shortener application using Node.js.

What is a URL Shortener?

A URL shortener is an application that takes long URLs and turns them into shorter, more compact links. When a user clicks on the short link, it redirects to the original long URL. URL shorteners are used for simplifying complex web addresses, tracking click data, or just making links look cleaner.

Why Build a URL Shortener?

• Customization: You can control the look and functionality of the service.
• Learning Experience: It's a great way to practice backend development, working with databases, and understanding how redirects work.
• Data Collection: You can log or analyze traffic using your own system.

Prerequisites

To follow along with this tutorial, you should have:

• Node.js installed. If you don't have it, download it from here.
• Basic knowledge of JavaScript and Node.js.
• A code editor (such as VS Code).

Step 1: Set Up Your Project

Create a new directory for your project:

mkdir url-shortener
cd url-shortener
npm init -y

Next, install the necessary dependencies:

npm install express shortid

Step 2: Your Server Setup

Create a new file called server.js in your project directory. This file will hold all the logic for our URL shortener app.

const express = require('express');
const shortid = require('shortid');
const app = express();
const port = 3000;

// In-memory database (you can replace this with a real database later)
const urlDatabase = {};

// Middleware to parse JSON bodies
app.use(express.json());

// Home route to show a simple HTML form
app.get('/', (req, res) => {
  res.send(`Send Your Custom HTML Page`);
});

// Route to handle URL shortening
app.post('/shorten', (req, res) => {
  const originalUrl = req.body.url;

  if (!originalUrl) {
    return res.status(400).json({ error: 'URL is required' });
  }
  // Generate a unique short URL code
  const shortUrlCode = shortid.generate();
  // Save the original URL with its short code in the "database"
  urlDatabase[shortUrlCode] = originalUrl;
  // Return the short URL
  const shortUrl = `http://localhost:${port}/${shortUrlCode}`;
  res.json({ shortUrl });
});

// Route to handle redirection from the short URL
app.get('/:shortCode', (req, res) => {
  const shortCode = req.params.shortCode;

  const originalUrl = urlDatabase[shortCode];

  if (!originalUrl) {
    return res.status(404).send('URL not found');
  }

  // Redirect to the original URL
  res.redirect(originalUrl);
});

app.listen(port, () => {
  console.log(`URL shortener app running at http://localhost:${port}`);
});
        

Step 3: How It Works

1. Home Route (`/`): When you visit the root URL of your application, you'll be presented with an HTML form where you can input the long URL you want to shorten.
2. URL Shortening (`/shorten`): When the form is submitted, a POST request is made to `/shorten`. The server generates a unique short URL code using the shortid package and saves it in the in-memory object (acting as a database).
3. Routing the User (`/:shortCode`): When someone accesses a short URL (e.g., http://localhost:3000/abc123), the server queries the database for a corresponding long URL. If found, the user is redirected to the original URL.

Step 4: Running the Application

node server.js

Step 5: Test the URL Shortener

1. Access http://localhost:3000
2. Enter a long URL in the input field, then submit the form.
3. You should see a short URL, for example, http://localhost:3000/abc123.
4. Clicking the short URL should redirect you to the original long URL.

Conclusion

Congratulations! You've created a simple URL shortener application with Node.js. You can further enhance this project by adding features like:

• Persistent Storage: Use a real database like MongoDB.
• Analytics: Track how many times the shortened URL is clicked.
• User Authentication: Allow users to manage their own URLs.
• Front-End Improvements: Build a more interactive and advanced front-end.

Happy coding!