Make a Simple URL Shortener app with Node.js & Express.js + Rest API

Feature Image For URL Shortener Article

Have you ever thought to learn a Node.js ? Trying out simple projects such as ToDoApps & WeathersApp will help you learn new things quickly so I decided to create a simple URL shortener with Node.js & Express.js and become familiar with Node.js Applications. To make this Application we follow the below steps:

👋 Initial Step

First, we need to create a fresh folder, we called it nodejs-url-shortener after that we have to make package.json with follow commands:

$ yarn init 

This command helps you to make the package.json with some question like project name, version, license, repository, etc. Our dependencies will now be installed via the following command:

$ yarn install -D mongoose express nodemon ejs

NOTE: Please make sure you installed MongoDB on your computer

Let me now explain a little about the package we installed, in our case we install nodemon to reload our application after a single change without the need to stop/start the app, we use MongoDB to save our data in a simple database and also we install express to handle the HTTP Requests. if you want to make a simple view for your application you need to install ejs too.

🤔 What Should We Do

As we start coding, let me say what we should do to map single URL to short format, we need to create a shortID for each URL in our database and store it with the full URL, after that we redirect users with that shortID to the target URL.

💻 Coding Time

First, we need to create the server.js file. The server.js file is the main file for the application and it will handle all requests and views. Initially, we’ll create a simple view and test our application using an HTML form. Our server.js file will be described in the following gist:

Server.js File

The first / request handler is a GET and show our HTML form that we will show in the next gist, the second requests handler /shortUrls handle our HTML form POST query. this part of our application first get the fullUrl from the request body and after that make a simple check to sure it was the valid URL then save the record in our MonogoDB database and redirect to / route — our HTML form. before check the view file we have to see the short-urls.js , this file will save the records in database:

short-url.js

Now let’s check the view file that we made for our application. to make this form we add Bootstrap to make a simple & clean form without add any CSScode to our project. this file should be saved as index.ejs in our project inside the views folder, this file will be contained the following content:

Our HTML Form

Now we need a new request handler to redirect our saved URL to the real one, in this case we have to have a route to get shortID that will return after create a record then we have to get this from our URL and redirect the user to the main address. so we have to add the following code to our server.js file:

Now that we have added this code, our application is ready to be tested. Let’s create a simple Rest API to add records without using the HTML form.

📡 Rest-Full API With Express

to achieve this goal we have to make a little in change in our server.js file, first we have to able to parse our HTTP requests as application/json because of that we have to add the following code to the server.js

app.use(express.json());

after that we have to choose a base route for our API and make some requests handler for each of them so we will add 3 requests handler for following tasks:

1. API for retrieving all the records
2. API to add a new record by sending the full URL
3. API to remove single record from database

for each of them we will have a single requests handler that will be added to server.js after that you can call theme from your every platform you want:

Server.js With API Handlers

So with those simple steps we can make a simple link shortener with node.jsand express.js, oh before i forgot for running the application you have to add the following line to your package.json scripts:

"scripts": {
    "devStart": "nodemon server.js"
},

If You want to check the full code of this little project you can check this GitHub repository:

amirzenoozi/nodejs-url-shortener

i will be appreciate if you check my other project in GitHub too:

amirzenoozi - Overview

☕ Buy me a coffee

In the end, if you like this medium you can buy me a coffee or more if you like by clicking on the link below: