Posted on Mar 24, 2022

Open Source Adventures: Episode 22: Imba 2 and GitHub Pages

In previous two episodes I ported two apps to Imba 2, but you can't see them unless you check them out locally.

Fortunately for static apps it's very easy to use GitHub pages, and I used it before for a lot of other projects, so let's get started.

Install GitHub Pages

I'll do the same steps for imba2-rotn (episode 20), and imba2-matrix-rain (episode 21).

First we need to npm i --save-dev gh-pages.

Then we can add two commands to package.json, one for predeploy and one for deploy:

{ "name": "imba2-rotn", "scripts": { "start": "imba -w server.imba", "build": "imba build server.imba", "predeploy": "npm run build", "deploy": "gh-pages -d dist/public" }, "dependencies": { "express": "^4.17.1", "imba": "^2.0.0-alpha.199" }, "devDependencies": { "gh-pages": "^3.2.3" } }

And run npm run deploy, and it almost works...

Absolute paths

Unfortunately that won't work, as Imba 2 by default uses absolute rather than relative paths in generated HTML.

This:

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Imba 2 ROT-N</title> <!-- reference to the client script styles --> <style src='*'></style> </head> <body> <!-- reference to the client script --> <script type="module" src="./client.imba"></script> </body> </html>

Becomes this:

<html lang="en"> <head><!--$head$--> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Imba 2 ROT-N</title> <!-- reference to the client script styles --> <link rel='stylesheet' href='/__assets__/all-TX3M4ICJ.css'> </head> <body><!--$body$--> <!-- reference to the client script --> <script type="module" src='/__assets__/app/client-5O71BJHW.js'></script> </body> </html>

This can be solved by adding --baseurl . to imba build, but app still won't work, as nothing in __assets__ even gets deployed.

Turn off Jekyll

It turns out by default GitHub Pages processess things with Jekyll, even if we don't actually need it. And Jekyll does not include __assets__ directory by default.

I also added -H to disable hash-based names, as that was really getting in a way of debugging this issue, and these shouldn't be necessary on modern browsers anyway.

So many changes latre, here's the final package.json:

{ "name": "imba2-rotn", "scripts": { "start": "imba -w server.imba", "build": "imba build -H --baseurl . server.imba", "predeploy": "npm run build && touch dist/public/.nojekyll", "deploy": "gh-pages -d dist/public --dotfiles" }, "dependencies": { "express": "^4.17.1", "imba": "^2.0.0-alpha.199" }, "devDependencies": { "gh-pages": "^3.2.3" } }