{"id":25558955,"url":"https://github.com/davewm/rps-frontend","last_synced_at":"2025-07-03T01:38:30.666Z","repository":{"id":75933122,"uuid":"561057422","full_name":"DaveWM/rps-frontend","owner":"DaveWM","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-11T16:51:32.000Z","size":774,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-23T18:02:36.116Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DaveWM.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-11-02T21:12:25.000Z","updated_at":"2023-01-12T11:26:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"ddd4bd22-2115-4bb2-b72c-ab2dd5356b29","html_url":"https://github.com/DaveWM/rps-frontend","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DaveWM/rps-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveWM%2Frps-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveWM%2Frps-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveWM%2Frps-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveWM%2Frps-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DaveWM","download_url":"https://codeload.github.com/DaveWM/rps-frontend/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveWM%2Frps-frontend/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263244833,"owners_count":23436480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-20T16:26:26.743Z","updated_at":"2025-07-03T01:38:30.652Z","avatar_url":"https://github.com/DaveWM.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rps-frontend\n\nThe front end of a real-time rock-paper-scissors app. The backend is [here](https://github.com/DaveWM/rps-backend).\nBuilt using [re-frame](https://github.com/day8/re-frame).\n\n## Getting Started\n\n### Project Overview\n\n* Architecture:\n[Single Page Application (SPA)](https://en.wikipedia.org/wiki/Single-page_application)\n* Languages\n  - Front end is [ClojureScript](https://clojurescript.org/) with ([re-frame](https://github.com/day8/re-frame))\n  - CSS compilation is [Garden](https://github.com/noprompt/garden) with [Spade](https://github.com/dhleong/spade)\n* Dependencies\n  - UI framework: [re-frame](https://github.com/day8/re-frame)\n  ([docs](https://github.com/day8/re-frame/blob/master/docs/README.md),\n  [FAQs](https://github.com/day8/re-frame/blob/master/docs/FAQs/README.md)) -\u003e\n  [Reagent](https://github.com/reagent-project/reagent) -\u003e\n  [React](https://github.com/facebook/react)\n  - Client-side routing: [bidi](https://github.com/juxt/bidi) and [pushy](https://github.com/kibu-australia/pushy)\n  - CSS rendering: [Garden](https://github.com/noprompt/garden)\n* Build tools\n  - CLJS compilation, dependency management, REPL, \u0026 hot reload: [`shadow-cljs`](https://github.com/thheller/shadow-cljs)\n* Development tools\n  - Debugging: [CLJS DevTools](https://github.com/binaryage/cljs-devtools),\n  [`re-frame-10x`](https://github.com/day8/re-frame-10x)\n\n#### Directory structure\n\n* [`/`](/../../): project config files\n* [`dev/`](dev/): source files compiled only with the [dev](#running-the-app) profile\n  - [`user.cljs`](dev/cljs/user.cljs): symbols for use during development in the\n[ClojureScript REPL](#connecting-to-the-browser-repl-from-a-terminal)\n* [`resources/public/`](resources/public/): SPA root directory;\n[dev](#running-the-app) / [prod](#production) profile depends on the most recent build\n  - [`index.html`](resources/public/index.html): SPA home page\n    - Dynamic SPA content rendered in the following `div`:\n        ```html\n        \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n        ```\n    - Customizable; add headers, footers, links to other scripts and styles, etc.\n  - Generated directories and files\n    - Created on build with either the [dev](#running-the-app) or [prod](#production) profile\n    - `js/compiled/`: compiled CLJS (`shadow-cljs`)\n      - Not tracked in source control; see [`.gitignore`](.gitignore)\n* [`src/rps_frontend/styles.cljs`](src/rps_frontend/styles.cljs): CSS compilation source file (ClojureScript,\n[Garden](https://github.com/noprompt/garden))\n* [`src/rps_frontend/`](src/rps_frontend/): SPA source files (ClojureScript,\n[re-frame](https://github.com/Day8/re-frame))\n  - [`core.cljs`](src/rps_frontend/core.cljs): contains the SPA entry point, `init`\n* [`.github/workflows/`](.github/workflows/): contains the\n[github actions](https://github.com/features/actions) pipelines.\n  - [`test.yaml`](.github/workflows/test.yaml): Pipeline for testing.\n\n\n### Editor/IDE\n\nUse your preferred editor or IDE that supports Clojure/ClojureScript development. See\n[Clojure tools](https://clojure.org/community/resources#_clojure_tools) for some popular options.\n\n### Environment Setup\n\n1. Install [JDK 8 or later](https://openjdk.java.net/install/) (Java Development Kit)\n2. Install [Node.js](https://nodejs.org/) (JavaScript runtime environment) which should include\n   [NPM](https://docs.npmjs.com/cli/npm) or if your Node.js installation does not include NPM also install it.\n5. Clone this repo and open a terminal in the `rps-frontend` project root directory\n\n### Browser Setup\n\nBrowser caching should be disabled when developer tools are open to prevent interference with\n[`shadow-cljs`](https://github.com/thheller/shadow-cljs) hot reloading.\n\nCustom formatters must be enabled in the browser before\n[CLJS DevTools](https://github.com/binaryage/cljs-devtools) can display ClojureScript data in the\nconsole in a more readable way.\n\n#### Chrome/Chromium\n\n1. Open [DevTools](https://developers.google.com/web/tools/chrome-devtools/) (Linux/Windows: `F12`\nor `Ctrl-Shift-I`; macOS: `⌘-Option-I`)\n2. Open DevTools Settings (Linux/Windows: `?` or `F1`; macOS: `?` or `Fn+F1`)\n3. Select `Preferences` in the navigation menu on the left, if it is not already selected\n4. Under the `Network` heading, enable the `Disable cache (while DevTools is open)` option\n5. Under the `Console` heading, enable the `Enable custom formatters` option\n\n#### Firefox\n\n1. Open [Developer Tools](https://developer.mozilla.org/en-US/docs/Tools) (Linux/Windows: `F12` or\n`Ctrl-Shift-I`; macOS: `⌘-Option-I`)\n2. Open [Developer Tools Settings](https://developer.mozilla.org/en-US/docs/Tools/Settings)\n(Linux/macOS/Windows: `F1`)\n3. Under the `Advanced settings` heading, enable the `Disable HTTP Cache (when toolbox is open)`\noption\n\nUnfortunately, Firefox does not yet support custom formatters in their devtools. For updates, follow\nthe enhancement request in their bug tracker:\n[1262914 - Add support for Custom Formatters in devtools](https://bugzilla.mozilla.org/show_bug.cgi?id=1262914).\n\n## Development\n\n### Running the App\n\nStart a temporary local web server, build the app with the `dev` profile, and serve the app,\nbrowser test runner and karma test runner with hot reload:\n\n```sh\nnpm install\nnpx shadow-cljs watch app\n```\n\nPlease be patient; it may take over 20 seconds to see any output, and over 40 seconds to complete.\n\nWhen `[:app] Build completed` appears in the output, browse to\n[http://localhost:8280/](http://localhost:8280/).\n\n[`shadow-cljs`](https://github.com/thheller/shadow-cljs) will automatically push ClojureScript code\nchanges to your browser on save. To prevent a few common issues, see\n[Hot Reload in ClojureScript: Things to avoid](https://code.thheller.com/blog/shadow-cljs/2019/08/25/hot-reload-in-clojurescript.html#things-to-avoid).\n\nOpening the app in your browser starts a\n[ClojureScript browser REPL](https://clojurescript.org/reference/repl#using-the-browser-as-an-evaluation-environment),\nto which you may now connect.\n\n#### Connecting to the browser REPL from your editor\n\nSee\n[Shadow CLJS User's Guide: Editor Integration](https://shadow-cljs.github.io/docs/UsersGuide.html#_editor_integration).\nNote that `npm run watch` runs `npx shadow-cljs watch` for you, and that this project's running build ids is\n`app`, `browser-test`, `karma-test`, or the keywords `:app`, `:browser-test`, `:karma-test` in a Clojure context.\n\nAlternatively, search the web for info on connecting to a `shadow-cljs` ClojureScript browser REPL\nfrom your editor and configuration.\n\nFor example, in Vim / Neovim with `fireplace.vim`\n1. Open a `.cljs` file in the project to activate `fireplace.vim`\n2. In normal mode, execute the `Piggieback` command with this project's running build id, `:app`:\n    ```vim\n    :Piggieback :app\n    ```\n\n#### Connecting to the browser REPL from a terminal\n\n1. Connect to the `shadow-cljs` nREPL:\n    ```sh\n    lein repl :connect localhost:8777\n    ```\n    The REPL prompt, `shadow.user=\u003e`, indicates that is a Clojure REPL, not ClojureScript.\n\n2. In the REPL, switch the session to this project's running build id, `:app`:\n    ```clj\n    (shadow.cljs.devtools.api/nrepl-select :app)\n    ```\n    The REPL prompt changes to `cljs.user=\u003e`, indicating that this is now a ClojureScript REPL.\n3. See [`user.cljs`](dev/cljs/user.cljs) for symbols that are immediately accessible in the REPL\nwithout needing to `require`.\n\n### Running `shadow-cljs` Actions\n\nSee a list of [`shadow-cljs CLI`](https://shadow-cljs.github.io/docs/UsersGuide.html#_command_line)\nactions:\n```sh\nnpx shadow-cljs --help\n```\n\nPlease be patient; it may take over 10 seconds to see any output. Also note that some actions shown\nmay not actually be supported, outputting \"Unknown action.\" when run.\n\nRun a shadow-cljs action on this project's build id (without the colon, just `app`):\n```sh\nnpx shadow-cljs \u003caction\u003e app\n```\n### Debug Logging\n\nThe `debug?` variable in [`config.cljs`](src/cljs/rps_frontend/config.cljs) defaults to `true` in\n[`dev`](#running-the-app) builds, and `false` in [`prod`](#production) builds.\n\nUse `debug?` for logging or other tasks that should run only on `dev` builds:\n\n```clj\n(ns rps-frontend.example\n  (:require [rps-frontend.config :as config])\n\n(when config/debug?\n  (println \"This message will appear in the browser console only on dev builds.\"))\n```\n\n## Production\n\nBuild the app with the `prod` profile:\n\n```sh\nnpm install\nnpm run release\n```\n\nPlease be patient; it may take over 15 seconds to see any output, and over 30 seconds to complete.\n\nThe `resources/public/js/compiled` directory is created, containing the compiled `app.js` and\n`manifest.edn` files.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavewm%2Frps-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavewm%2Frps-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavewm%2Frps-frontend/lists"}