# Deno Render HTML Files

Hey guys, so we got [started with `Deno`](https://daily-dev-tips.com/posts/getting-started-with-deno-%F0%9F%A6%95/), and created a [`Deno` API](https://daily-dev-tips.com/posts/deno-pokemon-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.

```js
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';
```

Now we must define our adapters.

```js
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:

```js
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:

```js
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.

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

### EJS Template

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

```html
<!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:

```bash
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](https://github.com/rebelchris/deno/tree/server).

- [Deno view_engine](https://deno.land/x/view_engine@v1.3.0)
- [Oak module](https://deno.land/x/oak@v6.0.0)

### 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](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)

