Snowflake

A React-Native starter mobile app, or maybe just an example, or maybe a boilerplate (you decide) for iOS and Android with a single code base, with 2 backends to chose from: a Hapi or Parse Server solution- Demo

Installation

• Install React-Native

Install Snowflake

• Clone snowflake: git clone https://github.com/bartonhammond/snowflake.git

• install dependencies

cd snowflake

npm install

Using Snowflake Hapi Server

Use the local or remote Snowflake Hapi Server

To make things easy for you, the config.example.js has been initialized to use the remote Snowflake Hapi Server which is running on Redhat OpenShift.

This Snowflake Hapi Server is Open Source. It can run either locally or on RedHat OpenShift. For your convince a server is running at: https://snowflakeserver-bartonhammond.rhcloud.com

Please refer to https://github.com/bartonhammond/snowflake-hapi-openshift for more information about the code and instructions for installation and setup of the server.

The following commands are for the client

• Copy the src/lib/config.example.js to src/lib/config.js.
• Note: the .gitignore includes config.js from being committed to GitHub
• Note: you must select either hapiLocal or hapiRemote for the backend as shown below with hapiRemote set as the default.

  backend: {
    hapiLocal: false,
    hapiRemote: true,
    parseLocal: false,
    parseRemote: false
  },

• To run Hapi locally, follow the instructions at https://github.com/bartonhammond/snowflake-hapi-openshift. You will have to install MongoDB and Redis.
• Note: The default is to run remotely on the RedHat OpenShift Snowflake Server so there is nothing more to do if you want to use it! In that case, just use the config.js as is.
• If you want to install and run the Snowflake Hapi Server locally, then update the src/lib/config.js file as shown below.
• Note: use the ip from the ifconfig command for the local. This ip matches the Snowflake Hapi Server setup.
• An example of the url is shown below assuming the ifconfig shows the local ip to be 192.168.0.5
• Note: You don't have to provide the local.url value if you are using the remote

  HAPI: {
    local: {
      url: 'http://192.168.0.5:5000'
    },
    remote: {
      url: 'https://snowflakeserver-bartonhammond.rhcloud.com/'
    }
  }

Using Parse Server

This Snowflake Parse Heroku Server is Open Source. It can run either locally or on Heroku. For your convince a server is running at: https://snowflake-parse.herokuapp.com/parse

Please refer to https://github.com/bartonhammond/snowflake-parse-heroku for more information about the code and instructions for installation and setup of the server.

The following instructions are for the client

• Copy the src/lib/config.example.js to src/lib/config.js.
• Note: the .gitignore includes config.js from being committed to GitHub
• Set parseLocal to true if you are running a local instance of parse-server
• Otherwise, set parseRemote to true to indicate your parse server instance is hosted in the cloud

  backend: {
    hapiLocal: false,
    hapiRemote: false,
    parseLocal: true,
    parseRemote: false
  },

• To setup parse-server, follow the instructions at https://github.com/ParsePlatform/parse-server-example
• Set the local.url value if you are running parse-server local
• Set the remote.url value if you are running parse-server remote

  PARSE: {
    appId: 'snowflake',                              // match APP_ID in parse-server's index.js
    local: {
    	url: 'http://localhost:1337/parse'             // match SERVER_URL in parse-server's index.js
    },
    remote: {
    	url: 'https://enter_your_snowflake_host.com'   // match SERVER_URL in parse-server's index.js
    }
  }

To run:

• For iOS, from the command line, run via command: react-native run-ios or open XCode and load project, Run Product -> Run (⌘+R)
• For Android, from the command line, run via the command: react-native run-android assuming you have an emulator or device running and attached
• To run Jest, npm test
• To debug Jest unit cases, install node_inspector and run npm run test-chrome
• Enjoy!

---

---

Notes

Code is written to JS Standard and validated with Eslint. To setup your favorite editor using the Eslint configuration, see Editors

Navigation is handled with React Native Router Flux. Multiple scenes support Login, Register, and Reset Password. Once successfully logged in, there are 3 more scenes: Logout, Subview, and Profile.

A user can change their Email Address and User Name once they are logged in using the Profile form.

The icons used throughout the app are from React Native Vector Icons, namely using FontAwesome

Form building is extremely easy and consistent by using Tcomb Form Library by using domain models and writing less code.

Using Redux and Immutable, the state of the application is testable with Jest, which includes Snapshot tests currently with 85 tests and ~90% coverage!!!

To ease the pain of Redux Action definitions, Snowflake uses Key Mirror.

Using the Validate.JS Library, all user input is validated. Appropriate messages are displayed to the user guiding them in the input requirements.

Once a user is logged in, their Session State is stored in AsyncStorage so that subsequent usage does not require logging in again.

Snowflake supports multiple languages using I18n with English, French and Spanish.

Snowflake supports Hot Reloading of its state.

Snowflake uses CI with Bitrise.io and has extensive docs and 45+ min of video demonstating implementation.

Snowflake has a choice of servers, either

• Hapi Server that runs on RedHat Openshift and locally.

  See https://github.com/bartonhammond/snowflake-hapi-openshift for more information about the OpenShift Hapi server. The setup instructions below describe how to select the server you desire.

• Parse Server that runs remotely or locally

  See https://github.com/ParsePlatform/parse-server-example for more information.

---

Content

• Editor Configuration
• Screens
• Summary
• Quotes
• Technologies
• Continuous Integration
• Redux State Management
• Hot Reloading
• FAQ
• Source documentation

---

Editor Configuration

Atom

apm install editorconfig es6-javascript javascript-snippets linter linter-eslint language-babel

Sublime

• https://github.com/sindresorhus/editorconfig-sublime#readme
• https://github.com/SublimeLinter/SublimeLinter3
• https://github.com/roadhump/SublimeLinter-eslint
• https://github.com/babel/babel-sublime

Others

• Editorconfig
• ESLint
• Babel Syntax Plugin

Screens

| Platform| Register | Login | Profile | | :------:| :-------: | :----: | :---: | | iOS| | | | | Android |![Android Regis