Loading, please wait...

Become An Author
A to Z Full Forms and Acronyms

URL Shortener with GitHub-Actions and Azure (NodeJS) part-1

May 05, 2020 MicrosoftAzure, WebApps, VSCode, 11063 Views
This article briefs you about the creation of a URL Shortening Web Application--> Part 1

Creating a URL Shortener using NodeJS

Prerequisite

Abstract

Getting to know about how to deal with a NoSQL Database (here in this repo, we'll use MongoDB). Deploying the webapp to Azure via GitHub Actions.

Table of Content

Resource Links
Demos - 1-Setting-Backend
- Setting-up-Directory-structure
- Building-a-basic-Front-End
- Connecting-to-our-Database
- Setting-up-the-Routes-for-the-app
- Pushing-Project-to-GitHub-and-Azure

Demos

We'll cover the making of this whole repository in small demos If you didn't covered the basic EJS project repo, then visit this link

1-Setting-up-the-Backend

On the Command line navigate to the directory where you want to save the project on your system, then type in the following commands

  • mkdir URLShortener
  • cd URLShortener
  • npm init -y
    • What this will do is that it will keep init output as per the default template.
    • alt text
  • Explore what package.json is. Mainly mention the entrypoint which is main: index.js
  • How to open the terminal in VSCode (View > Terminal)
  • Let's install other libraries as well at once, so type in the below command:
    • npm install express ejs config mongoose shortid valid-url --save
    • alt text
    • What the above step will do is it will record the names of the dependencies which are required to run the package.
    • alt text
  • Create the file index.js
  • Type in/snippet/copy/paste the following content.
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
// ..
app.get('/', (req, res) => res.send('Hello world'));
app.listen(port, () => console.log('Application started at => http://localhost:'+port));
 
  • Run the code by this command: node index.js and go to localhost:3000. To see the Home Page.
    • alt text
  • Next let's just get rid of this continuously pressing F5 or typing in node index.js again and again.
  • So to automate this process we've a papckage called "nodemon". So lets install it: npm i nodemon --save-dev
    • alt text
  • Now lets see the package.json file, and add some script to it, so that it can trigger nodemon whenever we run that dev script.
  • Replace the below snippet with the later one:
    • To be replaced 
      • "scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
}
         
    • To be replaced by 
      • "scripts": {
	"start": "node index",
	"dev": "nodemon index"
}
         
    • alt text
  • Use the below code snippet in the index.js file (remove all the previous code):
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
app.use(express.json({
	extended: false
}));
app.use(express.urlencoded({
	extended: false
}));
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
	res.render('home');
});
app.listen(port, () => console.log('Application started at => http://localhost:' + port));
 
  • Here the statement app.use(express.json(-------)); is a Middleware which will allow us to accept JSON data into our API.

Setting-up-Directory-structure

  • Create folders & files inside the project directory as per thie below given List:
    • config (Folder)
      • db.js
      • default.json
    • models (Folder)
      • Url.js
    • routes (Folder)
      • urlRedirect.js
      • url.js
    • views (Folder)
      • home.ejs

Building-a-basic-Front-End

  • Now use the below snippet for the home.ejs file:
<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>UNITE- URL Shortner 😍
    </title> 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 
  </head> 
  <body> 
    <div class="container-fluid"> 
      <div class="jumbotron" style="text-align: center;"> 
        <h1 class="display-4">Welcome to the URL Shortner
        </h1> 
      </div> 
      <!-- FORM --> 
      <!-- URLs Table --> 
      <footer class="footer container-fluid my-4"> 
        <hr> 
        <span class="row justify-content-center text-muted"> Copyright 
          <% const date = new Date(); %> 
            <%= date.getFullYear() %> 
              </span> 
            </footer> 
          </div> 
        </body> 
      </html>

 
  • In this above code we've used a 3rd party frontend css library to speed up our front end jobs beautifully.
  • Now lets see the implementation of the said tool nodemon.
  • in the command line, preferably in the VS Code, type: npm run dev
    • alt text
  • Now comes the snippet for the url shortening form in teh home.ejs file. Place the below snippet right below the <!-- FORM --> Comment in the html file:
<!-- FORM -->
<form action="/shorten/" method="POST" style="padding: 0 25px 0 25px;">
  <div class="form-group row justify-content-md-center">
    <label class="col-lg-1 col-md-10" for="longUrl">Long URL: 
    </label>
    <input required="" type="url" class="col-lg-3 col-12 form-control" name="longUrl" id="longUrl" placeholder="Enter your Name">
  </div>
  <div class="form-group row justify-content-md-center">
    <label class="col-lg-1 col-md-10" for="shortUrl">Short URL: 
    </label>
    <input type="text" class="col-lg-3 col-12 form-control" id="shortUrl" name="shortUrl" placeholder="Enter the custom name (if any)">
  </div>
  <div class="form-group row justify-content-md-center">
    <button type="submit" class="col-12 col-lg-4 btn btn-primary">Submit
    </button>
  </div>
</form>

 

and the Table code below the Table Comment <!-- URLs Table -->:

<!-- URLs Table --> 
<div style="margin: auto;" class="row justify-content-md-center table-responsive-sm"> 
  <table style="padding: 0 25px 0 25px;" class="table table-hover col-12 col-md-10 col-lg-6"> 
    <thead> 
      <tr> 
        <th># ID
        </th> 
        <th>Long URL
        </th> 
        <th>Short URL
        </th> 
        <th>Clicks
        </th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <th scope="row">#
        </th> 
        <td>
          <a target="_blank" href=#">Long URL Comes Here</a></td> <td><a target="_blank" href="#">Short URL Comes Here</a></td> <td>0</td> </tr> </tbody> </table> </div>

 
  • Now refresh the browser page
    • alt text

Stay tuned for the next part...

Thanks for reading this article 😄

A to Z Full Forms and Acronyms

Related Article

Node.js Introduction | Node.js Tutorials
Node.js - Local Environment Setup
Creating a URL Shortener Deplyment on Azure (NodeJS) part-2
Node Package Manager Tutorial Step by Step

Advertisement

JOIN TUTORIALS LINK

Our Newsletter Will Let You Know When Any New
Articles, Tutorials and Video Are Released.

CONTRIBUTE

Follow us

Copyright © 2024. All Rights Reserved.