Boilerplate + examples for React Native (iOS, Android), React (isomorphic, Material-UI), Relay, GraphQL, JWT, Node.js, Apache Cassandra, DynamoDB, waterline
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
android Move from URB to URB classic repository Jul 30, 2017
app Move from URB to URB classic repository Jul 30, 2017
configuration Move from URB to URB classic repository Jul 30, 2017
graphql Move from URB to URB classic repository Jul 30, 2017
ios Move from URB to URB classic repository Jul 30, 2017
public Move from URB to URB classic repository Jul 30, 2017
scripts Move from URB to URB classic repository Jul 30, 2017
server Move from URB to URB classic repository Jul 30, 2017
units Move from URB to URB classic repository Jul 30, 2017
webapp Move from URB to URB classic repository Jul 30, 2017
.babelrc Move from URB to URB classic repository Jul 30, 2017
.buckconfig
.editorconfig Move from URB to URB classic repository Jul 30, 2017
.flowconfig Move from URB to URB classic repository Jul 30, 2017
.gitattributes Move from URB to URB classic repository Jul 30, 2017
.gitignore
.jsbeautifyrc Move from URB to URB classic repository Jul 30, 2017
.watchmanconfig Move from URB to URB classic repository Jul 30, 2017
README.md Update README.md Oct 14, 2018
index.android.js Move from URB to URB classic repository Jul 30, 2017
index.ios.js Move from URB to URB classic repository Jul 30, 2017
nodemon.json
package.json Move from URB to URB classic repository Jul 30, 2017
webpack.config.babel.js Move from URB to URB classic repository Jul 30, 2017
yarn.lock Move from URB to URB classic repository Jul 30, 2017

README.md

This repository will be deleted soon

Two of the major building blocks of this boilerplate - Material-UI and Relay have been revamped in their move to version 1.0, including significant changes in the APIs. Implementing them requires a significant amount of change and in many cases requires almost complete rewrite of the existing code. This, coupled with the need for some re-architecture, made us start a new project, which will become the eventual next version of UniversalRelayBoilerplate and Rebar. You can follow the progress at URB Next.

PRs will no longer be accepted, but if you for this repository and continue developing it in any fashing, I will gladly place a link in the Readme.

Universal Relay Boilerplate (URB)

Boilerplate + examples for React Native (iOS, Android), React (isomorphic, Material-UI), Relay, GraphQL, JWT, Node.js, Apache Cassandra, other databases.

Project Overview.

Project Details.

Live demo I - uses in-memory persister.

Live demo II - uses Cassandra persister with Elassandra storage hosted on AWS micro instance.

Updates and Announcements

Please follow @CodeFoundries and our blog if you are interested in news about the boilerplate.

Actively supported features

We make our best to support all the features and the examples in working order. However, there are a few features that we do not have the resources to maintain and test:

  • Windows support. urb-tools-windows contains custom scripts for working on windows, but we do not actively test those as we make changes.
  • DynamoDB support. urb-persister-dynamodb contains the code for working with AWS DynamoDB, but we do not actively test it as we make changes.

Pull requests fixing any issues and enhancing the above would be highly appreciated and merged.

Technologies used in Rebar and Universal Relay Boilerplate

For the most up to date list of technologies used please go to CodeFoundries.com.

Client side

Technology Description
React JS Library for building Single Page Applications and apps. Often called the 'V' in the MVC model.
react-router React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.
React Native React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React.
react-native-router-flux Router for React Native based on new React Native Navigation API.
Relay A Javascript framework for building data-driven react applications.
Material UI Library for implementing Material Design in React. All user interface in this kit is built exclusively with Material UI components.
material-ui-country-flags Library with flag icons for Material-UI, used for the language selector.
material-ui-credit-card-icons Library with icons for all major credit cards.

Server side

