Git Product home page Git Product logo

clojurescript-amplified's Introduction

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

clojurescript-amplified's People

Contributors

davidvujic avatar prestancedesign avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

clojurescript-amplified's Issues

shadow-cljs failing to run watch-with-amplify

If I clone master of this repo and do

npm install
npm run watch-with-amplify

The shadow-cljs run gets a warning and doesn't build the js modules for the app-with-amplify

The build output:

 npm run watch-with-amplify

> [email protected] watch-with-amplify
> shadow-cljs watch app-with-amplify stories

shadow-cljs - config: /Users/rberger/work/aws/clojurescript-amplified/shadow-cljs.edn
shadow-cljs - HTTP server available at http://localhost:8080
shadow-cljs - server version: 2.16.4 running at http://localhost:9630
shadow-cljs - nREPL server started on port 64363
shadow-cljs - watching build :app-with-amplify
shadow-cljs - watching build :stories
[:app-with-amplify] Configuring build.
[:stories] Configuring build.
[:app-with-amplify] Compiling ...
[:stories] Compiling ...
[2021-12-20 23:55:33.193 - WARNING] :shadow.cljs.devtools.server.util/handle-ex - {:msg {:type :start-autobuild}}
AssertionError Assert failed: (map? rc)
	shadow.build.resolve/maybe-babel-rewrite (resolve.clj:205)
	shadow.build.resolve/maybe-babel-rewrite (resolve.clj:205)
	shadow.build.resolve/fn--11790 (resolve.clj:414)
	shadow.build.resolve/fn--11790 (resolve.clj:405)
	clojure.lang.MultiFn.invoke (MultiFn.java:244)
	shadow.build.resolve/find-resource-for-string (resolve.clj:80)
	shadow.build.resolve/find-resource-for-string (resolve.clj:69)
	shadow.build.resolve/resolve-string-require (resolve.clj:452)
	shadow.build.resolve/resolve-string-require (resolve.clj:435)
	shadow.build.resolve/resolve-require (resolve.clj:672)
	shadow.build.resolve/resolve-require (resolve.clj:665)
	shadow.build.resolve/resolve-deps/fn--11704 (resolve.clj:51)
[:stories] Build completed. (436 files, 0 compiled, 0 warnings, 3.33s)

Any idea what's up? I presume this did work. The only things I could think is different is I'm running node v17.2.0. Otherwise everything else is set by the package.json and the shadow-cljs.edn which are unchanged from the repo.

Suggest using `:ns-regexp`

:npm-module takes an optional :ns-regexp which will make it include all namespaces matching that regex. You can use this to completely skip createing the app.stories.core ns and just include them all automatically.

:entries [app.stories.core]

Instead of that you add :ns-regexp "-stories$" and remove :entries and the app.entries.core ns. Less config maintenance over time ;)

npm run watch-with-amplify issue

This issue appear when I try to run watch-with-amplify

[2021-09-11 11:17:11.055 - WARNING] :shadow.cljs.devtools.server.util/handle-ex - {:msg {:type :start-autobuild}}
AssertionError Assert failed: (map? rc)
shadow.build.resolve/maybe-babel-rewrite (resolve.clj:205)
shadow.build.resolve/maybe-babel-rewrite (resolve.clj:205)
shadow.build.resolve/fn--11782 (resolve.clj:414)
shadow.build.resolve/fn--11782 (resolve.clj:405)
clojure.lang.MultiFn.invoke (MultiFn.java:244)
shadow.build.resolve/find-resource-for-string (resolve.clj:80)
shadow.build.resolve/find-resource-for-string (resolve.clj:69)
shadow.build.resolve/resolve-string-require (resolve.clj:452)
shadow.build.resolve/resolve-string-require (resolve.clj:435)
shadow.build.resolve/resolve-require (resolve.clj:672)
shadow.build.resolve/resolve-require (resolve.clj:665)
shadow.build.resolve/resolve-deps/fn--11696 (resolve.clj:51)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.