In this chapter, we'll setup our system to run Clojure. We'll install all the required dependencies and run the "Hello World" program.

Clojure Tutorial - Installing and Testing Required Dependencies

We need help from our editors to tame the LISPy syntax. This chapter walks through the tools we will need and why.

Editor Tools

How to Set up Visual Studio Code for Clojure Development

Setup IntellJ IDE for Clojure development.

Clojure IDE Setup - Using the Cursive Plugin With IntelliJ

How to Use Emacs with Clojure - 6 Packages You'll Need

Getting Started

Clojure is neither compiled nor has its own VM. Instead, it runs on VMs of other languages. In this lesson, we'll learn about official and unofficial ports and support status.

Understanding the Benefits of Clojure's Hosted Nature

Let's get our hands dirty with native data types and common operations.

Clojure Basics - Syntax and Native Data Types

C-style languages invisibly impose a syntax, whereas Lisps do not. This makes Lisps more expressive and easier to grasp.

What is Syntaxlessness? How to Write More Expressive Code

Since Clojure is hosted, it can tap into ecosystems of other languages. This has led to multiple build tools for different ecosystems. Choosing the right build tool might get tough for a beginner as the pros and cons might not be known. In this module, we'll learn about the general state of build tools in Clojure and choose the right tool for our project.

Clojure Build Tools - Leiningen, Boot, Shadow CLJS & Figwheel

Enough talking, let's create a new repository and set up a project from scratch, using Shadow CLJS.

How to Set Up a Shadow CLJS Project From Scratch

Our first project is now in place. In this chapter, we'll learn how to build and run it. We'll also explore some other build targets and explore Shadow with Reagent, a ClojureScript wrapper to React.

Getting Familiar With The Shadow CLJS API

The REPL is an essential element of a Lisper's toolkit. In this chapter, we'll solidify our grasp of the REPL and editor integration. We'll also learn about some problems that come with the REPL.

An Introduction to Clojure REPL and Evaluating Code Inline

Paredit is a tool to help with structural editing. It helps you write and modify S-Expressions with so much ease that the brackets will almost disappear! In this chapter, we'll learn fundamental Paredit commands.

A Clojure Beginner's Guide to Structural Editing with Paredit

Language Semantics

Clojure offers many control flow conditionals, like if-else blocks. In this chapter, we'll study the API of a few such methods.

Clojure Conditionals - Understanding Flow Control Operators

Atoms are thread-safe containers for handling mutable state. In this chapter, we'll learn how to create and manipulate atoms. We'll also learn how to hook into an atom's lifecycle and execute side-effects.

Atoms in Clojure - How to Create and Manipulate Them

There are many ways to define a function and parse arguments. In this chapter, we'll learn more about function definition, destructuring and some helpful higher-order functions.

Clojure Functions - Definitions, Distinctions, and Examples

Clojure sequences are abstract. In this chapter, we'll make sense of what exactly we mean by that, and learn about common operations.

Sequence Operations

Nested calls can become hard to manage. Threading macros help us take control. In this chapter, we'll learn about the concept of threading macros and study three commonly-used versions.

Threading Macros in Clojure - Thread-Last vs Thread-First vs As

Clojure lets you write code close to the metal ie the host language. In this chapter, we'll learn about constructs and techniques to interact with JavaScript within Clojure.

Clojure Constructs and Techniques to Interact with JavaScript

Standard Library

Walkthrough the components and concepts we will implement, with a video demo of the final app.

Overview

In this chapter, we will bootstrap a project using create-cljs-app and understand the code generated. We'll also study Hiccup, a CLJS alternative for JSX, and various ways to require namespaces.

Clojure Project Setup with create-cljs-app

Reagent is a minimalist Clojure wrapper for React. It exposes all React APIs including hooks and is one of the most popular Clojure projects. This chapter is a theoretical introduction to Reagent. We'll learn about components, third-party integrations and local state.

What is Reagent? The Minimalist Clojurescript React Wrapper

We have already learned how third-party components fit with Reagent. In this chapter, we'll implement React Router in the Tinycanva app.

How to Install React Router from NPM and Set Up Routes

In this chapter, we'll set up our UI library and CSS build process using PostCSS.

How to Set Up a UI Library & CSS Build Process Using PostCSS

Reframe is a flux-like library for uni-directional data flow. In this chapter we'll study the six-step Reframe loop.

Introduction to React State Management

Let's implement the concepts learned in the chapter on Reagent and React Router to build a login page..... plus the magic of REPL!

