Skip to content

Simple project

ClojureScript and Figwheel-main banner

This is a simple ClojureScript project with no additional application dependencies. The project uses figwheel-main as a ClojureScript development tool, for live loading of changes into the browser and also for building the projects with different configurations.

{% tabs deps="Clojure CLI project", lein="Leiningen project" %}

{% content "deps" %} Create a Clojure CLI tools deps.edn project using the :project/new alias from practicalli/clojure-deps-edn configuration.

Run this command in a terminal window

clojure -X:project/new :template figwheel-main :name practicalli/landing-page

The command will create a new directory with the project name

Command line: run ClojureScript REPL with Figwheel-main and rebel readline

{% content "lein" %} Create a Leiningen project.clj project using the following command, including --reagent which is a common library for reactive web page development

lein new figwheel-main practicalli/landing-page

{% endtabs %}

Run a ClojureScript projectλ︎

Run the ClojureScript project from the command line initially to ensure that everything is working.

The project will start a REPL and figwheel-main will launch a connected browser REPL in the default web browser.

In the terminal window used to create the project, change into the project directory

cd landing-page

{% tabs depsrepl="Clojure CLI project", leinrepl="Leiningen project" %}

{% content "depsrepl" %} Use the Clojure CLI tools to run the project using the :fig alias and the :build build task.

Also use :repl/rebel alias from practicalli/clojure-deps-edn to run the REPL with rebel readline for a richer REPL experience.

clojure -M:fig:build

{% content "leinrepl" %}

Use Leiningen to run the ClojureScript project using the :fig alias and the :build build task.

lein fig:build

{% endtabs %}

A window or tab should automatically open once the project starts. This takes a few moments, so take a few deep breaths.

ClojureScript REPL with Figwheel-main - default webpage

Check the browser connectionλ︎

Check the browser REPL is connected by evaluating a ClojureScript expression in the ClojureScript REPL.

In the terminal at the ClojureScript REPL prompt, show an alert box in the browser.

(js/alert "Hello from the ClojureScript REPL")

Command line: run ClojureScript REPL with Figwheel-main and rebel readline

The web page updates and shows a dialog box with the message.

ClojureScript REPL with Figwheel-main - default webpage

Add the js/alert expression as a rich comment block to the src/practicalli/landing_page.cljs source code file. This provides a convenient way to test the figwheel-main connection to the browser without being part of the main code.

 (js/alert "Hello from the ClojureScript REPL")