Server side rendering

Leverage the Deno runtime to render HTML on the backend.

  1. Create a fresh Architect project
npm init @architect ./mydeno
cd mydeno
  1. Update the build folder configuration in app.arc


get /
  1. Update the arc.config file in src/http/get-index:
# arc.config
runtime deno
  1. 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'
  1. Create src/http/get-index/components/html.js:
import Main from './main.js'

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

  1. Create src/http/get-index/components/main.js
export default function Main(state={}) {

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

  1. 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)
  1. Start the local dev server and check out your work at http://localhost:3333.
npm start
  1. Clone the example source:

Deploy to Begin