App Structure and Authentication UI

Set up Firebase project and configure authentication.

Setting Up Firebase Projects and Authentication for Clojure Apps

In this chapter, we'll initiate the Reframe loop for our login form, dispatch form submit events and handle them, ie implement steps 1 and 2.

Auth Event Handlers

We dispatched an event and wrote a handler. The handler returned an effects map, with a custom effect `:firebase/email-auth`. In this chapter, we'll create the custom effect handler and initialize the Firebase app.

Auth Effects and Firebase Initialization

In this chapter,  we'll connect the UI to the Reframe loop and create loading indicators and subscriptions to check if the user logged in successfully.

How to Create Firebase Data Subscriptions in Reframe

We have authenticated our users, but now they're stuck on the login screen. This chapter is about building re-usable containers to redirect users to authorized pages.

How to Build Reusable Containers for Clojure Apps with Reagent

In this chapter, we will integrate Reframe and Firebase to save the graphic "entity". This is analogous to a POST request with a traditional REST API.

How to Store Reframe Data in Firebase Without a REST API

Create Reframe handlers to read and delete graphics. Analogous to GET and DELETE in a REST API.

Read and Delete Graphics

Integrate Reagent and Reframe to create UI for listing and deleting graphics.

How to Integrate Reagent and Reframe With Clojure to Create a UI

Making graphic list items clickable; and the editor(detail) route. In the process, we'll learn how to use React's Higher Order Components with Reagent.

Using React Higher Order Components to Frame a Canvas Editor

In this chapter, we will integrate FabricJS with our app and create an HTML canvas-based editor.

How to Create an HTML Canvas Editor with Clojure and FabricJS

We have an editor in place, but it doesn't save data to Firebase. It is also not equipped to load data from Firebase. In this chapter, we'll create Reframe components to store data. We'll then update the editor to load data from Firebase. We will also extend the editor functionality.

Saving graphics

Tinycanva

Packaging an app consists of multiple steps, like configuration, minification etc. In this chapter, we'll package our app with production configuration and create an optimized JS bundle, that can be deployed on any CDN.

Production packaging

Large apps degrade user experience and one way to control that is to split our code into chunks. This chapter will walk through tools afforded by Shadow to split our app code. We'll also implement the splits and analyze performance gains.

Code splitting

Shadow comes bundled with a test runner. Clojure comes bundled with a unit testing library. In this chapter, we'll implement the two and learn about testing techniques for Reframe handlers.

Unit Testing with Clojure - Techniques for Reframe handlers

Going forward - information about online Clojure communities, server-side Clojure concepts, companies and job boards.

Conclusion

Advance Concepts

Clojure is a functional hosted LISP known for its expressiveness, which has excellent interop with Javascript, Java, and Microsoft's Common Language Runtime (CLR). 

Many developers praise the elegance and productivity Clojure allows, but for many it seems like an esoteric language with an "ugly" syntax that is impossible to get started with. This course will change that view and show you how to be productive with this marvelous language.

In this course, we'll build a web-based graphics editor similar to Canva. We'll explore Clojure from the perspective of a JavaScript developer. Along the way, we'll also explore state management, authentication, API integration with Google Firebase and interop with NPM.

This course takes you from zero to an understanding of Clojure semantics, LISP tools, and building a production-ready React application in just a few hours. 

We'll start with the basics and build up to writing a fullstack app with both frontend and backend in Clojure. 

The frontend, built using ClojureScript (Clojure that runs on JavaScript) will be a single page React application with routing, key-based authentication and API integration, which will save, list, edit and delete graphics.
 

The backend is hosted on Google Firebase. 

Throughout the course, we'll learn about tools like REPL that aid development. Towards the end, we'll learn about advanced concepts like code splitting and end-to-end testing.

Clojure is unlike other languages as it is hosted on, and can leverage, existing VMs. This means that you can learn Clojure once and write it on the backend with JVM or CLR, and the frontend with JavaScript. If a new technology like Rust takes over the world tomorrow, you will probably be able to continue to write Clojure because a Rust port is already in the making.

By the end of this course, you'll have a superpower: the ability to write fullstack Clojure applications.

Build a Fullstack Web Graphics Editor in Clojure and React

This is a course on Clojure for React developers in which we'll build a web-based graphics editor similar to Canva.

Tinycanva: Clojure for React Developers

The concept of tree-based codes aka LISPs

Editor integrations that make writing LISPs easy

Mental models for Clojure's rich standard library

Understanding of tools like NREPL to aid fast feedback

Hosted nature of Clojure and its ability to tap into JVM, JavaScript, CLR and other language ecosystems

Syntaxlessness and expressiveness of the language

How to create React applications with Clojure

Integration with APIs using Google Firebase

Key-based authentication and access control

Integration with React Router and Fabric JS

Map of communities and resources that can help when you get stuck

 route, that lists all the graphics a user has created. This will be our root private route - ie a user will be redirected here as soon as she logs in.

For common components like navigation, auth containers, rich text editors and so on, we'll use the 

 namespace. This means we'll have three top-level namespaces:

We'd like to point out again that this is only one way you could do it - feel free to experiment with different structuring for your apps.

The job of this component is to listen to 

 route as soon as she logs in. If the user is not logged in, it renders the children (ie the login form):

(ns app.components.auth
  (:require ["react-router-dom" :refer (Redirect)]
            [re-frame.core :as rf]))



(defn public [& children]
  (let [me @(rf/subscribe [:app.domain.firebase/me])]
    (if me
      [:> Redirect {:to "/graphics"}]
      [:<> children])))

 defined in the last chapter redirects to 

 to allow for multiple Hiccup forms like:

[auth/public
	[:div "form 1"]
	[:div "form 2"]]

, Reagent would only render the last form and ignore all others, ie it would only render 

 is the shorthand for React Fragment. In React, a component can return only one form. Since we allow the children to be a list of forms, we wrap it in a Fragment so React doesn't complain.

 component from React Router is used to perform the Redirect using a component.

