Open Source Adventures: Episode 22: Imba 2 and GitHub Pages
Tomasz Wegrzanowski
Posted on March 24, 2022
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"
}
}
Deployed Apps
You can see ROT-N app here and Matrix Rain App here.
Coming next
In the next few episodes I'll try to port a few more Imba 1 apps to Imba 2, and then I guess I'll summarize my thoughts about Imba situation.
Posted on March 24, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.