{"id":3458,"date":"2022-09-21T19:41:15","date_gmt":"2022-09-21T14:41:15","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3458"},"modified":"2022-09-21T19:41:18","modified_gmt":"2022-09-21T14:41:18","slug":"build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/","title":{"rendered":"Build Bitly URL Shortener Clone Using Node.js Express EJS MySQL"},"content":{"rendered":"\n
npm init -y<\/pre><\/div>\n\n\n\n
npm i express<\/pre><\/div>\n\n\n\n
npm i mysql<\/pre><\/div>\n\n\n\n
npm i shortid<\/pre><\/div>\n\n\n\n
npm i ejs<\/pre><\/div>\n\n\n\n
index.js<\/h2>\n\n\n\n
const express = require("express");\nconst shortid = require("shortid");\nconst mysql = require("mysql");\nconst app = express();\napp.set("view engine", "ejs");\napp.use(express.static(__dirname + "\/public"));\napp.use(express.urlencoded({ extended: false }));\n\nconst db = mysql.createConnection({\n    host: "localhost",\n    user: "root",\n    password: "",\n    database: "url_shortener"\n});\n\ndb.connect(err => {\n    if(err) {\n        console.log("Error connecting to DB");\n        return;\n    }\n    console.log("Connceted to DB");\n});\n\nfunction getLinks(req,res){\n    db.query("SELECT * FROM url ORDER BY ID DESC",(error,results) => {\n        if(error){\n            res.render('home',{result:[]})\n        }\n        else{\n            console.log(results)\n            res.render('home',{results:results})\n        }\n    })\n}\n\napp.get("\/", (req, res) => {\n    getLinks(req,res)\n});\n\napp.post("\/shorturl", (req, res) => {\n    const fullUrl = req.body.fullUrl;\n    if (!fullUrl) {\n        return res.sendStatus(404);\n    }\n    db.query('SELECT * FROM `url` WHERE `fullUrl` = ?', [fullUrl], (error, results) => {\n        if (error) {\n            console.log(error);\n            return res.sendStatus(404);\n        }\n\n        if (results.length === 0) {\n            const short = shortid.generate();\n            const url = { fullUrl: req.body.fullUrl, shortUrl: short, counts: 1 };\n            db.query('INSERT INTO `url` SET ?', url, (err, res) => {\n                if (err) {\n                    console.log("Error creating table");\n                    return;\n                }\n            });\n            getLinks(req,res)\n        } else {\n            const _short = results[0].shortUrl;\n            const _counts = results[0].counts;\n            db.query('UPDATE `url` SET `counts` = ? WHERE `shortUrl` = ?', [_counts + 1, _short], (err, res) => {\n                if (err) {\n                    console.log("Error updating table");\n                    return;\n                }\n            });\n            getLinks(req,res)\n        }\n    });\n});\n\n\napp.get("\/:shortUrl", (req, res) => {\n    db.query('SELECT * FROM `url` WHERE `shortUrl` = ?', [req.params.shortUrl], (error, results) => {\n        if (error) {\n            return res.sendStatus(404);\n        }\n\n        if (results.length === 0) {\n            res.render("error");\n        } else {\n            res.redirect(results[0].fullUrl);\n        }\n    });\n});\n\n\napp.listen(3000);<\/pre><\/div>\n\n\n\n
Now create a folder named\u00a0public<\/code>\u00a0and inside it make a\u00a0css<\/code>\u00a0folder and inside it make a\u00a0home.css<\/code>\u00a0file. After that, copy\/paste the below code into it.<\/p>\n\n\n\n
home.css<\/h2>\n\n\n\n
.container {\n    width: 50%;\n    margin: auto;\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 10px;\n}\n\nh2 {\n    margin: 0;\n}\n\np {\n    max-width: 350px;\n}\n\ninput[type="url"] {\n    height: 28px;\n    width: 250px;\n    padding-left: 8px;\n    border-radius: 4px;\n    border: 1px solid #000;\n}\n\ninput[type="submit"] {\n    padding: 10px 20px;\n    color: #fff;\n    background-color: #349ded;\n    border: none;\n    border-radius: 4px;\n    margin-left: 5px;\n}\n\ninput[type="submit"]:hover {\n    cursor: pointer;\n    opacity: 0.85;\n}\n\n.span-link {\n    padding: 10px 20px;\n    border-radius: 4px;\n    background-color: #349ded;\n    color: #fff;\n}\n\n.result-container {\n    background-color: #dddcdc;\n    padding: 10px;\n    min-width: 200px;\n    display: flex;\n    justify-content: space-around;\n}\n\na {\n    text-decoration: none;\n}\n\n.copy-span:hover {\n    cursor: pointer;\n    opacity: 0.75;\n}<\/pre><\/div>\n\n\n\n
And now make\u00a0views<\/code>\u00a0folder inside the root directory and inside it make two files namely home.ejs<\/code> and error.ejs<\/code><\/p>\n\n\n\n
home.ejs<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>URL Shortener<\/title>\n    <link rel="stylesheet" href="https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.1\/css\/bootstrap.min.css">\n    <link rel="stylesheet" type="text\/css" href="\/styles\/home.css" \/>\n<\/head>\n\n<body>\n    <div class="container">\n        <h2>Bitly URL Shortener Clone<\/h2>\n        <p>Convert long URL to shorter one with a single click. Its easy, simple and absolutely free!<\/p>\n        <form action="\/shortUrl" method="post">\n            <div class="form-group">\n                <input class="form-control" type="url" placeholder="Enter the URL" name="fullUrl" required \/>\n            <\/div>\n            <div class="form-group">\n                <input class="form-control" type="submit" value="Convert" \/>\n            <\/div>\n        <\/form>\n        <%if(results){%>\n\n            <table class="table table-bordered">\n                <thead>\n                    <tr>\n                        <th>FullUrl<\/th>\n                        <th>ShortUrl<\/th>\n                        <th>Count<\/th>\n\n                    <\/tr>\n                <tbody>\n                    <%results.forEach(result=> {%>\n                        <tr>\n                            <td>\n                                <%=result.fullUrl%>\n                            <\/td>\n                            <td>\n                                <span><a id="short-url" href="<%= `\/${result.shortUrl}` %>" target="_blank"><%= result.shortUrl %><\/a><\/span>\n                            <\/td>\n                            <td>\n                                <%=result.counts%>\n                            <\/td>\n                        <\/tr>\n                        <%})%>\n                <\/tbody>\n                <\/thead>\n            <\/table>\n            <%}%>\n    <\/div>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
error.ejs<\/h2>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Error Page<\/title>\n    <link rel="stylesheet" type="text\/css" href="\/styles\/home.css" \/>\n<\/head>\n<body>\n    <div class="container">\n        <h2>URL Shortener<\/h2>\n        <p>The URL you entered does not exist!<\/p>\n        <br \/>\n        <a href="\/"><span class="span-link">Visit Home Page<\/span><\/a>\n    <\/div>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
Bitly URL Shortener Clone Screenshot<\/h2>\n\n\n\n
\"Bitly
Bitly URL Shortener Clone Screenshot<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
index.js Now create a folder named\u00a0public\u00a0and inside it make a\u00a0css\u00a0folder and inside it make a\u00a0home.css\u00a0file. After that, copy\/paste the below code into it. home.css And now make\u00a0views\u00a0folder inside the root directory and inside it make two files namely home.ejs and error.ejs home.ejs error.ejs Bitly URL Shortener Clone Screenshot<\/p>\n","protected":false},"author":1,"featured_media":1762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3458","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nBuild Bitly URL Shortener Clone Using Node.js Express EJS MySQL<\/title>\n<meta name=\"description\" content=\"npm init -y npm i express npm i mysql npm i shortid npm i ejs index.js const express = require("express"); const shortid =\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Bitly URL Shortener Clone Using Node.js Express EJS MySQL\" \/>\n<meta property=\"og:description\" content=\"npm init -y npm i express npm i mysql npm i shortid npm i ejs index.js const express = require("express"); const shortid =\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-21T14:41:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-21T14:41:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/bitly_url_shortener_clone.jpg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build Bitly URL Shortener Clone Using Node.js Express EJS MySQL","description":"npm init -y npm i express npm i mysql npm i shortid npm i ejs index.js const express = require("express"); const shortid =","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/","og_locale":"en_US","og_type":"article","og_title":"Build Bitly URL Shortener Clone Using Node.js Express EJS MySQL","og_description":"npm init -y npm i express npm i mysql npm i shortid npm i ejs index.js const express = require("express"); const shortid =","og_url":"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-09-21T14:41:15+00:00","article_modified_time":"2022-09-21T14:41:18+00:00","og_image":[{"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/bitly_url_shortener_clone.jpg","type":"","width":"","height":""}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Build Bitly URL Shortener Clone Using Node.js Express EJS MySQL","datePublished":"2022-09-21T14:41:15+00:00","dateModified":"2022-09-21T14:41:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/"},"wordCount":71,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/","url":"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/","name":"Build Bitly URL Shortener Clone Using Node.js Express EJS MySQL","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","datePublished":"2022-09-21T14:41:15+00:00","dateModified":"2022-09-21T14:41:18+00:00","description":"npm init -y npm i express npm i mysql npm i shortid npm i ejs index.js const express = require("express"); const shortid =","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","width":880,"height":495,"caption":"Default Featured Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/build-bitly-url-shortener-clone-using-node-js-express-ejs-mysql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build Bitly URL Shortener Clone Using Node.js Express EJS MySQL"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3458"}],"version-history":[{"count":1,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3458\/revisions"}],"predecessor-version":[{"id":3460,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3458\/revisions\/3460"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/1762"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}