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.
Top comments (0)