codefoundries/UniversalRelayBoilerplate

The previous version of this repository with Material-UI 0.18.x and Relay 0.10 is available at Universal Relay Boilerplate Classic. The current version is unfinished and under heavy development.Boilerplate + examples for universal web application with React, Material-UI, Relay, GraphQL, JWT, Node.js, Apache Cassandra.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.Please follow @CodeFoundries and our blog if you are interested in news about the boilerplate.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.React Native. Support will be added back once the refactoring of the web part is done.Pull requests fixing any issues and enhancing the above would be highly appreciated and merged.For the most up to date list of technologies used please go to CodeFoundries.com.Client sideTechnologyDescriptionReact JSLibrary for building Single Page Applications and apps. Often called the 'V' in the MVC model.foundExtensible route-based routing for React applications.React NativeReact 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-fluxRouter for React Native based on new React Native Navigation API.RelayA Javascript framework for building data-driven react applications.Material UILibrary for implementing Material Design in React. All user interface in this kit is built exclusively with Material UI components.material-ui-country-flagsLibrary with flag icons for Material-UI, used for the language selector.material-ui-credit-card-iconsLibrary with icons for all major credit cards.Server sideTechnologyDescriptionNode.jsEvent-driven, non-blocking I/O runtime based on JavaScript that is lightweight and efficient.GraphQLA query language for describing the capabilities and requirements of data models for client‐server applications.GraphiQLAn 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 GraphQLA Node.js express library that allows the creation of GraphQL servers.Isomorphic RelayAdds server side rendering support to React Relay. The boilerplate fully utilizes this library.Data LoaderGeneric 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 CassandraThe 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.JWTJSON Web Tokens is an industry standard RFC 7519 method for representing claims securely between two parties.React HelmetReusable React component will manage all of your changes to the document head with support for document title, meta, link, script, and base tags.Development toolsTechnologyDescriptionFlowStatic type checker, designed to find type errors in JavaScript programs.PrettierAn opinionated code formatter.BabelCompiles ES6/ES7 to ES5. Allows using features from ES6 and ES7 today. Also, used by Relay.WebpackBundles 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 ScriptsGlues all this together in a handy automated build.For the most up to date setup instructions please go to the development setup instructions.Initial Development Machine SetupThe setup is for OS X only. Prerequisites:Install Node.js minimum version: 8.1.0.Install Git minimum version: 5.0.0.Install react-native-cli run npm install -g react-native-cli for app development with React Native only.Install yarn run npm install -g yarnInitial Project setup on local machineIn order to set up the project locally, perform the following steps:ActionNotesgit clone https://github.com/codefoundries/UniversalRelayBoilerplateClone from github. Alternatively, you can download the source and update in some different way.yarnInstall node packages.yarn setup-localSet 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 modeIn 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 locallyInstall 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=localhostCASSANDRA_KEYSPACE=urbConfigure to use Cassandra as default persister: yarn update-default-persister -- cassandra.Create the database with yarn setup-database.Configuring DynamoDB locally with DockerInstall 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 databasesInstructions for other databases will be added as support for those is added.We keep the information about the Universal Relay Boilerplate and Rebar updated on our website:Additional Information About the BoilerplateEnvironment Variables Configuration.Customizing Material-UI Look and Feel.Configuration Folder.NPM Tasks.Project Structure.Troubleshooting.Architecture DetailsThe 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 resourcesThe 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.