cybernetics / universalrelayboilerplate

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

Universal Relay Boilerplate (URB)

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

Project Overview.

Project Details.

Live demo.

Updates and Announcements

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

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 created by Facebook in 2012 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.
ESLint	Pluggable linting utility for JavaScript and JSX.
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 CodeFoundries.com.

Initial Development Machine Setup

The setup is for OS X only. Prerequisites:

• Install Node.js.
• Install Git.
• Install Apache Cassandra.
• Make sure that Node.js is at least version 5.0 and NPM is at least version 3.
• In order to speed up NPM run npm set progress=false. This speeds up NPM significantly.

Initial Project setup on local machine

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

• Clone from github. git clone https://github.com/codefoundries/UniversalRelayBoilerplate.
• Install node packages. npm install. You will see errors like Error: ENOENT: no such file or directory, open '.env'.. They can be ignored.
• Perform initial setup. npm run setup-local.
• 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.
• Start the server. npm run prod or npm run dev.
• The application is available at: http://localhost:4444.

Running in development mode

Two separate servers need to be started. The first one is the actual application in development mode. The second server is the webpack server which is to be run at all times for hot replace. This can be done with one command.

• Start application HTTP and Webpack server: npm run dev.

To open the app:

• Navigate to http://localhost:4444, unless you specified a different IP and/or port either manually or by using npm run update-ip.

Configuring to use Cassandra

• Install and configure Cassandra following the steps in Cassandra Installation on Mac.
• Verify that the name of the database in \.env is the name of the database you want.
• Create the database with npm run setup-cassandra-init.
• Configure to use Cassandra with npm run update-da-cassandra.

Further Details

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

Additional Information About the Boilerplate

• Environment Variables Configuration.
• Customizing Material-UI Look and Feel.
• Configuration Folder.
• NPM Tasks.
• Project Structure.
• Troubleshooting.

Architecture Details

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

• Cassandra, meet Relay. Relay, meet Cassandra. Explanation of how Cassandra and Express GraphQL work together.
• Isomorphic React Relay. Explains the approach to isomorphism taken in implementing the starter kit.
• Isomorphic Server Variables. Using variables and settings in an isomorphic application - client rendering, server rendering.
• SEO Using Isomorphic Application With Relay and Helmet. How to make SEO-friendly pages with React, Relay and Helmet.

Additional resources

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

• Cassandra Cheatsheet. List of common commands in CQL.
• Cassandra Installation on Mac. Simple steps for setting up an instance of Cassandra for development.
• Git Cheatsheet. Some useful git commands.
• React Cheatsheet. Techniques for working with React used in the starter kit.
• Where to Store Your JWTs - Cookies vs HTML5 Web Storage. Explains the advantages of using HTTP only cookies.