React recipe (#4)

* Reorganise the recipe repo

create folders for recipe themes basic and misc with the standard default template in default
store the recipes as code in the corresponding folders
add a basic granite and crecto recipe
create a dist folder to store the zipped recipes (for now)
add build script to build distribution zips

* add preact_redux recipe

* authenticate the user with a saved JWT token
add missing stylesheet classes

* wrap the App render in a conditional

* removed redundant temporary scripts

* decode JWT token and set the current user

* add detailed css classes to index and form elements

* add canEditItem function and guard edit/delete buttons

* remove redundant class name suffix
layout show view in rows and columns with field title

* fix typo in controller spec causing failures

* use only AuthenticateJWT auth pipe

* updated documentation

* update JS app bundle

* fix hash params key for reference fields

* use Procs for html format response

* comment out the AuthenticateJWT pipe - it can be uncommented by the user
after creating the User model (which it depends on)

* run crystal spec in each tested recipe
fix some problems app specs

* remove streaming callback from model

* compile and test the react/preact_redux recipe

* add preact_redux.zip file

* use the correct recipe name in recipes_spec.cr

* Sync branch 'master' with 'damianham:react'

* Use new recipe name convention (according to new deployment system)

* add missing div

* fix canEdit{{class_name}} typo

* Add new amber README

* Fixes formatting

* Add responders hack

* Patch react recipe specs

* Update react dependencies except react-router

- Can't update react-router v2 to v4 because too many breaking-changes.
- Still 10+ moderate vulnerabilities on NPM packages

* Update citrine-i18n v0.2.0

* Add missing require for pipes

* Add HACKs as workaround for pending amber issues

* Add amber import to allow delete when react is not used

* Update default compiled bundles with latest dependencies on package.json

* Fix: Changed `spa_ecr.lqd` to `spa.ecr.lqd`

* Use Repo.all on crecto

* Fixes multiples formatting issues

* Add HACK as workaround for crecto auth

* Comment broken specs (waiting bugfix merge)

* Update JWT shard to v0.2.3

* Update (minify) default bundles

* Added missing models

* Fix navbar on ECR layout for modular and react recipe

* Add missing ? on react recipe

* Remove HACKs

* Add user_id to generators in spec_helper

* Enhancements on client, server and README.

- Add steps guide to README
- Add token helper to sign in using token
- Recompile default js bundle
- Add righr error message when component/module URL is not public.
- Fixes auth vs authJWT login

.travis.yml

@@ -10,6 +10,7 @@ env:
   - FILENAME=basic_granite
   - FILENAME=default
   - FILENAME=misc_modular
+  - FILENAME=react_preact_redux
 
 script:
   - crystal spec "spec/${FILENAME}_spec.cr"

Contributions.md

@@ -20,3 +20,7 @@ amber new mynewapp -r default
 ### Miscellaneous
 [misc](https://github.com/amberframework/recipes/blob/master/misc)
 - modular (organizes model,controller,views in modules)
+
+### React
+[react](https://github.com/amberframework/recipes/blob/master/misc)
+- preact_redux (React SPA using the Preact library - modular)

misc/modular/app/shard.yml.lqd

@@ -45,7 +45,7 @@ dependencies:
 
   amber_render_module:
     github: damianham/amber_render_module
-    version: ~> 0.1.0
+    version: ~> 0.1.2
 
 {% if database == "pg" %}
   pg:

misc/modular/app/src/views/layouts/application.ecr.lqd

@@ -12,7 +12,7 @@
     <div class="masthead">
       <div class="container">
         <nav class="nav">
-          <%="<"%>%= render(partial: "layouts/_nav.ecr") %>
+          <%= render(partial: "layouts/_nav.ecr") %>
         </nav>
       </div>
     </div>

react/README.md

@@ -0,0 +1,27 @@
+## preact_redux
+
+A React/Redux SPA using the [Preact](https://preactjs.com) library.
+Preact is a Fast 3kB alternative to React with the same modern API.
+The amber backend serves both html and json.  Also includes a JWT authorisation
+pipe in src/pipes.  Create a new amber app with this template with these commands;
+
+
+```
+amber new mynewapp -r react_preact_redux
+cd mynewapp
+# Default main.bundle.js contains React example for these components, Try them!
+amber g scaffold Category title:string user_id
+amber g scaffold Product title:string description:text category:reference user_id
+amber g scaffold Comment body:text product:reference user_id
+amber g auth User
+```
+
+### Notes
+
+1. `yarn` or `npm` install issue warnings about unmet dependencies for react. This
+is normal as react is provided by preact via the preact-compat shim. **This recipe is using react-route v2 yet**, migration to v4 is work in progress.
+2. Remove the Authenticate pipe from `config/routes.cr` after generating the auth plugin.  
+3. Uncomment AuthenticateJWT pipe from `config/routes.cr` if authentication is required.
+4. If you're using [JWT](https://jwt.io/) then an `user_id` field is required on your **models**, **param validators** and **migrations** to render `edit` and `delete` buttons according to `current_user`.
+5. By default this recipe doesn't provide a form to generate the JSON Web Token, but just to sign in. To generate a token you can use https://jwt.io/ or create your own form using JWT package, with your `secret_key_base` inside your `config/enviroments/development.yml` file and a valid email. Try `amber db seed` and email `admin@example.com`.
+6. If you're getting "Could not load..." error then ensure your models URLs are inside `REGEX_PATHS` in `pipes/authenticate_jwt.cr`.

react/preact_redux/app/.amber.yml.lqd

@@ -0,0 +1,5 @@
+type: app
+database: {{ database }}
+language: {{ language }}
+model: {{ model }}
+recipe: {{ recipe }}

react/preact_redux/app/.babelrc

@@ -0,0 +1,10 @@
+{
+  "sourceMaps": true,
+  "presets": [
+    "env", "react"
+  ],
+  "plugins": [
+    ["transform-decorators-legacy"],
+    ["transform-es2015-spread"]
+  ]
+}

react/preact_redux/app/.encryption_key.lqd

@@ -0,0 +1 @@
+{{ urlsafe_base64 }}

react/preact_redux/app/.gitignore.lqd

@@ -0,0 +1,12 @@
+/doc/
+/lib/
+/.crystal/
+/.shards/
+/.vscode/
+/tmp/
+.env
+.encryption_key
+production.yml
+.DS_Store
+/bin/
+/node_modules

react/preact_redux/app/.travis.yml

@@ -0,0 +1 @@
+language: crystal

react/preact_redux/app/Dockerfile.lqd

@@ -0,0 +1,12 @@
+FROM amberframework/amber:v{{ amber_version }}
+
+WORKDIR /app
+
+COPY shard.* /app/
+RUN crystal deps
+
+COPY . /app
+
+RUN rm -rf /app/node_modules
+
+CMD amber watch

react/preact_redux/app/README.md.lqd

@@ -0,0 +1,50 @@
+# {{ name }}
+
+[![Amber Framework](https://img.shields.io/badge/using-amberframework-orange.svg)](https://amberframework.org)
+
+This is a project written using [Amber](https://amberframework.org). Enjoy!
+
+## Getting Started
+
+These instructions will get a copy of this project running on your machine for development and testing purposes.
+
+Please see [deployment](https://amberframework.gitbook.io/amber/deployment) for notes on deploying the project in production.
+
+## Prerequisites
+
+This project requires [Crystal](https://crystal-lang.org/) ([installation guide](https://crystal-lang.org/docs/installation/)).
+
+## Development
+
+To start your Amber server:
+
+1. Install dependencies with `shards install`
+2. Build executables with `shards build`
+3. Create and migrate your database with `bin/amber db create migrate`. Also see [creating the database](https://amberframework.gitbook.io/amber/guides/create-new-app#creating-the-database).
+4. Start Amber server with `bin/amber watch`
+
+Now you can visit http://localhost:3000/ from your browser.
+
+Getting an error message you need help decoding? Check the [Amber troubleshooting guide](https://amberframework.gitbook.io/amber/troubleshooting), post a [tagged message on Stack Overflow](https://stackoverflow.com/questions/tagged/amber-framework), or visit [Amber on Gitter](https://gitter.im/amberframework/amber).
+
+Using Docker? Please check [Amber Docker guides](https://amberframework.gitbook.io/amber/guides/docker).
+
+## Tests
+
+To run the test suite:
+
+```
+crystal spec
+```
+
+## Contributing
+
+1. Fork it ( https://github.com/{{ github_name }}/{{ name }}/fork )
+2. Create your feature branch ( `git checkout -b my-new-feature` )
+3. Commit your changes ( `git commit -am 'Add some feature'` )
+4. Push to the branch ( `git push origin my-new-feature` )
+5. Create a new Pull Request
+
+## Contributors
+
+- [{{ github_name }}](https://github.com/{{ github_name }}) {{ author }} - creator, maintainer

react/preact_redux/app/config/application.cr.lqd

@@ -0,0 +1,140 @@
+require "./initializers/**"
+
+require "amber"
+
+require "../src/channels/**"
+require "../src/sockets/**"
+
+require "../src/controllers/application_controller"
+require "../src/controllers/**"
+
+# load the module renderer so we can organise our code in modules
+require "amber_render_module"
+require "../src/modules/**"
+
+require "../src/pipes/**"
+
+# About Application.cr File
+#
+# This is Amber application main entry point. This file is responsible for loading
+# initializers, classes, and all application related code in order to have
+# Amber::Server boot up.
+#
+# > We recommend to not modify the order of the require since the order will
+# affect the behavior of the application.
+#
+# With `Amber::Server.configure` block you can redefine the Server configuration
+# settings and use ENVIRONMENT variables and/or values evaluated at runtime.
+#
+# > Important! Yaml configurations are first class citizen and are loaded first before
+# this file, we recommend to use yaml configurations before changing any settings here.
+# Any uncommented setting here will override the YAML with the value set here.
+
+Amber::Server.configure do |settings|
+  # Use your environment variables settings here.
+  #
+  # Name: A name that identifies this application. This is not internally
+  # used by the framework.
+  #
+  # settings.name = "{{ display_name }} web application."
+  #
+  #
+  # Colorize Logging: specifies whether or not to use ANSI color codes
+  # when logging information, display the time and/or to display the severity level.
+  # Defaults to true.
+  #
+  # Log Level defines the verbosity of the Amber logger. This option defaults to
+  # debug for all environments. The available log levels are: debug, info, warn,
+  # error, fatal, and unknown.
+  #
+  # settings.logging.colorize = true
+  # settings.logging.severity = "debug"
+  # settings.logging.filter = %w(password confirm_password)
+  # settings.logging.skip = %w()
+  # settings.logging.context = %w(request headers cookies session params)
+  #
+  #
+  # Secret Key Base: is used for specifying a key which allows sessions
+  # for the application to be verified against a known secure key to
+  # prevent tampering. Applications get Amber.secret_key
+  # initialized to a random key present in `ENV["AMBER_SECRET_KEY"]` or
+  # `.amber_secret_key` in this order.
+  #
+  # settings.secret_key_base= {{ urlsafe_base64 }}
+  #
+  #
+  # Host: is the application server host address or ip address. Useful for when
+  # deploying Amber to a PAAS and likely the assigned server IP is either
+  # known or unknown. Defaults to an environment variable HOST
+  #
+  # settings.host = ENV["HOST"] if ENV["HOST"]?
+  #
+  #
+  # Port Reuse: Amber supports clustering mode which allows to spin
+  # multiple app instances per core. This setting allows to bind the different
+  # instances to the same port. Default this setting to true if the number or process
+  # is grater than 1.
+  #
+  # > Read more about Linux PORT REUSE https://lwn.net/Articles/542629/
+  #
+  # settings.port_reuse = true
+  #
+  #
+  # Process Count: This will enable Amber to be used in cluster mode,
+  # spinning an instance for each number of process specified here.
+  # Rule of thumb, always leave at least 1 core available for system processes/resources.
+  #
+  # settings.process_count = ENV["PROCESS_COUNT"].to_i if ENV["PROCESS_COUNT"]?
+  #
+  #
+  # PORT: This is the port that you're application will run on. Examples would be (80, 443, 3000, 8080)
+  #
+  settings.port = ENV["PORT"].to_i if ENV["PORT"]?
+  #
+  #
+  # Redis URL: Redis is an in memory key value storage. Amber utilizes redis as
+  # a storing option for session information.
+  #
+  # settings.redis_url = ENV["REDIS_URL"] if ENV["REDIS_URL"]?
+  #
+  #
+  # Database URL: This is the database connection string or data file url.
+  # The connection string contains the information to establish a connection to the
+  # database or the data file. Defaults to the database provider you chose at
+  # at app generation.
+  #
+  # settings.database_url = ENV["DATABASE_URL"] if ENV["DATABASE_URL"]?
+  #
+  #
+  # SSL Key File: The private key is a text file used initially to generate a
+  # Certificate Signing Request (CSR), and later to secure and verify connections
+  # using the certificate created per that request. The private key is used to create
+  # a digital signature as you might imagine from the name, the private key should be
+  # ``closely guarded.
+  #
+  # settings.ssl_key_file = ENV["SSL_KEY_FILE"] if ENV["SSL_KEY_FILE"]?
+  #
+  #
+  # SSL Cert File: This represents the signed certificate file. SSL Certificates are
+  # small data files that digitally bind a cryptographic key to an organization's
+  # details. When installed on a web server, it activates the padlock and the https
+  # protocol and allows secure connections from a web server to a browser.
+  #
+  # settings.ssl_cert_file = ENV["SSL_CERT_FILE"] if ENV["SSL_CERT_FILE"]?
+  #
+  #
+  # Session: A Hash that specifies the session storage mechanism, expiration and key to be used
+  # for the application. The `key` specifies the name of the cookie to be used defaults to
+  # "amber.session". The store can be `encrypted_cookie`, `signed_cookie` or `redis`. Expires
+  # when set to 0 means this is indefinitely and is expressed in seconds.
+  #
+  # settings.session = { "key" => "amber.session", "store" => "signed_cookie", "expires" => 0 }
+  #
+  #
+  # Logger: is the logger that Amber and other capable shards in the project will use
+  # instead of writing directly to STDOUT. Supply a custom logger to write to syslog, etc.
+  #
+  # settings.logger = Amber::Environment::Logger.new(File.open("{{ name }}.log", "w"))
+  #
+  #
+end

react/preact_redux/app/config/environments/development.yml.lqd

@@ -0,0 +1,43 @@
+secret_key_base: {{ urlsafe_base64 }}
+port: 3000
+name: {{ name }}
+logging:
+  severity: debug
+  colorize: true
+  filter:
+    - password
+    - confirm_password
+  skip:
+    -
+  context:
+    - request
+    - session
+    - headers
+    - cookies
+    - params
+
+host: 0.0.0.0
+port_reuse: true
+process_count: 1
+# ssl_key_file:
+# ssl_cert_file:
+redis_url: "redis://localhost:6379"
+{% if database == "pg" %}
+database_url: postgres://postgres:@localhost:5432/{{ database_name_base }}_development
+{% elsif database == "mysql" %}
+database_url: mysql://root@localhost:3306/{{ database_name_base }}_development
+{% elsif database == "sqlite" %}
+database_url: sqlite3:./db/{{ database_name_base }}_development.db
+{% endif %}
+
+session:
+  key: amber.session
+  store: signed_cookie
+  expires: 0
+
+smtp:
+  enabled: false
+
+
+secrets:
+  description: Store your development secrets credentials and settings here.