Open Source Adventures: Episode 22: Imba 2 and GitHub Pages
Tags: imba, javascript
Published: 2022-03-24 15:09:59

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`:

```json
{
  "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
<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
<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](https://taw.github.io/imba2-rotn/) and [Matrix Rain App here](https://taw.github.io/imba2-matrix-rain/).

### 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.