Tmux VIM, vim-iced, deps.edn, ClojureScrip and shadow-cljs

Here is the simplest stack to work on front end using ClojureScript. This approach uses shadow-cljs as the ClojureScript compiler, deps.edn tools, vim-iced plugin for VIM integration.

Install shadow-cljs

Follow directions on https://shadow-cljs.github.io/docs/UsersGuide.html#_installation

Install vim-iced

Follow direction on https://liquidz.github.io/vim-iced/. Complete the Install and Quick start sections.

Add Dependencies and Configure nREPL

Read direction here: https://liquidz.github.io/vim-iced/vim-iced.html#vim-iced-manual-shadow-cljs

Notice that adding dependencies to shadow_cljs.edn may not work and Warning with the follwoing content may appear:

=============================================================================
WARNING: The configured :dependencies in shadow-cljs.edn were ignored!
         When using :deps they must be configured in deps.edn
==============================================================================

Add the dipendencies to deps.edn instead, like so:

deps.edn

{:paths   ["src/main" "resources"]
 :deps    {org.clojure/clojure    {:mvn/version "1.10.1"}
           com.fulcrologic/fulcro {:mvn/version "3.0.10"}}

 :aliases {:dev {:extra-paths ["src/dev"]
                 :extra-deps  {org.clojure/clojurescript     {:mvn/version "1.10.742"}
                               thheller/shadow-cljs          {:mvn/version "2.11.8"}
                               binaryage/devtools            {:mvn/version "0.9.10"}
                               refactor-nrepl/refactor-nrepl {:mvn/version <latest>} (1)
                               cider/cider-nrepl             {:mvn/version <latest>} (1)
                               iced-nrepl/iced-nrepl         {:mvn/version <latest>}}}}} (1)

1	Add the dependencies with the latest version.

To get the latest version, each dependency can be searched on cloars.org, here is the link to each one:

The .nrepl.edn file is also required. Once setup as shown the system is ready.

Start a Sample project

The starter project below, is almost copied from fulcrologic, which is a great front end library to work with React.

Clone the starter peoject from the vim-iced-cljs repo and follow steps:

$ git clone https://github.com/bubbleuptoppop/vim-iced-clj
$ cd vim-iced-cljs
$ npm init
... answer the questions or take defaults ...
$ npm install shadow-cljs react react-dom --save

Build the project

$ npx shadow-cljs server
shadow-cljs - config: /home/sporty/clojure/fulcro/vim-iced-cljs/shadow-cljs.edn
shadow-cljs - starting via "clojure"
shadow-cljs - HTTP server available at http://localhost:8000 (1)
shadow-cljs - server version: 2.11.8 running at http://localhost:9630 (2)
shadow-cljs - nREPL server started on port 9000 (3)

1	The web server
2	Server UI, to control builds, your port may vary.
3	nREPL server Go to the Server UI, it should be at http://localhost:9630. (Note: if your port is not 9630, change the address to http://localhost:<your port>).

You may have to reload the page twice for it to show up correctly. This has to do with availability of needed source in the browser on time.

The page should look something like this:

server ui dashboard

At this point, one terminal instance for VIM and two terminal instances for servers are needed. In the first terminal instance execute:

$ npx shadow-cljs server

In the second terminal instance:

$ iced repl --force-shadow-cljs main

If tmux is used, here is how the terminal can look like:

tmux vim shadow-cljs server and vim-iced server terminal

In browser, go to http://localhost:8000 (Note: 8000 is the shadow-cljs http server port, change it if yours is different)
In broser, start developer tools.
In VIM open up the src/main/app/client.cljs file and execute the following command:

:IcedConnect

It may prompt for confirmations, answer yes and vim should now be connected to the development environment.

In VIM

:IcedEval (js/alert "Hi from VIM")

shadow-cljs alert from VIM

At this point, follow vim-iced documentation in the Evaluation section to evaluate lines in VIM.