Deno Render HTML with view engine and ejs


Learn how to serve rendered html with the Deno and ejs rendered templates to serve a website!

11 Aug, 2020 · 2 min read

Hey guys, so we got started with Deno, and created a Deno API.

But how to serve HTML files with Deno?

Today we’ll be looking into Deno as a server option.

Deno Server

In Node, you probably have heard of Express. This was the middle layer to render files. In Deno, we have something similar called Oak.

First we are going start by importing the deno modules we need:

import {Application} from '[email protected]/mod.ts';
import {
} from '[email protected]/mod.ts';

Now we must define our adapters.

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

For this Deno project we are choosing the ejs template engine to render HTML but we could also use handlebars or denjucks.

Then we define our Oak adapter. Once we have the Oak adapter and the template engine readey, we pass them to the Deno view engine.

Now, we are going to start the application:

const app = new Application();

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

Next, we define a new Deno application and tell it to use the defined ejs view engine to render the pages.

We aren’t using routes for this example. We will just return a one page:

app.use(async (ctx, next) => {
  ctx.render('index.ejs', {data: {msg: 'Tips'}});

See the data attribute? We are going to pass a variable to our view, which ejs will use to render the page for us.

Now, all we have to do is spin up our app on port 8000.

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

Deno with EJS Template engine

As for our ejs file, we use the plain bootstrap starter HTML for rendering:

<!DOCTYPE html>
<html lang="en">
    <!-- Required meta tags -->
    <meta charset="utf-8" />
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    <!-- Bootstrap CSS -->
    <title>Deno Server</title>
    <h1>Daily Dev <%= data.msg %></h1>

Now are are ready too run our server by executing:

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

Now open a browser and locate: http://localhost:8000 and see the ejs rendered HTML!

Find the code on GitHub.

Learn more about the Deno view engine and Oak on Deno land:

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Deno Pokemon API

9 Aug, 2020 · 5 min read

Deno Pokemon API

Getting Started with Deno 🦕

6 Aug, 2020 · 2 min read

Getting Started with Deno 🦕

Join 2099 devs and subscribe to my newsletter