EJS Rendering HTML & CSS in Deno using View Engine 🚀

#deno #webdev #node

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.