Yet Another Technical Blog: 2017

Saturday, December 30, 2017

Smallest electron app written in clojurescript

I was toying with GUI app development in Clojure, and I tried Seesaw. It was good, however the startup time of the app didn't please me. So I started off the Electron route instead, and decided to use Clojurescript. Here is how a very tiny electron app written in Clojurescript looks like.

Source files

There will be two sets of source files - some for Clojurescript and some for electron. We start off by creating a project using Leiningen

lein new cljstest1

We will use the lein-cljsbuild plugin for our convenience, so in addition to modifying the dependencies section in the project.clj file to

  :dependencies [[org.clojure/clojure "1.8.0"]
                 [org.clojure/clojurescript "1.9.946"]]

we will also add a plugins section

  :plugins [[lein-cljsbuild "1.1.5"]]

After this an execution of

lein deps

is sufficient to install all dependencies. We will also add some more options to the project.clj file, and what it looks like at the end is this.

The project.clj file

(defproject cljstest1 "0.1.0-SNAPSHOT"
  :description "FIXME: write description"
  :url "http://example.com/FIXME"
  :license {:name "Eclipse Public License"
            :url "http://www.eclipse.org/legal/epl-v10.html"}
  :dependencies [[org.clojure/clojure "1.8.0"]
                 [org.clojure/clojurescript "1.9.946"]]
  :plugins [[lein-cljsbuild "1.1.5"]]
  :cljsbuild {
    :builds [{ :id "default"
               :source-paths ["src"]
           :compiler {
                 :output-to "app/app.js"
                 :target :nodejs
                 :main cljstest1.core
                 :optimizations :simple
                 :pretty-print true
                 :externs ["externs.js"]
               }
             }
    ]
  }
 )

As you can see we plan to generate the Electron app in app/app.js. The directory 'app' will be created soon. Before we forget we need to create the externs.js file which we will need in order to use __dirname from Clojurescript.

The externs.js file

var __dirname;

The core.cljs file

Leiningen generated a src/core.clj file for us. Let's rename it to core.cljs so that the cljsbuild tool finds it automatically. Here is what it looks like.

(ns cljstest1.core
     (:require [cljs.nodejs :as nodejs]))

(def electron-pkg (nodejs/require "electron"))
(def url-pkg (nodejs/require "url"))
(def path-pkg (nodejs/require "path"))

(defn create-window
  []
    (.
      (new
        electron-pkg.BrowserWindow
        #js
        {:width 800 :height 600}
      )
      loadURL (url-pkg.format
               #js
                {:pathname (path-pkg.join js/__dirname "index.html")
                 :protocol "file"
                 :slashes true
                 }
               )
      )
)

(defn -main
  []
  (.on  (.-app electron-pkg) "ready" create-window)
)

(set! *main-cli-fn* -main)

The last line which updates the *main-cli-fn* variable is a very important part. Without that node.js won't be able to run the app.

After the Clojurescript part we need to generate the Electron part of our source. We need to create a directory 'app', and inside it place the following package.json file

The package.json file

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
      "electron": "~1.7.8"
  }
}

In this directory, we will also place a index.html file

The index.html file

<html>
  <body>
    <h1>
Ha!</h1>
</body>
<html>

Steps to compile and run

```
cd app; npm install; cd ..
```
```
lein cljsbuild once
```
```
cd app; npm start
```

Monday, November 6, 2017

World's smallest hugo site

I have been playing with Hugo for a while and it is

easy to set up
fast
flexible
well-documented

Here's how to create a tiny single-page website using Hugo.

Generate the source code to the site

Create a directory for the source code, and give this command

hugo new site <directory-name>

Add some basic customization

Go to the source code directory and open up config.toml and edit any field you want to. If you don't it is fine. Generally I disable unnecessary stuff like RSS feeds etc, so I add

disableKinds = ["RSS"]

I also want to control where the generated website goes, so I add

publishDir = <directory-path-within-quotes>

Create the html page

Here is a simple html page for starters


<html>
  <head>
    <title>
      Home page of XYZ

    </title>
  </head>
  <body>
    Nothing of importance at the moment
  </body>
</html>

Save it to layouts/index.html

Generate the site

The command is, simply

hugo

That's it. Your website is generated in the output directory 'public' or the value of the variable publishDir if you changed it.

Notes

I know that this is probably not the prescribed way of using a static site generator. Most people are talking about a separation of concerns, where your theme and layout are not connected with your content. I feel that that should not be the only way to create websites. It is possible for content and layout to be mixed for very small sites. Or when you start building the site. Later on you can gradually move the content out and create a stand-alone layout.

Sunday, November 5, 2017

World's smallest electron app

Electron seems to be a very easy-to-setup system if you already have node.js and npm. I could get a small app running even on Windows. Here's what you do.

Create a package.json file

You can use 'npm init' for this, or just your text editor. The example I can give is


{
  "name": "electron1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "~1.7.8"
  }
}

Create an index.html file

This will be the default screen of the app. The example I can give is


<html>
  <body>
    <h1>
Ha!</h1>
</body>
</html>

Create a index.js file

This will be the code behind the app. The example I have is


var electron = require('electron')
var app = electron.app

var path = require('path')
var url = require('url')

let mainWindow


function createWindow () {
  // Create the browser window.
  mainWindow = new electron.BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
 
    // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

Launch the app

There is a one-time command you need to execute:

npm install

After that is done you can launch your app using

npm start

Credits

This is nothing but a reduced version of the Electron quick-start app