DEV Community: Haaris Iqubal

Creating a Drawing App using Pencil Kit and Core Data in SwiftUI

Haaris Iqubal — Tue, 07 Dec 2021 17:34:33 +0000

Building app based on Apple Pencil require much cumbersome process but since the introduction of PencilKit in WWDC 20 it now easier to add Canvas and Apple Pencil Support to your app. In this article we gonna take a look Apple PencilKit in action along with we’ll also add core data functionality to store our drawing inside the device and for creating the interface we will using Swift UI.

Our application look somewhat like this after we complete the code.

In order to create this application new start a new Xcode Project. Select iOS App and then select Application icon. Then type your project name and check out we are using fully SwiftUI with SwiftUI Lifecycle and we also use core data so check mark on it also. Then create the project. Xcode automatically create some boilerplate codes so lets just delete some codes.

Then inside our xc data model file we need to create a new entity called as Drawing. Then inside it we need to create attributes like ID which of type U U I D. Then Title which is of type String. And canvas Data which is of type Binary Data this will hold our drawing data.

Then inside our Content View file, we need to fetch the data from the core data using Fetch Request function for this you should need to import Core Data inside the function we need to add our entity which we just created and then we can add variable as drawing which help to refer inside our view this is of type Fetched Result which hold our Drawing Entity.

import CoreData
struct ContentView: View {
...
@FetchRequest(entity: Drawing.entity(), sortDescriptors: []) var drawings: FetchedResults<Drawing>
...
}

Then inside our View we can crate For Each function this will take our fetched drawings as input and for each drawing it will layout then as Text which will have title as a value.

ForEach(drawings){drawing in                        NavigationLink(destination: DrawingView(id: drawing.id, data: drawing.canvasData, title: drawing.title), label: {                            Text(drawing.title ?? "Untitled")                        })                    }

Then we need to create a Button this button will help us to open a sheet view inside which we create a new canvas for the label we add H Stack inside it we add image and text

Button(action: {                        
self.showSheet.toggle()                    
}, label: {                        
HStack{                            
Image(systemName: "plus")                            
Text("Add Canvas")}                    
})                    
.foregroundColor(.blue)                    
.sheet(isPresented: $showSheet, content: {                        AddNewCanvasView().environment(\.managedObjectContext, viewContext)                    })

Then for action we just need to toggle our show sheet state which we need to create as State private var show sheet which have initial value as false

@State private var showSheet = false

Create a new SwiftUI File as Add New Canvas View. Inside the Canvas View we need to require Environment managed Object Context and Presentation Mode from previous view.

// AddNewCanvasView.Swift
@Environment (\.managedObjectContext) var viewContext    @Environment (\.presentationMode) var presentationMode

Then we wrap our view inside Navigation View and add Form inside it. Then add section inside it add Text Field. Create a State for our Text Field which will be empty string.

// AddNewCanvasView.Swift
@State private var canvasTitle = ""
var body: some View {        
NavigationView{            
Form{                
Section{                    
TextField("Canvas Title", text: $canvasTitle)                
}
}
.navigationViewStyle(StackNavigationViewStyle())            .navigationTitle(Text("Add New Canvas"))}
}

Then we add Navigation Bar Item both will have Button on the leading we add cancel button this will does action presentation Mode wrapped value dismiss this will close our sheet then add button image as label. While on the trailing side we add create button this will perform saving task. Inside its action we check if the canvas title is not empty the we perform this function. Inside the function we create our drawing context then provide the appropriate data to it then we wrapped our sheet using dismiss function.

// AddNewCanvasView.Swift

Form{                
Section{                    
TextField("Canvas Title", text: $canvasTitle)                }            }            
.navigationViewStyle(StackNavigationViewStyle())            .navigationTitle(Text("Add New Canvas"))            .navigationBarItems(leading: Button(action: {                presentationMode.wrappedValue.dismiss()            }, label: {                Image(systemName: "xmark")            }), 
trailing: Button(action: {                
if !canvasTitle.isEmpty{                    
let drawing = Drawing(context: viewContext)                    drawing.title = canvasTitle
drawing.id = UUID()                                        
do {try viewContext.save()}                    
catch{print(error)}                                        self.presentationMode.wrappedValue.dismiss()                }            }, label: {                
Text("Save")            
}))

Then on the Content View file we add our Add New Canvas View inside our sheet content.

// ContentView.swift
.sheet(isPresented: $showSheet, content: {                        AddNewCanvasView().environment(\.managedObjectContext, viewContext)                    })

So finally we can see that our data is saving now let tackle the our Canvas for Drawing. We need to create new Folder called as Canvas inside it create a Swift File and named it as Drawing Canvas View Controller. Inside the File import Swift Ui and Pencil Kit.

import SwiftUI
import PencilKit

Then create the class same as file name the class will conform to UI View Controller. Then we create some variable canvas which conform to PK Canvas View Class inside the we create a constant view which will initialize the Pk Canvas View class.

Then our view will have input policy as any input. Then we can add ability to zoom our canvas to only 1 so we can not zoom in our using pinch gesture. Then finally we negate the translate Auto resizing of the constraint. Then we will return our View. Then create new variable tool Picker which conform to Pk Tool Picker. Then create a constant tool pick which initialize Pk Tool Picker Class . We set the tool picker observer to self.

As all the view controller have View Did Load Function which will load on view start we add this to super view Did Load function. Before it we need to create the a drawing Data which will initialize our canvas with data. Then then create a variable drawing change which will conform to Data and return to Void data.

// DrawingCanvasViewController.swift
class DrawingCanvasViewController: UIViewController {    
lazy var canvas: PKCanvasView = {        
let view = PKCanvasView()        
view.drawingPolicy = .anyInput        
view.minimumZoomScale = 1        
view.maximumZoomScale = 1        view.translatesAutoresizingMaskIntoConstraints = false        
return view    }()        
lazy var toolPicker: PKToolPicker = {        
let toolPicker = PKToolPicker()        
toolPicker.addObserver(self)        
return toolPicker    }()        
var drawingData = Data()    
var drawingChanged: (Data) -> Void = {_ in}
override func viewDidLoad() {        
super.viewDidLoad()        
view.addSubview(canvas)        
NSLayoutConstraint.activate([                                        canvas.leadingAnchor.constraint(equalTo: view.leadingAnchor),                                        canvas.trailingAnchor.constraint(equalTo: view.trailingAnchor),                                        canvas.topAnchor.constraint(equalTo: view.topAnchor),                                        canvas.bottomAnchor.constraint(equalTo: view.bottomAnchor)])        toolPicker.setVisible(true, forFirstResponder: canvas)        toolPicker.addObserver(canvas)        
canvas.delegate = self        
canvas.becomeFirstResponder()        
if let drawing = try? PKDrawing(data: drawingData){            canvas.drawing = drawing        
}    
}
}

We need to extent our Drawing Canvas View Controller Delegate to Pk Tool Picker Observer and PK Canvas View Delegate. Inside it we add out canvas View Drawing Did Change which will take care of all the changes happen inside the view and gives us output which help to know that data has change so we can save the data on the go. Inside the this function we add out Drawing Changed variable inside it will take our canvas drawing data.

// DrawingCanvasViewController.swift
extension DrawingCanvasViewController:PKToolPickerObserver, PKCanvasViewDelegate{    
func canvasViewDrawingDidChange(_ canvasView: PKCanvasView) {        drawingChanged(canvasView.drawing.dataRepresentation())    
}}

Then create a new Swift which will contain our Canvas View as UI Representable View.Then create a struct which is conform to UI View Controller Representable. Inside it we will create our managed Object Context as view Context. Then we create some boiler plate function update Ui View and make UI View. Inside the update UI View Controller we set our Ui view controller drawing data to data variable.

Then create a struct which is conform to UI View Controller Representable. Inside it we will create our managed Object Context as view Context. Then we create some boiler plate function update Ui View and make UI View. Inside the update UI View Controller we set our Ui view controller drawing data to data variable. We make our UI Controller Type as Type alias of Drawing Canvas View Controller. Then we create some variable Data and ID which data require more upper hierarchy view. Then inside our make UI View Controller we can set our View controller to Drawing Canvas View Controller

Inside it we make request to NS Fetch Request then put inside our Drawing Entity which equals to Drawing dot fetch function. The we can predicate which will matches the id we provide to id inside our core data and then set our NS Fetch request to predicate. Then inside our do try closure we get our result. The result will output as object we set first value which we will get. Then we save the value of only the canvas Data attribute. Then again inside the do try closure we save our changes. Or we catch any error print that error. Then finally return our view controller.

// DrawingCanvasView.swift
import SwiftUI
import CoreData
import PencilKit
struct DrawingCanvasView: UIViewControllerRepresentable { @Environment(\.managedObjectContext) private var viewContext
func updateUIViewController(_ uiViewController: DrawingCanvasViewController,context: Context) { uiViewController.drawingData = data }
typealias UIViewControllerType = DrawingCanvasViewController
var data: Data 
var id: UUID
func makeUIViewController(context: Context) -> DrawingCanvasViewController { 
let viewController = DrawingCanvasViewController()
viewController.drawingData = data viewController.drawingChanged = {data in let request: NSFetchRequest<Drawing> = Drawing.fetchRequest()
let predicate = NSPredicate(format: “id == %@”, id as CVarArg) request.predicate = predicate do{ let result = try
viewContext.fetch(request) let obj = result.first
obj?.setValue(data, forKey: “canvasData”) 
do{ try viewContext.save() } catch{ print(error) } } 
catch{ print(error) } } 
return viewController 
}}

Finally we add our DrawingCanvasView.swift inside our Drawing View Swift file. And when we run our app inside the simulator we can see that our app is working fine.
Code and Video are mentioned below 👇

Deploying Deno App on Heroku Server

Haaris Iqubal — Tue, 30 Nov 2021 13:05:26 +0000

Today we gonna unravel one of import question regarding Deno Deployment, as we gonna learn how to deploy Deno application inside Heroku Server so without further ado let’s get started.

First we need to create a template Application on our device so create app.ts file in your directory where you want to create the file.

To setup our application we gonna require Oak third party for serving our application and Flags from Deno Module which will help to setup our Port.

