Skip to content

journal 2020 08 18: bridge to frontend

Jump to bottom
Eason Chen edited this page Aug 18, 2020 · 2 revisions

Today I'm writing the missing piece that makes the backend serve some frontend code and apps. On this basis, we can add the whole frontend toolchain later.

Reading:

  • How to load up React? -- via script tags
  • How to do bundling? -- try jspm to side-step bundling altogether for now

That leave us with vanilla JavaScript on an HTML file, from-scratch, which is the starting point of this exercise. Basically I'm working on issue 1. The result is a tonne of ridiculous detail and Haskell WAI middleware shenanigans to serve static files, but stuff worked in the end.

Screenshots:

Visiting http://localhost:5000/static/index.html:

image

After clicking the button:

image

It's worth mentioning that I deliberately tried out the ES2015 module system by using type="module":

<script type="module" src="app.js"></script>
// app.js
import { getMessage } from './dependencies.js';

Lo and behold, indeed I see my browser making two network requests to my server --- one for each JS file imported:

image

This is a pretty solid foundation. If I were to write an entire front-end application using no JavaScript frameworks, this would still provide me with all the power that ES2015 has to offer. Neat!

Read the Git log for more commentary:

git log --since=2020-08-18 --until=2020-08-19
Clone this wiki locally