snowflake

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

---

Summary

1. The application runs on both iOS and Android with a single code base
2. A User can Register, Login, Logout, Reset their Password and modify their Profile
3. The Forms display messages for help and field validation.
4. The Forms are protected when fetching.
5. The Forms display spinner when fetching.
6. Form submission errors are displayed (see above Login)
7. All state changes* are actions to the Redux store.
8. The backend is provided by either a Hapi server or Parse server using the Rest API
9. Every action performed by the UI interfaces with the Redux actions and subsequently to the Redux Store. This reduces the complexity of the JSX Components tremendouslyand makes them easily testable.
10. Jest Unit Tests cover ~90% of the application statements.
11. Demonstrates how to setup React-Native to perform Jest testing with Mock modules
12. Includes ability to debug Jest unit tests with Chrome
13. Instructions and videos for continuous integration with Bitrise.io

---

Quotes

Some quotes from users of Snowflake

Open Source Mag: Learn best of React Native with these open source projects: http://opensourceforu.com/2016/05/learn-best-of-react-native-with-these-open-source-projects/

ICICletech Blog: Mobile App Development With 8 Awesome React-Native Starter Kits: We have listed some of our favorite starter kits and boilerplates to get started quickly. https://www.icicletech.com/blog/react-native-starter-kits

Infinite.Red: Ignite Your Mobile Development:

awesome releases as Barton Hammond’s snowflake.

https://shift.infinite.red/ignite-your-mobile-development-32417590ed3e#.pz7u3djtm

AdtMag: New Community Projects for React Native: Deco IDE and Pepperoni Boilerplate https://adtmag.com/articles/2016/05/26/react-native-projects.aspx Snowflake mentioned

Pepperoni App Kit (see Credits)

This project was initially motivated by Snowflake....you should check it out to see if it's a good fit for your app.

Viktor

Just saw the tweets, still watching the vids. It's awesome!! It's really really high quality, I'm truly amazed

John

project is awesome, thank you for providing it!

Eric:

I've been going through snowflake and love what you have done!

Nikos:

wow new videos, nice

Josh

thanks for the thorough videos!

Patrick

just wanna snowflake is awesome

Justin

Congrats - the project is super helpful

Stephen

Thanks so much for this amazing foundation!

Jim

Neat project

---

Technologies

The following are brief descriptions of the technologies used

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.

What more can I say? It's a fantastic leap forward in providing the ab