// Importing Module
import {Application, Router} from 'https://deno.land/x/oak/mod.ts';
import * as flags from 'https://deno.land/std/flags/mod.ts';

After importing our module we can setup our flags to check our port as if we are using local host then our server will run on localhost:8000, or else when we deploy our application we can use normal URL to access our app.

// Setting up port
const {args, exit} = Deno;
const DEFAULT_PORT = 8000;
const argPort = flags.parse(args).port;
const port = argPort ? Number(argPort) : DEFAULT_PORT;
if (isNaN(port)){
console.log("This is not port number");
exit(1);
};

After setting our port we can now take help of Oak to provide application layer to our app. So we need to set our application and router.

// Initializing App and Router
const app = new Application();
const router = new Router();
// Set our router to handle request
router.get('/',(ctx) => {
ctx.response.body = 'This is main page';
})
.get('/home',(ctx)=>{
ctx.response.body = "This is home page";
})
// Passing router inside our application as middleware
app.use(router.routes());
app.use(router.allowedMethods());
// Setting our app to listen to port
await app.listen({port: port});

After setting our app.ts file its gonna look something like this

// Importing Module
import {Application, Router} from 'https://deno.land/x/oak/mod.ts';
import * as flags from 'https://deno.land/std/flags/mod.ts';
// Setting up port
const {args, exit} = Deno;
const DEFAULT_PORT = 8000;
const argPort = flags.parse(args).port;
const port = argPort ? Number(argPort) : DEFAULT_PORT;
if (isNaN(port)){
console.log("This is not port number");
exit(1);
};
// Initializing App and Router
const app = new Application();
const router = new Router();
// Set our router to handle request
router.get('/',(ctx) => {
ctx.response.body = 'This is main page';
})
.get('/home',(ctx)=>{
ctx.response.body = "This is home page";
})
// Passing router inside our application as middleware
app.use(router.routes());
app.use(router.allowedMethods());
// Setting our app to listen to port
await app.listen({port: port});

You can check that our app is working or not inside your device as type “deno run -A app.ts” inside your terminal try to open up your browser type the url as “localhost:8000”.

Now to server our App on heroku we also need to create a Procfile which will hold our Deno run command and all the flags along with Port.

web: deno run --allow-net=:${PORT} --cached-only app.ts --port=${PORT}

Now you can add commit your code using git follow these command

$ git init
$ git add .
$ git commit -m "Created a Deno app Deploying on Heroku"

Before deploy your code on Heroku You need to create a buildpack inside your Heroku account as Heroku still not support official Deno deployment to here is some trick to deploy it. Inside your terminal type

$ heroku create --buildpack https://github.com/chibat/heroku-buildpack-deno.git
$ git push heroku master
$ heroku open

Now you can see that your app is working Fine as you intended. You can clone our code from Github using the link 👇.

recoding-io / deno-on-heroku-server

This code will allow to Deploy Deno application on Heroku Server

Deploy Deno on Heroku

This is project created on deno and help to deploy code on deno.

Project Intro

Inside this project we are using Deno modules like

Oak
Flags

Code to Deploy on Heroku Server

Before deploying you need to initialize Git Repo and Commit your code


$ heroku create --buildpack https://github.com/chibat/heroku-buildpack-deno.git
$ git push heroku master
$ heroku open

Full step by step tutorial

Youtube

View on GitHub

While if you like to watch full tutorial you can check our 📹 👇.

Build URL Shortener Using Deno

Haaris Iqubal — Tue, 30 Jun 2020 15:51:56 +0000

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.

Full step by step tutorial

View on GitHub

width="710"
height="399"
src="https://www.youtube.com/embed/sZCa2eHoLZ4"
allowfullscreen
loading="lazy">

How to Upload File and Images Inside Deno Server

Haaris Iqubal — Wed, 24 Jun 2020 16:33:20 +0000

Welcome again to my blog, today we gonna learn how to upload files or images inside Deno, as uploading files or images inside Node can be handled with Multer but in Deno handling file upload is still a mystery so let unwrap this…

For uploading our we gonna need Oak Middleware Upload module from Deno‘s website. We also add other modules inside our project which include Oak and View Engine to server our webpage and manage our application. So let’s set our View Engine boilerplate codes .


// Importing Module
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 {upload} from 'https://deno.land/x/upload_middleware_for_oak_framework/mod.ts';
// Setting up our view Engine
const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();
// Initiate our Application and Router
const app = new Application();
const router = new Router();
app.use(viewEngine(oakAdapter, ejsEngine));
// Setting our router to handle request
router
 .get('/', (ctx) => {
  ctx.render('index.ejs')
 });
// Passing Router as middleware
app.use(router.routes());
app.use(router.allowedMethods());
// Server our app
console.log('App is listening on PORT 8000');
await app.listen({port: 8000});

Now inside our “index.ejs” let’s a basic form which has a method of “POST” to the path “/upload” and enctype as “multipart/form-data”. Inside the form, tag adds an input tag which is type of “file” and name as “fileName” you can set anything you want. Our index.ejs file gonna look something like.


<body>
<form method="POST" enctype="multipart/form-data" action="/validated">
 <input type="file" name="fileName" multiple> <br>
 <input type="submit" value="submit">
</form>
</body>

Now inside our app.ts file let’s create a method to handle POST request as

.post('/upload', upload('uploads'), async(context: any, next: any)=>{
 const file = context.uploadedFiles;
 console.log(file);
 context.response.redirect('/');
})

Now save your file and open the browser and check if your application is working or not. When you submit the form inside the root file where your application is stored a file upload will be created and you can see that file you have uploaded finally submit. Our app.ts file finally looks something like this in case you miss something.


// Importing Module
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 {upload} from 'https://deno.land/x/upload_middleware_for_oak_framework/mod.ts';
// Setting up our view Engine
const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();
// Initiate our Application and Router
const app = new Application();
const router = new Router();
app.use(viewEngine(oakAdapter, ejsEngine));
// Setting our router to handle request
router
.get('/', (ctx) => {
ctx.render('index.ejs')
})
.post('/upload', upload('uploads'), async(context: any, next: any)=>{
const file = context.uploadedFiles;
console.log(file);
context.response.redirect('/');
});
// Passing Router as middleware
app.use(router.routes());
app.use(router.allowedMethods());
// Server our app
console.log('App is listening on PORT 8000');
await app.listen({port: 8000});

So finally we have implemented our uploading file inside the deno server so 😉. Check our video if you want to prefer to follow our video…

Creating Registration Form In Deno : MongoDB Setup, Saving Data

Haaris Iqubal — Sat, 20 Jun 2020 17:08:02 +0000

Welcome again in the second series of our Building Registration form, in previous post we have added functionality of View Engine, Form Request now in this post we gonna setup our MongoDB and save our form data so without further ado, let’s get started … First we need to create some file, so our file structure will look like.


./
|-index.ejs
|-app.ts
|-static/
   |-style.css

For our form styling, you can check our video

> Inside our “index.ejs” our file gonna look like this


<head>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="container">
<h1>Hello 
 <form method="POST" enctype="multipart/form-data" action="/post">
  <div class="form-container">
 <input type="email" class="form-input" name="email" required>
  <label class="form-input-label">Email
 <span class="form-input-bar">
</div>
<div class="form-container">
  <input type="password" class="form-input" name="password" required>
  <label class="form-input-label">Password</label>
 <span class="form-input-bar"></span>
</div>
<div class='form-container'>
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>

And our “style.css” will look like


