Short URL generator Using Node JS......

HELLO FRIENDS......This is The Blog About How to Make Short URL / LINK Generator Using Node JS . IF You Don't Know How to Make Short URL / LINK Generator Using Node js. Then This  Post  is For You . So Check Out Full Post In Details. By Using This Post You can Build Your Own Short URL Website . 


Page Content : 



  1. SOME EXAMPLES OF SHORTEN URL WEBSITES AND ITS USE
  2. BASIC STEPS OF HOW TO USE THIS WEBSITES 
  3. Express JS Full Source Code 
  4. HTML with Full Source Code. 
  5. Testing Of Short URL GENERATOR.



Short URL is a Tools which Convert Long URL or Link to Short URL.There is Many Platform to Short Url / LINK . By Using This Shortener URL Website You can also Earn Money. The Most Popular Websites is To Earn Money From Shortener URL is 


1) shorte.st

Link : https://short.am/


2) short.am

Link : https://short.am/


3) clkim

Link : https://clkim.com/


4) Ouo.io

Link : https://ouo.io/


5) Cut.win

Link : https://cutwin.com/


6)  Fas.li

Link : https://fas.li/


7) Ally 

Link : https://al.ly/



Some Basic Step How to Use This Shortener URL Platform : 


1)  OPEN WEBSITE


2)  GO TO SIGNUP AND FILL REGESTRATION DETAILS 


3)  LOGIN THIS PLATFORM


4) GOTO DASHBOARD


5) PASTE ANY LINK TO GET ITS SHORTEN LINK


6) COPY SHORTEN LINK


7)  SHARE THIS LINK


8) SHOW YOUR EARNING


You Can Also Add This Link Into Your Website to Get More Clicks and Impressions.



NOW START HOW TO MAKE SHORT URL GENERATOR :



Make Your Own XML Short URL Generator By Using Node JS

For That First Make One Folder sitemap generator and Go this Folder Terminal Part and Run This Command : npm init . After That package.json  File Will Automatically Add in Main Folder.


NPM Package is Required to Install in Your Main Folder to Make Site Map Generator Using  Express and sitemap-generator..



1) Express  - https://www.npmjs.com/package/express (npm install express)


2) url-shortener - https://www.npmjs.com/package/node-url-shortener (npm install sitemap-generator)






After Installing This Package of Your Main Project Folder We Need To Make One  app.js File Now Write This Basic Command Of Express....






const express = require("express"); const app = express(); var shortUrl = require('node-url-shortener'); const path = require("path"); const hbs = require("hbs"); const port = process.env.PORT || 8000 ; const mainpath = path.join(__dirname,"../SHORTENURLPROJECT"); const viewspath = path.join(__dirname,"../SHORTENURLPROJECT/views"); app.use(express.static(mainpath)); app.set("view engine","hbs"); app.set("views",viewspath); app.get("/",(req,res)=>{ res.render("index.hbs"); }); app.listen(port,()=>{ console.log("Server Started SuccessFully"); })







Now Make One views Directory and inside this Directory Make One index.hbs File 







<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Short URL</title>
<link rel="stylesheet" href="/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
nav ul li a:hover{
text-decoration:none;
}
nav ul li a{
text-decoration:none;
}

</style>
</head>

<body>
<div class="container" style="margin-top:100px;position:relative" >
<h1>Short URL</h1>
<form action="/getshortlink" method="GET"> <div class="md-form">
<input type="text" id="url" class="form-control" name="url">
<label for="url">Enter Link Here</label>
</div>
<button type="submit" class="btn btn-outline-default btn-rounded waves-effect" value="submit"> GET SHORT LINK </button> </div> </form> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
</body>
</html>




ADD get("/getshortlink") To app.js File 
Now Hole app.js File Code is :





const express = require("express"); const app = express(); var shortUrl = require('node-url-shortener'); const path = require("path"); const hbs = require("hbs"); const port = process.env.PORT || 8000 ; const mainpath = path.join(__dirname,"../SHORTENURLPROJECT"); const viewspath = path.join(__dirname,"../SHORTENURLPROJECT/views"); app.use(express.static(mainpath)); app.set("view engine","hbs"); app.set("views",viewspath); app.get("/",(req,res)=>{ res.render("index.hbs"); }); app.get("/getshortlink",(req,res)=>{ shortUrl.short(req.query.url, function(err, url){ const xyz = url; res.send(`<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Short URL</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet"> </head> <body> <div class="container" style="margin-top:30px" > <h1>Short URL </h1> <form action="/getshortlink" method="GET"> <div class="md-form"> <input type="text" id="url" class="form-control" name="url" value="${req.query.url}"> <span id="copy" style="display:none">${url}</span> <label for="url">Enter Link Here</label> </div> <button type="submit" class="btn btn-outline-default btn-rounded waves-effect" value="submit">GET SHORT LINK </button> </form> <div class="alert alert-info" role="alert" style="margin-top:30px"> Your Shorten URL is = <a href="${url}" class="alert-link" target="_blank" >${url}</a> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script> </body> </html>`); }); app.listen(port,()=>{ console.log("Server Started SuccessFully"); })







After Making This Two Files Start Server Using nodemon app.js or Else node app.js . Now you Show This Type of Front end :










Click On GET SHORT LINK 





 NOW SHORT LINK IS SUCCESSFULLY GENERATED

So This is All About Short URL generator Using Node JS .  If You Like This Article Then Share with Your Friends and Colleagues. 


I HOPE THAT THIS


POST IS


HELPFUL FOR YOU.


THANKYOU FOR READING.




TAGS :HTML , EXPRESS JS ,  Node js , short url generator




VIEW AND GET SOURCE CODE :


https://github.com/AbhiPatel13/shorturl



About Author : 

Hello friends, I am Abhi Patel author & founder of Technovichar.com. I am a student of IT engineering. I like to research and write about new things even if it is from any field. You will continue to support us in this way, we will keep on bringing such interesting information for you.

Post a Comment

0 Comments