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.

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

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

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

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

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

lein fig:build

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.

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

results matching ""

    No results matching ""