DEV Community

Tomasz Wegrzanowski
Tomasz Wegrzanowski

Posted on

 

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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)

Sending data via light 🤯

... with JavaScript 🤯 🤯🤯

Using visible light, data can be encoded and transmitted using a technology called Li-Fi which aims at using your existing lights for wireless communication.

Sending data via light

Read more