Welcome again today we are creating a URL shortener application using Deno. As URL shortener simply create a unique id with respective full length URL you pass. So without further ado let’s get started … First we need to create our Oak application along with Router so first we need to import our Oak module from its URL inside it pass application and router then we need to initiate our application and router class, after initiating we need to create some route to handle request on some GET and POST method. After create our router we need to pass our router inside our application as middleware and we can let listen our server any port we want. So our final code will look something like.
// Importing Modules
import {Application, Router} from 'https://deno.land/x/oak/mod.ts';
// Initiating App and Router
const app = new Application();
const router = new Router();
// Handling Requests
router.get('/',async (ctx) => {
})
.post('/post',async (ctx)=>{
})
.get('/:shortId', async(ctx) => {
});
// Passing Router as middle ware inside the app
app.use(router.routes());
app.use(router.allowedMethods());
// Logging that server is running at PORT 8000
console.log('App is listening to port 8000');
await app.listen({port: 8000});
After setting our application we can set view engine inside our Deno app. We are using EJS as our Views, so inside our view engine first we need to import viewEngine, engineFactory and adapterFactory. Then we need to set our engineFactory as EJS Engine and AdapterFactory as OakAdapter. So our code looks something like this …
// Importing Modules
import {viewEngine,
engineFactory,
adapterFactory} from 'https://deno.land/x/view_engine/mod.ts';
// Setting up View Engine
const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();
app.use(viewEngine(oakAdapter,ejsEngine));
Now we can initialize our MongoClient, we are using Mongo local database while our can use online repository from mongo website you just need to pass the URI inside connectWithUri function and you database will work. Inside our application we are setting name of Database as “shortener” and collection as “url” you can change whatever you want.
import {MongoClient} from 'https://deno.land/x/mongo@v0.8.0/mod.ts';
// Setting up mongo client
const client = new MongoClient();
// Connect Mongo Client to localhost
client.connectWithUri('mongodb://localhost:27017');
// Setting up name of Database
const db = client.database('shortener');
// Setting up name of collection
const urlCollection = db.collection('url');
We can now setup our views we aren using Bootstrap for styling our application. And we are passing a form input type of text and button with type submit. Our form is method of POST and it has enctype of multipart/form-data. Then we can create our table which can fill when data pass through it. So create a new index.ejs file and pass the following code inside it
< !DOCTYPE html >
< html lang="en" >
< head >
< meta charset="UTF-8" >
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
< title > URL SHORTENER < /title >
< !-- CSS only -- >
< link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" >
< /head >
< body >
< div class="container" >
< br / >
< h1 > URL SHORTENER < /h1 >
< form method="POST" enctype="multipart/form-data" action="/post" >
< div class="form-row" >
< div class="col-md-10 mb-3" >
< input type="text" class="form-control" name="url" placeholder="Enter your URL" required>
< /div >
< div class="col-md-2 mb-3" >
< input class="btn btn-primary" type="button" value="Submit" >
< /div >
< /div >
< /form >
< table class="table" >
< tr >
< th scope="col"> URL < /th >
< th scope="col"> SHORT < /th >
< th scope="col"> CLICK
< /tr >
< /thead >
< tbody >
< % for(url of data){ % >
< tr >
< td > < /td >
< td >
< td >
< /tr >
< % } % >
< /tbody >
< /table >
< /div >
< !-- JS, Popper.js, and jQuery -->
< script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">< /script >
< script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
< script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
< /body >
< /html >
As our view has been ready not add our view inside our GET method which at root path as.
...
router.get('/',async (ctx) => {
const allURL = await urlCollection.find({})
ctx.render('index.ejs',{data: allURL});
})
...
Now we can focus on posting of our form first we need to initiate our “UUID” which help to generate unique ID, and “multiparser” which help to capture our form data. Inside our app.ts file pass following code
//Importing UUID and Multiparser
import {multiParser} from 'https://raw.githubusercontent.com/deligenius/multiparser/master/mod.ts';
import ShortUniqueId from 'https://cdn.jsdelivr.net/npm/short-unique-id@latest/short_uuid/mod.ts';
...
// Initiating UUID
const UUID = new ShortUniqueId();
...
Now we can handle our POST method first we need to capture our form data then we need to create a unique ID and then save our Full URL and Short ID inside our database. We can also track our click so pass initial value 0.
...
.post('/post',async (ctx)=>{
const formData:any = await multiParser(ctx.request.serverRequest);
const urlObject = {
fullURL: formData.url,
shortURL: UUID(),
click: 0
}
await urlCollection.insertOne(urlObject);
ctx.response.redirect('/')
})
...
Now after handling our post request we can also handle our get request as soon as we pass our url and short ID it will redirect to full url so our code looks something like this.
...
.get('/:shortId', async(ctx) => {
const shortURLId = ctx.params.shortId;
const isURL = await urlCollection.findOne({shortURL: shortURLId});
if(isURL) {
ctx.response.status = 301;
await urlCollection.updateOne({_id: isURL._id},{$set: {click: isURL.click+1}})
ctx.response.redirect(`${isURL.fullURL}`);
}else{
ctx.response.status = 404;
ctx.response.body = "Sorry no page found";
}
})
...
So now first start you application using Denon or Deno and open up your browser with “localhost:8000” and it will work. In case if you miss any code here is full code inside app.ts
// Importing Modules
import {Application, Router} from 'https://deno.land/x/oak/mod.ts';
import {viewEngine,
engineFactory,
adapterFactory} from 'https://deno.land/x/view_engine/mod.ts';
import {multiParser} from 'https://raw.githubusercontent.com/deligenius/multiparser/master/mod.ts';
import {MongoClient} from 'https://deno.land/x/mongo@v0.7.0/mod.ts';
import ShortUniqueId from 'https://cdn.jsdelivr.net/npm/short-unique-id@latest/short_uuid/mod.ts';
// Initiating App and Router
const app = new Application();
const router = new Router();
// Setting up View Engine
const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();
app.use(viewEngine(oakAdapter,ejsEngine));
// Setting up mongo client
const client = new MongoClient();
client.connectWithUri('mongodb://localhost:27017');
const db = client.database('shortener');
const urlCollection = db.collection('url');
// Initiating UUID
const UUID = new ShortUniqueId();
// Handling Requests
router.get('/',async (ctx) => {
const allURL = await urlCollection.find({})
ctx.render('index.ejs',{data: allURL});
})
.post('/post',async (ctx)=>{
const formData:any = await multiParser(ctx.request.serverRequest);
const urlObject = {
fullURL: formData.url,
shortURL: UUID(),
click: 0
}
await urlCollection.insertOne(urlObject);
ctx.response.redirect('/')
})
.get('/:shortId', async(ctx) => {
const shortURLId = ctx.params.shortId;
const isURL = await urlCollection.findOne({shortURL: shortURLId});
if(isURL) {
ctx.response.status = 301;
await urlCollection.updateOne({_id: isURL._id},{$set: {click: isURL.click+1}})
ctx.response.redirect(`${isURL.fullURL}`);
}else{
ctx.response.status = 404;
ctx.response.body = "Sorry no page found";
}
});
// Passing Router as middle ware inside the app
app.use(router.routes());
app.use(router.allowedMethods());
// Logging that server is running at PORT 8000
console.log('App is listening to port 8000');
await app.listen({port: 8000});
recoding-io
/
deno-todo-app
A To-Do app created using Deno
Deno To-Do List App
This is project created on deno which is a to-do application only using Deno and its libraries.
Project Intro
Inside this project we are using Deno modules like
Command To Run The Project
deno run --allow-net --allow-read --allow-write --allow-plugin --unstable app.ts
- Note - Unstable tag is used because the Mongo module is still in developing phase by the time when this code has been created.
Top comments (0)