There are many template engines that can be used to render HTML page such as EJS and Handlebar, however, to be able to deploy Deno application to Deno Deploy platform, we need to use JSX template engine. 

 

 // app.js

import { Application, Router } from "https://deno.land/x/oak/mod.ts"
import html from "./views/index.jsx"

const app = new Application({keys: ["secret1"]})
const router = new Router()

router.get('/', async (ctx) => {
  ctx.response.body = html
})
 
app.use(router.routes())
app.use(router.allowedMethods())

app.addEventListener(
  "listen",
  (e) => console.log("Listening on http://localhost:8000")
)

await app.listen({ port: 8000})

// denon run --allow-net --allow-read app.js

 

// views/index.jsx

/** @jsx h */
import { h, renderSSR } from "https://deno.land/x/nano_jsx@v0.0.33/mod.ts"

function Index(props){
  return(
    <html>
      <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Oak Web Framework</title>
      </head>
      <body>
        <h3>{props.message}</h3>
      </body>
    </html>
  )
}

const message = 'Web development with Oak framework'
const str = renderSSR(<Index message={message} />)
const html = `<!DOCTYPE html>${str}`

export default html