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/[email protected]/mod.ts';
import {
  viewEngine,
  engineFactory,
  adapterFactory
} from 'https://deno.land/x/[email protected]/mod.ts';

Now we must define our adapters.

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

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));

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'}});
});

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});

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>

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 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

Deno Render HTML Files

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Deno Server

EJS Template

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

Deno Server

EJS Template

Thank you for reading, and let's connect!