An open API service indexing awesome lists of open source software.

https://github.com/pez/cljs-re-frame-full-stack

A simple (and silly) full stack example app using reitit, ring, reagent, re-frame, etc
https://github.com/pez/cljs-re-frame-full-stack

Last synced: 8 months ago
JSON representation

A simple (and silly) full stack example app using reitit, ring, reagent, re-frame, etc

Awesome Lists containing this project

README

          

# Full Stack Clojure / ClojureScript Project with re-frame

## Setup

First, install the dependencies with npm:

yarn

Then, you can start the frontend service with:

clj -M:frontend

You find the application at http://localhost:8700.

Start the backend API with this alias:

clj -M:api

Find the backend server's documentation at: http://localhost:3000

## Using Calva

When you are using Calva, you can start frontend and backend in one REPL Session by using the jack-in command, then choosing `deps.edn + shadow-cljs` and `:frontend` as the preferred alias. In the last dialog, choose `:app`.

To start the backend, load `api.clj` into your repl and call the main-function.

### Demo (check also Shortcuts below)

https://user-images.githubusercontent.com/1507474/174399574-2fa629a3-2260-4f87-92cb-7ce6de8d8a79.mp4

Better quality video is available at [YouTube](https://youtu.be/qFh9c_fNpjM)

### Shortcut Advices

It is especially great if you have a REPL to be able to interact with the code directly from the editor. There are a few keyboard shortcuts for this, which you can
configure them as you like. These are my (@n2o) recommendations:

- `C-c C-c` (Control C, Control C): Evaluates S-Expression (thus sends the
current code from the cursor to the REPL).
- `C-c C-k`: Loads all the code from the file into the REPL.
- `C-c right`: Moves the closing parenthesis one expression further to the right.
- `C-c left`: Moves the closing parenthesis one expression back to the left.
- `C-c C-d`: If you have accidentally created an endless loop, cancel the last expression with this abbreviation.

To install the shortcuts, open the Keyboard Shortcuts in VSCode under Preferences. In the top right-hand corner you will find an icon with which you can open the configuration file.

There you can add the following entries.

```json
[
{
"key": "ctrl+c ctrl+c",
"command": "calva.evaluateCurrentTopLevelForm",
"when": "calva:connected"
},
{
"key": "ctrl+c ctrl+d",
"command": "calva.interruptAllEvaluations",
"when": "calva:connected"
},
{
"key": "ctrl+c ctrl+k",
"command": "calva.loadFile",
"when": "calva:connected"
},
{
"key": "ctrl+c right",
"command": "paredit.slurpSexpForward",
"when": "calva:keybindingsEnabled && editorTextFocus && editorLangId == 'clojure' && editorLangId == 'clojure' && paredit:keyMap =~ /original|strict/"
},
{
"key": "ctrl+c left",
"command": "paredit.barfSexpForward",
"when": "calva:keybindingsEnabled && editorTextFocus && editorLangId == 'clojure' && editorLangId == 'clojure' && paredit:keyMap =~ /original|strict/"
}
]
```