How to Build a Web-Based Desktop Application with Leiningen and Electron

May 19, 2024 | Programming

In the evolving landscape of software development, creating desktop applications that leverage web technologies has become increasingly popular. This guide will walk you through the steps of setting up a desktop application using the Leiningen template for Web-based applications with Electron, primarily known for its flexibility and ease of use. Let’s dive in!

Prerequisites

Before we start, ensure you have the following installed:

  • Leiningen 2.6.x or higher
  • Node.js v6.x or above
  • Grunt v0.1.13 or higher (Important: doesn’t support Leiningen 2.5.x)

If you don’t have Grunt installed, you can install it using the command:

$ npm install -g grunt-cli

Getting Started

Your first step is to create a new project with the Leiningen template.

$ lein new descjop YOUR_APP_NAME

Once created, navigate into your project directory:

$ cd YOUR_APP_NAME

Understanding the Project Structure

When you create a new project, the directory will look something like this:


+-- Gruntfile.js
+-- README.md
+-- app
|   +-- dev
|       +-- index.html
|       +-- js
|   +-- prod
|       +-- index.html
|       +-- js
+-- package.json
+-- project.clj
+-- resources
+-- src
|   +-- NAMESPACE
|       +-- core.cljs
+-- src_front
|   +-- NAMESPACE_front
|       +-- core.cljs
+-- src_front_profile
|   +-- NAMESPACE_front
|       +-- dev
|           +-- conf.cljs
|           +-- init.cljs
|       +-- prod
|           +-- conf.cljs
|           +-- init.cljs

You can think of this structure as a tree with each branch representing different components of your application: the leaves are the sources and resources that make up your application.

Usage Instructions

Step 1: Initialize the Project

Run the command below to initialize the project:

$ lein descjop-init

For Windows users, use:

$ lein descjop-init-win

Step 2: Update Company Information

Edit your project configuration by adding your company name and submission URL in the core.cljs file:

(defn -main []
  (.start crash-reporter (clj-js :companyName "Your Company Name"
                                  :submitURL "http://example.com")))

Step 3: Run the Externs Alias

Next, run the externs alias:

$ lein descjop-externs

Then compile the project:

$ lein descjop-once

Step 4: Running Your Application

To run your application, use the following commands based on your mode:

  • Development Mode: Launch using Figwheel:
  • $ lein descjop-figwheel
  • Production Mode: Run directly with Electron:
  • $ .electron electron.exe appprod

Packaging the App

If you wish to package your application, ensure you have Electron Packager installed:

$ npm install -g electron-packager

Then you can package your app using the appropriate commands for your OS.


# For OSX
$ lein descjop-uberapp-osx

# For Windows 32-bit
$ descjop-uberapp-win32

Troubleshooting

If you encounter problems during installation or execution, here are a few troubleshooting ideas:

  • Ensure all required dependencies are installed, and their versions match the requirements.
  • Reference and update the Electron version in Gruntfile.js if it’s outdated.
  • For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Final Thoughts

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox