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.
We have already learned how to set up Shadow projects manually. We have also used the
first-project for code examples in the last module. Unlike
first-project Tinycanva will run in the browser instead of a Node terminal. So, to get the REPL working, we'll need to open the app in a browser, in place of running the node script in the shell.
Create a new project#
The app we are going to build is called Tinycanva. We'll use
create-cljs-app to bootstrap the project:
In time, we'll make changes to the template project.
create-cljs-app automatically installs some modules that we'll cover in this chapter.
Once done, you should see a directory named
tinycanva with the following contents:
The files and directories created by
create-cljs-app might feel overwhelming at first. Let's break it down so we understand what's happening.
Understanding Shadow configuration#
The automatically-generated Shadow config should look similar to this:
By default, we have four builds:
a development server configured to run on port 3000 serving contents from the
a nREPL server configured on port 3333 and one source path
As of now, we should only be concerned with the
:app build target. The other build targets i.e.
:cards are meant for testing the app.
:app build target is configured to call
public/js. Let's check the
main function definition.
As we learned before, the function defined as
:init-fn is called as soon as the app is ready. The generated
app.core namespace is: