Server side rendering

Leverage the Deno runtime to render HTML on the backend.

Create a fresh Architect project

npm init @architect ./mydeno
cd mydeno

Update the build folder configuration in app.arc

@app
mydeno

@static

@http
get /

Update the arc.config file in src/http/get-index:

# arc.config
@aws
runtime deno

Update the get-index function with the following:

// src/http/get-index/index.js

import HTML from './components/html.js'

export async function handler(req) {
  return {
    statusCode: 200,
    headers: {
      'cache-control': 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0',
      'content-type': 'text/html; charset=utf8'
    },
    body: HTML({
      title: 'Deno Clock'
    })
  }
}

Create src/http/get-index/components/html.js:

import Main from './main.js'

export default function (state = {}) {
  let { title } = state
  return `
<!DOCTYPE html>
<html>
<head>
  <title>${title}</title>
  <style>
   h1 {
     font-size: 3em;
   }
   p {
     font-size: 2em;
   }
  </style>
</head>
 <body>
  ${Main()}
  <script src='_static/index.js'> </script>
 </body>
</html>
  `
}

Create src/http/get-index/components/main.js

export default function Main(state={}) {

  return `
  <div>
  <h1> Hello From Deno </h1>
  <p> It is now <span id='time'></span> </p>
  </div>
  `
}

Create public/index.js

console.log('Hello World from client-side JS')
let timeSpan = document.querySelector('#time')

function myTimer() {
  let date = new Date()
  let time = date.toLocaleTimeString()
  timeSpan.textContent = time
}

let updateTime = setInterval(myTimer, 1000)

Start the local dev server and check out your work at http://localhost:3333.

npm start

Clone the example source: