DEV Community

Cover image for Deno Render HTML Files
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Deno Render HTML Files

Hey guys, so we got started with Deno, and created a Deno API. But what if we want Deno to server actual files?

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 modules we need.

import {Application} from 'https://deno.land/x/oak@v6.0.0/mod.ts';
import {
  viewEngine,
  engineFactory,
  adapterFactory
} from 'https://deno.land/x/view_engine@v1.3.0/mod.ts';
Enter fullscreen mode Exit fullscreen mode

Now we must define our adapters.

const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();
Enter fullscreen mode Exit fullscreen mode

We are choosing the ejs template but we can also use handlebars or denjucks.
Then we define our oakAdapter.

Now, we are going to start our application:

const app = new Application();

app.use(viewEngine(oakAdapter, ejsEngine));
Enter fullscreen mode Exit fullscreen mode

Here we define a new Deno application and tell it to use the defined view engine.

We aren't using routes for this example, but will just return a one time view:

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

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

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

await app.listen({port: 8000});
Enter fullscreen mode Exit fullscreen mode

EJS Template

As for our ejs file, We are using a plain bootstrap starter:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <title>Deno Server</title>
  </head>
  <body>
    <h1>Daily Dev <%= data.msg %></h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now are are ready too run our server by executing:

deno run --allow-net --allow-read server.ts
Enter fullscreen mode Exit fullscreen mode

Now open a browser and locate: http://localhost:8000 and see our site!

Find this project on GitHub.

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

Top comments (4)

Collapse
 
leviermonaites profile image
Levi Ermonaites De Freitas

When I try to import it, it returns an error related to isolatedModules, do you know what that means?

Collapse
 
dailydevtips1 profile image
Chris Bongers

Are you following the article?
Because all modules need to have a export{} statement.
The module you are trying to import might not have that.

Which one is it, I will have a look for you.

Collapse
 
stereoplegic profile image
Mike Bybee • Edited

A closer Node-based comparison would be Koa, which Oak is ported from (but I get that more people are familiar with Express).

Collapse
 
dailydevtips1 profile image
Chris Bongers

Yes 100% Oak = Koa mixed letters, I was just guessing more people would know Express.
But it is the port of Koa you are completely right.