Loading, please wait...
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.
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
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 URLShortenercd URLShortenernpm init -y
package.json is. Mainly mention the entrypoint which is main: index.jsView > Terminal)npm install express ejs config mongoose shortid valid-url --save
index.jsconst 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));
node index.js and go to localhost:3000. To see the Home Page.
node index.js again and again.npm i nodemon --save-dev
package.json file, and add some script to it, so that it can trigger nodemon whenever we run that dev script."scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
} "scripts": {
"start": "node index",
"dev": "nodemon index"
}
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));
db.jsdefault.jsonUrl.jsurlRedirect.jsurl.jshome.ejshome.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>
nodemon.npm run dev
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>
Stay tuned for the next part...
Thanks for reading this article 😄
