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 :
- SOME EXAMPLES OF SHORTEN URL WEBSITES AND ITS USE
- BASIC STEPS OF HOW TO USE THIS WEBSITES
- Express JS Full Source Code
- HTML with Full Source Code.
- 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");
})
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.
2 Comments
nice informative post. Thanks you for sharing.
ReplyDeleteNodeJS Development
Thanks for Visit ...........
Delete