(defn page []
  (let [{:keys [email password]} @state
        login-loading? @(rf/subscribe [:app.domain.firebase/login-loading?])
        login-error @(rf/subscribe [:app.domain.firebase/login-error])
        ]

    [auth/public ;; added public container
     [:div.w-full.h-screen.flex.bg-gray-400
      [:div {:class "w-2/3 md:w-1/3 m-auto bg-white px-4 rounded shadow"}

       [:div.my-4.text-2xl "Login to Tinycanva"]

       [:> InputGroup {:placeholder "Email" :class "mb-2"
                       :leftIcon "envelope" :value email
                       :onChange #(swap! state assoc :email (.. % -target -value))}]

       [:> InputGroup {:value password :leftIcon "key"
                       :onChange #(swap! state assoc :password (.. % -target -value))
                       :placeholder "Password" :type :password}]

       [:> Button {:text "Login" :icon "log-in" :intent (.-PRIMARY Intent)
                   :class "mt-4 mb-2" :loading login-loading?
                   :onClick #(rf/dispatch [:app.domain.firebase/login-with-email @state])
                   }]

       (when login-error
         [:> Callout {:intent (.-DANGER Intent)}
          login-error])

       [:div.my-8.bg-gray
        "New here? " [:> Link {:to "/register" :class "text-sm text-gray-600"} "Register"]

        ]]]]))

(comment

(defn page []
  (let [{:keys [email password]} @state
        login-loading? @(rf/subscribe [:app.domain.firebase/login-loading?])
        login-error @(rf/subscribe [:app.domain.firebase/login-error])
        ]

    [auth/public ;; added public container
     [:div.w-full.h-screen.flex.bg-gray-400
      [:div {:class "w-2/3 md:w-1/3 m-auto bg-white px-4 rounded shadow"}

Notice how all components are now wrapped under 

. The above example is truncated, you will have more lines of code in your component.

 while setting up Firebase. Try to log in with the test credentials and you'll be redirected to 

 by manually altering the URL, the app will redirect you to 

It's standard to have a top global nav with some details about the user and associated actions, such as settings, profile, and logout.

Since our users can now log in, let's make them feel at home by showing their email and a logout option. We'll use Blueprint's 

 has support to align items to the left or right, add headings, dividers, and much more. We recommend checking the component props if you'd like to learn more.

 will be used throughout the application - ie it belongs to 

 component for the top navigation. In an application with multiple nav bars, multiple components can be defined in this namespace:

(ns app.components.nav
  (:require ["@blueprintjs/core" :refer (Navbar Button Alignment)]
            [re-frame.core :as rf]))

(defn top []
  (let [me @(rf/subscribe [:app.domain.firebase/me])]
    [:> Navbar {:class "bg-pink-200"}
     [:> (.-Group Navbar) {:align (.-LEFT Alignment)}
      [:> (.-Heading Navbar) "Tinycanva"]]

     [:> (.-Group Navbar) {:align (.-RIGHT Alignment)}
      [:> Button {:minimal true
                  :text (:email me)}]
      [:> (.-Divider Navbar)]
      [:> Button {:minimal true
                  :text "Logout"
                  :onClick #(rf/dispatch [:app.domain.firebase/logout])}]
      ]
     ]))

 will be rendered in all private routes. We have only one such route so far: 

 component. Let's create a component dedicated to this route. Since 

 is a top-level route, its component will go to 

(ns app.pages.graphics
  (:require [app.components.nav :as nav]
            [app.components.auth :as auth]))

(defn page []
  [auth/private
   [nav/top]
   [:div "Graphics List"]])

The graphics component renders the string 

 component. It signifies that this component can only be accessed by a logged-in user. We have not created the 

---
title: How to Build Reusable Containers for Clojure Apps with Reagent
slug: tc-auth-containers
description: We have authenticated our users, but now they're stuck on the login screen. This chapter is about building re-usable containers to redirect users to authorized pages.
code: https://gitlab.com/fullstackio/books/newline-course-apps/shivek-khurana-tinycanva-clojure-for-react-developers-app/-/tree/main/code/module_04/lesson_04.11/App/source_code/tinycanva?ref_type=heads
---

# Auth containers

Our app has a `/graphics` route, that lists all the graphics a user has created. This will be our root private route - ie a user will be redirected here as soon as she logs in.

For common components like navigation, auth containers, rich text editors and so on, we'll use the `app.components.*` namespace. This means we'll have three top-level namespaces:

-   `app.domain.*` for domain-specific functionality
-   `app.pages.*` for top-level routes and
-   `app.components.*` for shared components

We'd like to point out again that this is only one way you could do it - feel free to experiment with different structuring for your apps.

## Public container

Let's define a `public` component `app.components.auth/public` that will wrap `/login` and `/register` route components.

The job of this component is to listen to `:a.d.f/me` and redirect the user to `/graphics` route as soon as she logs in. If the user is not logged in, it renders the children (ie the login form):

```clojure { actualFilename=./protected/source_code/tinycanva/src/app/components/auth.cljs endLine=11 startLine=1 statedFilename=tinycanva/src/app/components/auth.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_04/lesson_04.11/protected/source_code/tinycanva/src/app/components/auth.cljs }
(ns app.components.auth
  (:require ["react-router-dom" :refer (Redirect)]
            [re-frame.core :as rf]))



(defn public [& children]
  (let [me @(rf/subscribe [:app.domain.firebase/me])]
    (if me
      [:> Redirect {:to "/graphics"}]
      [:<> children])))
```

The `public` component subscribed to `:a.d.f/me` defined in the last chapter redirects to `/graphics` if a user is logged in.

The argument to the `public` function, `children`, should not be confused with `props.children`. This is a Reagent component. The `children` in this case means the vector of `divs` that make up the login page.

We use `& children` to allow for multiple Hiccup forms like:

```clojure
[auth/public
	[:div "form 1"]
	[:div "form 2"]]
```

If  we used `children`  in place of `& children`, Reagent would only render the last form and ignore all others, ie it would only render `[:div "form 2"]` in the example above.

`:<>` is the shorthand for React Fragment. In React, a component can return only one form. Since we allow the children to be a list of forms, we wrap it in a Fragment so React doesn't complain.

The `Redirect` component from React Router is used to perform the Redirect using a component.

If we wrap the `:a.p.login` component with `auth/public` after we `:require` it, we will get redirected to `/graphics` on successful login:

```clojure { actualFilename=./protected/source_code/tinycanva/src/app/pages/login.cljs endLine=46 startLine=12 statedFilename=tinycanva/src/app/pages/login.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_04/lesson_04.11/protected/source_code/tinycanva/src/app/pages/login.cljs#L12 }
(defn page []
  (let [{:keys [email password]} @state
        login-loading? @(rf/subscribe [:app.domain.firebase/login-loading?])
        login-error @(rf/subscribe [:app.domain.firebase/login-error])
        ]

    [auth/public ;; added public container
     [:div.w-full.h-screen.flex.bg-gray-400
      [:div {:class "w-2/3 md:w-1/3 m-auto bg-white px-4 rounded shadow"}

       [:div.my-4.text-2xl "Login to Tinycanva"]

       [:> InputGroup {:placeholder "Email" :class "mb-2"
                       :leftIcon "envelope" :value email
                       :onChange #(swap! state assoc :email (.. % -target -value))}]

       [:> InputGroup {:value password :leftIcon "key"
                       :onChange #(swap! state assoc :password (.. % -target -value))
                       :placeholder "Password" :type :password}]

       [:> Button {:text "Login" :icon "log-in" :intent (.-PRIMARY Intent)
                   :class "mt-4 mb-2" :loading login-loading?
                   :onClick #(rf/dispatch [:app.domain.firebase/login-with-email @state])
                   }]

       (when login-error
         [:> Callout {:intent (.-DANGER Intent)}
          login-error])

       [:div.my-8.bg-gray
        "New here? " [:> Link {:to "/register" :class "text-sm text-gray-600"} "Register"]

        ]]]]))

(comment
```

```clojure { actualFilename=./protected/source_code/tinycanva/src/app/pages/login.cljs endLine=20 startLine=12 statedFilename=tinycanva/src/app/pages/login.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_04/lesson_04.11/protected/source_code/tinycanva/src/app/pages/login.cljs#L12 }
(defn page []
  (let [{:keys [email password]} @state
        login-loading? @(rf/subscribe [:app.domain.firebase/login-loading?])
        login-error @(rf/subscribe [:app.domain.firebase/login-error])
        ]

    [auth/public ;; added public container
     [:div.w-full.h-screen.flex.bg-gray-400
      [:div {:class "w-2/3 md:w-1/3 m-auto bg-white px-4 rounded shadow"}
```

Notice how all components are now wrapped under `auth/public`. The above example is truncated, you will have more lines of code in your component.

We [created a test user](https://www.newline.co/courses/tinycanva-clojure-for-react-developers/tc-firebase#create-a-test-user) while setting up Firebase. Try to log in with the test credentials and you'll be redirected to `/graphics` route.

![Redirected on successful login](https://d2uusema5elisf.cloudfront.net/courses/tinycanva-clojure-for-react-developers/module_04/lesson_04.11/public/assets/login-redirect.gif)

After logging in, if you try to visit `/login` by manually altering the URL, the app will redirect you to `/graphics`.

## Top navigation and logout UI

It's standard to have a top global nav with some details about the user and associated actions, such as settings, profile, and logout.

Since our users can now log in, let's make them feel at home by showing their email and a logout option. We'll use Blueprint's [`Navbar`](https://blueprintjs.com/docs/#core/components/navbar) component.

Blueprint's `Navbar` has support to align items to the left or right, add headings, dividers, and much more. We recommend checking the component props if you'd like to learn more.

We will create a `Navbar` wrapper and call it `Nav`. `Nav` will be used throughout the application - ie it belongs to `app.components.nav` namespace. We are going to define `app.components.nav/top` component for the top navigation. In an application with multiple nav bars, multiple components can be defined in this namespace:

```clojure { actualFilename=./protected/source_code/tinycanva/src/app/components/nav.cljs endChar=642 endLine=20 startChar=0 startLine=1 statedFilename=tinycanva/src/app/components/nav.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_04/lesson_04.11/protected/source_code/tinycanva/src/app/components/nav.cljs }
(ns app.components.nav
  (:require ["@blueprintjs/core" :refer (Navbar Button Alignment)]
            [re-frame.core :as rf]))

(defn top []
  (let [me @(rf/subscribe [:app.domain.firebase/me])]
    [:> Navbar {:class "bg-pink-200"}
     [:> (.-Group Navbar) {:align (.-LEFT Alignment)}
      [:> (.-Heading Navbar) "Tinycanva"]]

     [:> (.-Group Navbar) {:align (.-RIGHT Alignment)}
      [:> Button {:minimal true
                  :text (:email me)}]
      [:> (.-Divider Navbar)]
      [:> Button {:minimal true
                  :text "Logout"
                  :onClick #(rf/dispatch [:app.domain.firebase/logout])}]
      ]
     ]))
```

-   we subscribe to the logged-in user
-   `bg-pink-200` sets the nav background to a shade of pink (you can try [other colors)](https://tailwindcss.com/docs/background-color)
-   `(.-Group Navbar)` is equal to `Navbar.Group`
-   the `:align` prop helps align the group to either left or right
-   we render a `Navbar.Heading` in the left group
-   we render two buttons in the right group
-   the logout button dispatches `:a.d.f/logout` event (which we haven't created yet)