Keefer is a Yeoman generator to create React/Redux web applications that can be compiled to different platforms, following some good practices from Meedan
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
build
docker
screenshots
src
test
.gitignore
README.md
config.yml.example
package.json
try

README.md

Keefer

This is a Yeoman generator that creates a multi-platform React.js/Redux/ReactNative mobile/web application following some Meedan guidelines. The application receives a URL. Depending on the platform, it comes from different sources:

  • Android application: The URL can be shared with the Keefer-generated application, from the Share menu available in many apps

  • Web: The URL comes in the ?url= request parameter

  • Chrome Extension: The URL can be from the current tab (when the extension is invoked from the toolbar) or from the current link (when the extension is invoked from the contextual menu that opens when a link is right-clicked)

All the examples below are available in the test directory, which is an example of an application generated by Keefer.

Features

  • Technologies: React.js, Redux, Gulp, SASS, React Native
  • Platforms: Compiles as Google Chrome extension (that can be invoked from toolbar or context menu), web application or Android app
  • Documentation: generates license and README
  • NPM scripts for automation: tasks to compile code as Chrome extension, web application or Android app, pack the code, publish extension to Chrome store or local/Ngrok web server and to run tests for all platforms
  • Automated tests: Automated tests infrastructure based on RSpec, Selenium and PhantomJS. Already implements helpers that install the current local version of the Chrome extension and call it from the toolbar and that will start a web server for the web application and test it from the browser
  • Components: includes components for select field (with auto-complete, multi-selection and that remembers the last choice), message screen, URL embed, confirmation window, close button and add Android application to share menu
  • Platform abstraction: the application has acccess to the current URL and to a local storage engine, regardless the platform
  • Theming: Just write the theme in SASS and it will be compiled the right way depending on the platform... also, just add an SVG logo and it will generate the PNGs in all sizes required by the platform
  • Routing: The root component that is generated is a router, that given a view, renders the right component
  • Git: Creates a local Git repository automatically
  • Docker: You can run the generator from inside a Docker container and can run and compile the application inside a generated Docker container as well
  • Relay: Can use Relay to connect to GraphQL and show data (automated tests included)

How to use this template

  • Define settings in config.yml
  • Install Yeoman npm install -g yo
  • Create the generator npm link
  • Generate your application yo keefer
  • Or just run ./try to test it out
  • Your code will be at build
  • Check test for an example of an application generated by Keefer right away

Using Docker

  • Define settings in config.yml
  • Run ./docker/run.sh
  • Your application will be generated in build
  • Refer to its README to know how to proceed

How to implement your generated application

  • Add dependencies to package.json
  • Add configurations to config.json.example
  • Add a logo.svg to src/assets/img/logo
  • If your application connects to external APIs or services, or load scripts, images and styles from external origins, you need to add their hosts to manifest.json.example, sections permissions and content_security_policy
  • Your code should be implemented in src/app... there are some examples there, check for the @Change annotations (npm run change)

How to add a new platform

  • Add the compilation scripts to src/package.json
  • Add the Gulp tasks to the Gulpfile at src
  • Set it up in src/webpack/config.js
  • Document it in the src/README.md
  • Add the specific code to src/src/<platform>
  • Implement the test structure (e.g., load the application) at src/test

Troubleshooting

OSX Users

Sometimes, npm looks for files in a node_modules at parent directories. This can lead to version mismatch problems. Fix npm to not look for modules inside those directories or simply remove any node_modules you have in your home root.

Babel

In order to avoid version problems with Babel, remove any ~/.babelrc file. There is one inside the application already.

TODO

  • Check the issues on Github