Skip to content

Examples on how to setup a ClojureScript web app with tools from the JavaScript ecosystem.

Notifications You must be signed in to change notification settings

DavidVujic/clojurescript-amplified

Repository files navigation

ClojureScript. Amplified.

In this repo, you will find examples on how to setup a ClojureScript web app with tools from the JavaScript ecosystem.

Up and running

If you want to try out the AWS Amplify specific code, you will need to install a CLI from AWS and run some initialization steps. Everything is described in the official Amplify docs.

There's an alias in shadow-cljs.edn named :app-with-amplify that will start up a AWS Amplify enabled app.

Want to try out Storybook or Material-UI, without having to setup AWS Amplify?

If so, then you can safely skip the Amplify init stuff, and just use the :app alias.

Commands
npm install

and

npm run watch

or

npm run watch-with-amplify

Because of AWS Amplify, I had to split the Clojure compilation from the 3rd party JavaScript build by using both shadow-cljs and Webpack. Explained in the blog post Hey Webpack, Hey ClojureScript

If you have started the watch-with-amplify script, also run this in a separate terminal (otherwise you can skip this step):

npm run pack

If you want to run Storybook and the stories available in this repo, there is a script ready for you:

npm run storybook

Emacs user?

You can add a .dir-locals.el to the root of this repo to wire up the shadow-cljs commands, instead of running the npm commands.

Emacs .dir-locals.el example for starting the app with the Material-UI and Storybook examples:

((nil . ((cider-default-cljs-repl . shadow)
         (cider-shadow-default-options . ":app")
         (cider-shadow-watched-builds . (":app" ":stories")))))

For AWS Amplify example code, replace the :app alias with :app-with-amplify, like this:

((nil . ((cider-default-cljs-repl . shadow)
         (cider-shadow-default-options . ":app-with-amplify")
         (cider-shadow-watched-builds . (":app-with-amplify" ":stories")))))

Articles

Develop a ClojureScript web app, using cool tools from the JavaScript ecosystem.

ClojureScript.Amplified.

About ClojureScript and a setup for AWS Amplify, using Webpack

Hey Webpack, Hey ClojureScript

About ClojureScript and Storybook

Component Driven ClojureScript with Storybook

About Clojurescript and Material-UI

Material Design in a Functional World