Technology Description
Node.js Event-driven, non-blocking I/O runtime based on JavaScript that is lightweight and efficient.
GraphQL A query language for describing the capabilities and requirements of data models for client‐server applications.
GraphiQL An graphical interactive in-browser GraphQL IDE. It allows to test the entire schema provided by GraphQL and can be an excellent tool for exploring the boilerplate, as well as a part of applications built on top of it.
Express GraphQL A Node.js express library that allows the creation of GraphQL servers.
Isomorphic Relay Adds server side rendering support to React Relay. The boilerplate fully utilizes this library.
Data Loader Generic utility to be used as part of your application's data fetching layer to provide a consistent API over various backends and reduce requests to those backends via batching and caching.
Apache Cassandra The right choice when you need scalability and high availability without compromising performance. Linear scalability and proven fault-tolerance on commodity hardware or cloud infrastructure make it the perfect platform for mission-critical data. Cassandra's support for replicating across multiple datacenters is best-in-class, providing lower latency for your users and the peace of mind of knowing that you can survive regional outages.
JWT JSON Web Tokens is an industry standard RFC 7519 method for representing claims securely between two parties.
React Helmet Reusable React component will manage all of your changes to the document head with support for document title, meta, link, script, and base tags.

Development tools

Technology Description
Flow Static type checker, designed to find type errors in JavaScript programs.
Prettier An opinionated code formatter.
Babel Compiles ES6/ES7 to ES5. Allows using features from ES6 and ES7 today. Also, used by Relay.
Webpack Bundles npm packages and the application Java Script into a single file. Includes hot reloading via react-transform-hmr. Also, Webpack can bundle any required CSS.
NPM Scripts Glues all this together in a handy automated build.

Development Setup

For the most up to date setup instructions please go to the development setup instructions.

Initial Development Machine Setup

The setup is for OS X only. Prerequisites:

  • Install Node.js.
  • Install Git.
  • Make sure that Node.js is at least version 6.0 and NPM is at least version 3.
  • In order to speed up NPM run npm set progress=false. This speeds up NPM significantly.
  • Install react-native-cli run npm install -g react-native-cli
  • Install yarn run npm install -g yarn

Initial Project setup on local machine

In order to set up the project locally, perform the following steps:

Action Notes
git clone https://github.com/codefoundries/UniversalRelayBoilerplate Clone from github. Alternatively, you can download the source and update in some different way.
yarn Install node packages.
yarn setup-local Set up default configuration for running the boilerplate.

In addition to the above, you might want to specify JWT_SECRET by modifying the .env file. This step can be skipped if you do not care about the actual security and simply want to get the project running.

Running in development mode

In order to develop, three servers need to be started:

  • Web server.
  • Webpack server.
  • React Native packager.

This can be done with one command:

  • Start application HTTP and Webpack server: yarn dev.

To open the app:

  • Navigate to http://localhost:26005, or whatever IP was assigned when running yarn update-ip or after installation.

To run the iOS app in the emulator:

  • If the IP of your development machine has changed, run yarn update-ip.
  • Run react-native run-ios.

Configuring Cassandra locally

  • Install and configure Cassandra following the steps in Cassandra Installation on Mac.
  • Update the name of the database and the database server in /.env, or use the defaults. The defaults are:
CASSANDRA_CONNECTION_POINTS=localhost
CASSANDRA_KEYSPACE=urb
  • Configure to use Cassandra as default persister: yarn update-default-persister -- cassandra.
  • Create the database with yarn setup-database.

Configuring DynamoDB locally with Docker

  • Install Docker.
  • Navigate to the docker-compose.yml file cd units/urb-persister-DynamoDB.
  • Then run docker-compose up in a new terminal to start up a local dynamo db (or start it via docker Kitematic).
  • Configure to use DynamoDB as default persister: yarn update-default-persister -- DynamoDB.

Other databases

Instructions for other databases will be added as support for those is added.

Further Details

We keep the information about the Universal Relay Boilerplate and Rebar updated on our website:

Additional Information About the Boilerplate

Architecture Details

The following documents explain in detail certain aspects of the architecture in depth:

Additional resources

The following documents, while not explicitly related to the boilerplate, can be useful while running and modifying the kit: