How to I set up a SPA with clojure and clojurescript?

Question

I'm trying to follow this book: https://pragprog.com/titles/dswdcloj3/web-development-with-clojure-third-edition/

Based on the book, I'm trying to set up a simple SPA but I'm having trouble figuring out just how to set up basic pages to get started.

Here is what I have in my core.cljs file:

(ns my-spa.core
  (:require
   [reagent.core :as r]
   [reagent.dom :as dom]
   [re-frame.core :as rf]
   [mount.core :as mount]))

(defn about-page []
    (fn []
      [:div.content>div.columns.is-centered>div.column.is-two-thirds
       [:div.columns>div.column
        [:h3 "Welcome to the About Page!"]]]))

(defn home []
    (fn []
      [:div.content>div.columns.is-centered>div.column.is-two-thirds
       [:div.columns>div.column
        [:h3 "Welcome to the Homepage!"]]]))

(defn navbar []
  (let [burger-active (r/atom false)]
    (fn []
      [:nav.navbar.is-info
       [:div.container
        [:div.navbar-brand
         [:a.navbar-item
          {:href "/"
           :style {:font-weight "bold"}}
          "miuminati"]
         [:span.navbar-burger.burger
          {:data-target "nav-menu"
           :on-click #(swap! burger-active not)
           :class (when @burger-active "is-active")}
          [:span]
          [:span]
          [:span]]]
        [:div#nav-menu.navbar-menu
         {:class (when @burger-active "is-active")}
         [:div.navbar-start
          [:a.navbar-item
           {:href "/"}
           "Home"]
          [:a.navbar-item
           {:href "/about"}
           "About"]]]]])))

(defn app []
  [:div.app
   [navbar]
   [:section.section
    [:div.container
     [home]]]])

(defn ^:dev/after-load mount-components []
  (rf/clear-subscription-cache!)
  (.log js/console "Mounting Components...")
  (dom/render [#'app] (.getElementById js/document "content"))
  (.log js/console "Components Mounted!"))

(defn init! []
  (.log js/console "Initializing App...")
  (mount/start)
  (rf/dispatch [:app/initialize])
  (mount-components))

How do I set up my app definition so that I can click on the Home-page button, or About-page button in the navbar, and get a page with both the navbar and the current page rendering?

In the book there is this code:

(defn page [{{:keys [view name]} :data
             path                :path
             :as                 match}]
  [:section.section>div.container
   (if view
     [view match]
     [:div "No view specified for route: " name " (" path ")"])])

(defn app []
  (let [current-route @(rf/subscribe [:router/current-route])]
    [:div.app
     [navbar]
     [page current-route]]))

But I can never get that to work. I try copying and pasting code from the book, but there's something I'm missing. I made sure I had all the same functions and namespaces as the book but I always get the error message "No view specified for route: ()" and I don't know why it's not finding the view. If I just have the app function set to render the about page by itself, then it works. So I think it's something with how the pages are routing?

Please let me know where to start? I'm feeling frustrated that I can't set up a simple webpage. I want to learn how to add more features but I want to start with the basics. I'll add any extra info as necessary.

Also, do I need websockets for this?

What am I missing?

Answer 1

You need to set up the ui routing, the :router/current-route subscription should change when you click on the navs. I have used bidi and pushy for this, here is an example: https://github.com/featheredtoast/reagent-bidi-pushy/blob/main/src/cljs/bidi_test/core.cljs