body{
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
height: 100vh;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.form-container{
position: relative;
margin-bottom: 45px;
}
.form-input{
background: none;
background-color: white;
color: black;
font-size: 18px;
padding: 10px;
display: block;
border: none;
border-bottom: 1px solid #F8BBD0;
border-radius: 0px;
}
.form-input:focus{
outline: none;
border-bottom: none;
}
.form-input-label{
color: #F8BBD0;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 1px;
transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.form-input:focus ~ .form-input-label,.form-input:valid ~ .form-input-label{
top:-20px;
color: #E91E63;
}
.form-input-bar{
position: relative;
display: block;
width: 100%;
}
.form-input-bar:before,.form-input-bar:after{
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background-color: #E91E63;
transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.form-input-bar:before{
left: 50%;
}
.form-input-bar:after{
right: 50%;
}
.form-input:focus ~ .form-input-bar:before,
.form-input:focus ~ .form-input-bar:after{
width: 50%;
}

Now let’s send our static so that web browser, first we need to import Send function from Oak module.


import {Application, Router, send} from 'https://deno.land/x/oak/mod.ts';
.
.
.
// Sending Static file as Middleware
app.use(async (ctx,next) => {
 await send(ctx, ctx.request.url.pathname, {
  root: `${Deno.cwd()}/static`
 });
 next();
});

Here we send our static file as middleware, using upper statement. Now let’s setup database, for our database we gonna use MongoDB for this we import our module as


import {MongoClient} from ‘https://deno.land/x/mongo@v0.8.0/mod.ts';

Let initiate our MongoClient class and setup our URI, for this example we are using local mongoDB data you can use mongoDB server from its website just copy the URL and paste inside clientURI.


const client = new MongoClient();

client.connectWithUri("mongodb://localhost:27017");

After initiating our mongoDB, Now create our collection and database as


const db = client.database("registrationDB");
const dataCollection = db.collection('data');

As our Boilerplate code for Database has finally finish let now save our data inside our POST method add following statement.


.post('/post', async (ctx) => {
const form = JSON.stringify(await multiParser(ctx.request.serverRequest));
const parse = JSON.parse(form);
const dataSaved = dataCollection.insertOne(parse);
ctx.render('index.ejs',{data:{msg: parse.email}});
})

Now open the browser and check our application is working or not. In case you missed any part here is the full code. app.ts


// Importing our modules
import {Application, Router, send} 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.8.0/mod.ts';

const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();
// Setting up mongoDB
const client = new MongoClient();
client.connectWithUri("mongodb://localhost:27017");
const db = client.database("registrationDB");
const dataCollection = db.collection('data');
// Initiate our app and router
const app = new Application();
const router = new Router();
// Send View Engine as middleware
app.use(viewEngine(oakAdapter, ejsEngine));
// Handling request inside router
router
.get('/', async (ctx) => {
ctx.render('index.ejs',{data: {msg: 'World'}});
})
.post('/post', async (ctx) => {
const form = JSON.stringify(await multiParser(ctx.request.serverRequest));
const parse = JSON.parse(form);
const dataSaved = dataCollection.insertOne(parse);
ctx.render('index.ejs',{data:{msg: parse.email}});
})
;
// Send our router as middleware
app.use(router.routes());
app.use(router.allowedMethods());
// Send our Static folder as middleware
app.use(async (ctx,next) => {
await send(ctx, ctx.request.url.pathname, {
root: `${Deno.cwd()}/static`
});
next();
});
// Listening to database
console.log('App is listening on Port 8000');
await app.listen({port: 8000})

Now open you terminal and type command as “deno run — allow-net — allow-read — allow-write — allow-plugin — unstable app.ts” or your can use Denon. Now type your email and password inside form element.

And our database gonna look like this

So hope you like our post see in future posts until then 👋.

Creating Registration Form In Deno : Setting Up Project

Haaris Iqubal — Tue, 16 Jun 2020 17:14:01 +0000

Hi guys welcome today we gonna learn how to build a registration form in Deno. As you might have seen this basic building block of Server coding to handle request and save it inside the database this article will truly help you understand how to handle request, retrieve data from user and save it inside the database. So without further ado let’s get started…

Our file setup gonna look like as following.


./
|-index.ejs
|-app.ts

For the starter we gonna import our module for this project we gonna require Oak, view_engine and multiparser.


// 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';

Now we need to set our adapter and engine, for adapter we are using oak and for engine we are using EJS.


// Setting Engine and Adapter
const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();

After setting our View Engine boilerplate lets now initiate our app.


// Initiating Application and Router
const app = new Application();
const router = new Router();
// Passing our view engine as middleware
app.use(viewEngine(oakAdapter, ejsEngine));
router
 .get('/',(ctx) => {
  ctx.render('index.ejs',{data:{msg: 'world'}});
  });
// Passing Router as Middleware
app.use(router.routes());
app.use(router.allowedMethods());
// Setting our App to listen the Port
console.log('App is listening on Port 8000');
await app.listen({port: 8000});

Now inside our “index.ejs” add the following code.



 <h1>Hello <%= data.msg %></h1>

Now let’s run our application as “denon run — allow-net — allow-read — allow-write app.ts”. Open your browser type localhost:8000/ in the URL and your app is up and running. Now inside our “index.ejs” file make a form which handles a POST request to the path “localhost:8000/post” as following.



 <h1>Hello <%= data.msg %></h1>
 <form method="POST" enctype="multipart/form-data" action="/post">
  <label>Email</label>
  <input type="email" name="email" placeholder="Enter email">
 </form>
</body>

After adding form inside your “index.ejs” your web page now looks something like this.

After adding Form inside the our app.ts now let's handle our form request which uses POST method on “localhost:8000/post” path.


router
 .get('/',(ctx) => {
  ctx.render('index.ejs',{data:{msg: 'world'}});
  })
 .post('/post', async (ctx) => { 
  const form = JSON.stringify(await          multiParser(ctx.request.serverRequest));
  const parse = JSON.parse(form);
  ctx.render('index.ejs',{data: {msg: parse.email}});
  });

Inside our POST handler we request server to give any form data after that we convert this request into JSON form so we can parse the data pretty easily. After parsing data we than return data inside our render function as object. After adding our POST handler not run our app and check if its working or not.

So finally our POST handling is working fine. So hope you like this post we gonna add more functionality in the next post so stay tune 😉.

Intro to Deno Express JS

Haaris Iqubal — Fri, 12 Jun 2020 04:36:45 +0000

Express JS is one of the best application interface for Node.JS, Express provide middleware over our raw application so its user can build routes, middleware, and much more. Express also gives a whole new aspect of development by building MEAN, MERN, MEVN stacks. So can Express JS be used in Deno 🧐? Deno third-party module Deno Train has implemented some of the features which resemble the Express in node. So without wasting much time let’s get started… First we need to create app.ts, after creating let’s import the Deno Train using import syntax as


// Importing Deno Train
import { Application, Router } from "https://deno.land/x/denotrain@v0.5.0/mod.ts";

After importing we need to initialize our application class and router class so we can implement our app as well as create routing path which perform according to user request.


// Initialization of App and Router

const app = new Application();

const router = new Router();

Now we need to set our router to perform action, we can set which type of request we send to our server like (GET,POST,DELETE or etc).


// Setting up get request in base path

router.get("/get", ({req,res})=> {
 // Implement your logic
 return "Hello World Deno is awesome 👏 "
});

router.post("/post", ({req,res})=> {
 // You can request submitted form data by just requesting the body
 const formData = req.body;
 return "This is post submit any thing you want 🍉"
});

router.delete("/delete", ({req,res})=> {
 // Implement your logic
 return {"msg": "Your item has been deleted ❌"} // Returning a json
});

router.patch("/get", ({req,res})=> {
 return "Your application is updated"
});

So this how we can handle the requests using our Deno Train not lets make this router available to application as we need to pass it as a middleware then we need to start our app.


// Pushing our router inside our application as a middleware

app.use("/url-path", router);
// Now let our app to run on port 3000 by default we can change if we want

await app.run();

Now open up Post Man and tries to send each request and check your application is working or not. Use this url “localhost:3000/url-path/get” for the get request we can similarly apply for Delete, Update and Post request. Our final application will look something like this.


// Importing Deno Train
import { Application, Router } from "https://deno.land/x/denotrain@v0.5.0/mod.ts";

// Initialization of App and Router

const app = new Application();

const router = new Router();

// Setting up get request in base path

router.get("/get", ({req,res})=> {
 // Implement your logic
 return "Hello World Deno is awesome 👏 "
});

router.post("/post", ({req,res})=> {
 // You can request submitted form data by just requesting the body
 const formData = req.body;
 return "This is post submit any thing you want 🍉"
});

router.delete("/delete", ({req,res})=> {
 // Implement your logic
 return {"msg": "Your item has been deleted ❌"} // Returning a json
});

router.patch("/get", ({req,res})=> {
 return "Your application is updated"
});
// Pushing our router inside our application as a middleware

app.use("/url-path", router);
// Now let our app to run on port 3000 by default we can change if we want

await app.run();

So we finally implement Express like application inside Deno using Deno Train hope your may like it. And if we make our application using Deno, Mongo, Express and Javascript Front-End library then their acronym will be MERD, MEVD & MEAD.

Deno REST API with CRUD Operation using MongoDB : 1 Setting-up Project

Haaris Iqubal — Wed, 03 Jun 2020 16:12:27 +0000

This tutorial is focusing creating a simple REST API using Deno. By the latest introduction of Deno one of the most interesting thing to do with it is to perform CRUD operation with your Deno app. As Deno doesn't have any database associated with it so we need use other databases like SQL, PostgreSQL, SQLite or MongoDB. For the sake of this example we gonna use MongoDB. So without further ado let's setup our project. For our Deno app we are going to Oak which provides us app layer while Mongo Module which provides use interfacing command for CRUD in mongoDB. Our RestAPI will support MVC (Model View Controller) architecture. So our file structure gonna look like this. View will not be implemented in this tutorial, as this is only as RestAPI you can implement in your iOS, Android, Windows or macOS apps easily.


./
|-index.html
|-app.ts
|-models/
   |-user.ts
   |-mongo.ts
|-controllers/
   |-users.ts
|-routes/
   |-users.ts

Let type some of our boiler plate codes inside app.ts.


// Requiring modules 
import { Application, Router,send } from "https://deno.land/x/oak/mod.ts";
// Setting ENV variables
const env = Deno.env.toObject();
const PORT = env.PORT || 8000;
const HOST = env.HOST || 'localhost';
// Initiate
 
const app = new Application();
const router = new Router();
// Here we can setup our logger and timer
app.use(async (ctx,next)=> {
await next();
const rt = ctx.response.headers.get("X-Response-Time");
console.log(`${ctx.request.method} ${ctx.request.url} - ${rt}`);
})
app.use(async (ctx,next)=> {
const start = Date.now();
await next();
const ms = Date.now();
ctx.response.headers.set("X-Response-Time",`${ms}ms`);
})
// Starting our server
console.log(`App is listening to ${PORT} PORT`);
app.listen(`${HOST}:${PORT}`);

Now we need to create our Routes so inside our routes folder open users.ts file. Inside it we need to pass our request we want it might be “GET”, “POST”, “DELETE” or any other.


import {Router} from 'https://deno.land/x/oak/mod.ts';
const router = new Router({prefix: '/user'});
router
 .get('/allUsers', console.log("All user Path"))
 .post('/sign-up', console.log("Sign-Up User"))
 .post('/sign-in',console.log("Sign-In User"))
 .delete('/delete/:userId', console.log("Delete User"))
 .patch('/update/:userId', console.log("Update User"));

As our route has been prepared let import these routes inside our app.ts file so our file finally look like.


//Importing our modules
import {Application} from 'https://deno.land/x/oak/mod.ts';
import UserRoute from './routes/users.ts';
// Setting ENV variables
const env = Deno.env.toObject();
const PORT = env.PORT || 8000;
const HOST = env.HOST || 'localhost';
//Setting our application and router
const app = new Application();
//Here we can setup our logger and timer
app.use(async (ctx,next)=> {
await next();
const rt = ctx.response.headers.get("X-Response-Time");
console.log(`${ctx.request.method} ${ctx.request.url} - ${rt}`);
})
app.use(async (ctx,next)=> {
const start = Date.now();
await next();
const ms = Date.now();
ctx.response.headers.set("X-Response-Time",`${ms}ms`);
})
//Now we can pass UserRoute as middleware to app
app.use(UserRoute.routes());
app.use(UserRoute.allowedMethods());
// Starting our server
console.log(`App is listening to ${PORT} PORT`);
app.listen(`${HOST}:${PORT}`);

Now our app.ts has been setup let check our application is running our for checking we need to use Denon for live loading of app. Type the command


denon run --allow-net --allow-flag --allow-read --allow-write app.ts

Now open PostMan check our API we have created is working or not. Inside Post Man try to send a “GET” request at “localhost:8000/users/allUsers”. If you get comment on your console you have written above then our path is working. So we have created our project structure for and implemented boilerplate. We gonna implement DB Setup and our Controller in our next post until then stay tune.

Hashing your Data in Deno Using Bcrypt

Haaris Iqubal — Mon, 01 Jun 2020 05:49:59 +0000

Encryption has always been important aspect of Human Life as it help use to send data from one part of then world to another through different agent but its secret will not reveled. So how would your implement encryption into Deno app let unwrap this enigma… We are using bcrypt module from Deno Third Parties library, so the show its working we are going to implement a Deno application so create app.ts file and type the following Boilerplate code to start your application up and running.


import { Application, Router } from "https://deno.land/x/oak/mod.ts";const app = new Application();
const router = new Router();
 router
  .get("/",(ctx) => {
   ctx.response.body = "Router has been created";
   // Implement your code
   })
  .post("/addPost", (ctx) => {
   ctx.response.body = "This is port request";
   // Implement your code   
   });
app.use(router.routes());
app.use(router.allowedMethods());
console.log('App is listening to 8000 PORT');
app.listen({port: 8000});

After writing boiler plate code we need to require our bcrypt module as


import * as bcrypt from "https://deno.land/x/bcrypt/mod.ts";

After importing bcrypt we can now use it as bcrypt every where we want so lets just add bcrypt into our “POST” request path as mentioned below


.post("/addPost", (ctx) => { 
 const salt = bcrypt.genSaltSync(8);
 const hash = bcrypt.hashSync("Type Data you want to hash", salt);
 console.log(hash);
 })

Our final result gonna look like this

This bcrypt function can also implement as async function as mentioned below


.post("/addPost", async (ctx) => { 
 const salt = await bcrypt.genSaltSync(8);
 const hash = await bcrypt.hashSync("Type Data you want to hash", salt);
 console.log(hash);
 })

So this how we can implement hashing inside Deno Application. Here is our final code gonna look like.


import { Application, Router } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

const router = new Router();

 router
  .get("/",(ctx) => {
   ctx.response.body = "Router has been created";
   // Implement your code
   })
  .post("/addPost", async (ctx) => { 
    const salt = await bcrypt.genSaltSync(8);
    const hash = await bcrypt.hashSync("Type Data you want to hash", salt);
  console.log(hash);
  })

app.use(router.routes());

app.use(router.allowedMethods());

console.log('App is listening to 8000 PORT');

app.listen({port: 8000});

Basic Routing App in Deno using Oak

Haaris Iqubal — Sat, 30 May 2020 16:44:19 +0000

Routing your Internet application is one of most important thing developer has to know about, Routing help use to keep our application safe as we can pass many authentication middleware, Routing also help our Internet application to have different pages for different purposes. Sometime implementing routing become more tedious job to implement if we want to use internal modules so how we will implement that let us think about!!! As Deno support Third Party module like Oak which will provide us a “application layer” as well as “routing layer”. With using these two classes we can implement our routing application. So without further ado let’s just do it. First of all we need to create our “app.ts” file our working directory will look like this.


-app.ts

Now we have to import our module we gonna use Oak so we will copy its link and write our import statement.

import { Application, Router } from "https://deno.land/x/oak/mod.ts";

After importing our Application Class and Router Class we now need to initialize both of our module using following statement.


const app = new Application();

const router = new Router();

After initializing our router we can now setup what request we want to do with server and how will actually the router and what function they gonna provide. Request can be of many type like “GET”, “POST” ,“DELETE” etc…


router
  .get("/",(ctx) => {
   ctx.response.body = "Router has been created";
   // Implement your code
   })
  .post("/addPost", (ctx) => {
   ctx.response.body = "This is port request";
   // Implement your code   
   });

Our router has been setup now we have then these router path to our application, we can implement this by passing our router as a middleware to our application.

app.use(router.routes());

app.use(router.allowedMethods());

For the final step we just need to make our server listen to Port 8000 or any thing you want.


app.listen({port: 8000});

So this is how we can build a Deno Routing application pretty easily. Our final code will look this in app.ts file.

import { Application, Router } from "https://deno.land/x/oak/mod.ts";
const app = new Application();
const router = new Router();
router
  .get("/",(ctx) => {
   ctx.response.body = "Router has been created";
   // Implement your code
   })
  .post("/addPost", (ctx) => {
   ctx.response.body = "This is port request";
   // Implement your code   
   });
app.use(router.routes());
app.use(router.allowedMethods());;
app.listen({port: 8000});

So have fun with Deno and enjoy Deno with Oak 👍.

Nodemon Like Reloader 🔄 in Deno (Denon)

Haaris Iqubal — Thu, 28 May 2020 05:17:49 +0000

It might be frustrating to always close your Deno server and restart it again. As Deno doesn't provide "Hot Reload" out of the box but still there is a way to do it, so no more closing your server and restart it again or banging your head to a desk 😅.

For the sake of this example we gonna make little Deno application into "app.ts" file


import { serve } from "https://deno.land/std@0.52.0/http/server.ts";
const s = serve({ port: 8000 });
console.log("http://localhost:8000/");
for await (const req of s) {
 req.respond({ body: "Hello World\n" });
}

After saving the code you need to install Denon. Denon is the deno replacement for nodemon providing a feature-packed and easy to use experience. You need to upgrade Deno v1.0.2 to install the Denon simple type the following command.


$ deno upgrade

Now you just need to write the following command into your Terminal or PowerShell and you ready to go.


$ deno install --allow-read --allow-run --allow-write -f --unstable https://deno.land/x/denon/denon.ts

Denon uses unstable features of the stdlib, as a result the flag - unstable currently required for the installation. You can see various other options Denon has provided by simply writing "denon -h" or "denon- help". For running our app.ts file we need to write denon run then we have to pass the flag so that our app will only pass those options require by the user then we need to type the file name.


$ denon run -allow-env -allow-net app.ts

Now enjoy the feature of host reload on the fly whenever you change your file. Just try to change the body msg to "Deno is amazing" and you are done.

You can also follow our video tutorial also on youtube on Recoding .

EJS Rendering HTML & CSS in Deno using View Engine 🚀

Haaris Iqubal — Thu, 28 May 2020 05:01:32 +0000

Rendering HTML or CSS might a cumbersome process as Deno is still in its initial release and there not many plugins to use to serve HTML or CSS files. So still only a few libraries support full rendering support one of them is view-engine. View engines provide view-engine middleware so users could pass this middleware into their application server and easily render the HTML and CSS. So without further ado lets get started…

First of all, we need to create three files "app.ts", "index.ejs", "./static/style.css". Our file structure gonna look like this.

./
|-index.html
|-app.ts
|-static/
   |-style.css

First, we set up our app we need to write the following code inside the app.ts file. We need to import some libraries for this example we are going to import Oak which provides a server layer for our application and view-engine which provides a layout to paint our website.

import { Application, Router,send } from "https://deno.land/x/oak/mod.ts";
import {viewEngine,engineFactory,
adapterFactory} from "https://deno.land/x/view_engine/mod.ts";

In the first statement of where we require oak in which we are calling "Application" class which provides application-layer like middleware and listen to a port. While the "Router" Class will provide routes layer so we can create many routers and easily segregate the URL as we want. The "send" will help us to provide and the static file we want to serve. After importing we need to initialize our Application and Router by using this code.

const app = new Application();
const router = new Router();

After initializing the application we need to configure our application to use view engine for the sake of this post we are using EJS templating engine to server HTML. You can also use other rendering engines like Denjuck or Handlebars if you prefer.

const ejsEngine = await engineFactory.getEjsEngine();
const oakAdapter = await adapterFactory.getOakAdapter();

After setting our view engine boilerplates we need to pass a middleware for serving static folder inside our web browser.


app.use(async (ctx,next) => {
 await send(ctx, ctx.request.url.pathname,{
  root: `${Deno.cwd()}/static`
   })
 next();
});

Now we can pass view engine as middleware in our app with following code:


app.use(viewEngine(oakAdapter,ejsEngine));

The major portion of our boilerplate has been completed now we can set up our router for this example we only use one route to the root of the URL can serve any other route you want.


router.get("/",(ctx)=>{
 ctx.render('index.ejs',{data: {msg:"World"}}
 });

//Adding middleware to require our router
app.use(router.routes());
app.use(router.allowedMethods());

Our app.ts file is finally completed we only need to serve our app using the following statement :

console.log('App is listening to port: 8000');
await app.listen({port:8000});

If you miss any step or don't able to follow our code here is the full code we have written so far in the "app.ts" file.


// Requiring modules 

import { Application, Router,send } from "https://deno.land/x/oak/mod.ts";

import {viewEngine,engineFactory,
adapterFactory} from "https://deno.land/x/view_engine/mod.ts";

// Initiate app

const app = new Application();

const router = new Router();

// Setting up boilerplate for view-engine

const ejsEngine = await engineFactory.getEjsEngine();

const oakAdapter = await adapterFactory.getOakAdapter();

// Allowing Static file to fetch from server

app.use(async (ctx,next) => {
 await send(ctx, ctx.request.url.pathname,{
  root: `${Deno.cwd()}/static`
   })
 next()
});

// Passing view-engine as middleware

app.use(viewEngine(oakAdapter,ejsEngine));

// Creating Routes

router.get("/",(ctx)=>{
 ctx.render('index.ejs',{data: {msg:"World"}}
 });

// Adding middleware to require our router

app.use(router.routes());

app.use(router.allowedMethods());

// Making app to listen to port

console.log('App is listening to port: 8000');

await app.listen({port:8000});

For our "index.ejs" file we can simply add HTML tags into it which looks finally like :

<html>
 <head>
  <link rel="stylesheet" href="/style.css">
  <title> Serving HTML and CSS </title> 
 </head>
 <body>
  <h1> Hello <%= data.msg %></h1> 
 </body>
</html>

In EJS the object msg we passed in the app.ts file we can require this by using EJS syntax . For our final step, we need to create a style.css file inside the static file and you can code anything you want inside it relating to CSS.


body{
 background-color: red;
}

Now we have to test our application to write this code inside the terminal.

deno run --allow-net --allow-read app.ts

We need to - allow-net so that our module can be download and - allow-read tag so that our server could able to send the static file. So finally we create a deno application that will serve HTML as well as CSS using View Template Engine.