Skip to content

Commit

Permalink
Updated docs
Browse files Browse the repository at this point in the history
  • Loading branch information
mcnamee committed Dec 28, 2017
1 parent e0bf102 commit 0f32fe6
Show file tree
Hide file tree
Showing 18 changed files with 270 additions and 501 deletions.
18 changes: 18 additions & 0 deletions ISSUE_TEMPLATE.md
@@ -0,0 +1,18 @@
<!--- Provide a general summary of the issue in the Title above -->

### Help us reproduce - tell us about your environment
<!--- Provide a more detailed information of environment you use -->
<!--- Mac or Windows? iOS or Android? Latest version from Master? -->
1.

### Steps to reproduce
<!--- Provide a set of unambiguous steps to reproduce this bug include code, if relevant -->
1.

### Expected result
<!--- Tell us what should happen -->
1.

### Actual result
<!--- Tell us what happens instead -->
1. [Screenshot, logs]
21 changes: 21 additions & 0 deletions LICENSE
@@ -0,0 +1,21 @@
The MIT License (MIT)

Copyright (c) 2016 Matt Mcnamee

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
166 changes: 63 additions & 103 deletions README.md
Expand Up @@ -5,130 +5,90 @@
[![GitHub closed issues](https://img.shields.io/github/issues-closed/mcnamee/react-native-starter-app.svg?style=flat-square)](https://github.com/mcnamee/react-native-starter-app/issues-closed)
[![GitHub pull requests](https://img.shields.io/github/issues-pr/mcnamee/react-native-starter-app.svg?style=flat-square)](https://github.com/mcnamee/react-native-starter-app/issues-pr)

![alt text](/docs/rnsk-logo.jpg "React Native Starter Kit")
# React (Web + Native) Starter Kit

# React Native Starter Kit
#### For when you're looking to build 'the next big thing' for both web and native mobile.

React Native Starter Kit helps you get started with React Native. It contains a bunch of helpful components, building blocks and basic structure to allow you to jump straight into building an app.

What's more, it's now integrated with [Firebase](https://firebase.google.com/), to help you kick start your next full-stack product.

![alt text](/docs/rnsk-screens.jpg "React Native Starter App")


## Available Scripts

### `npm start`

Runs your app in development mode - instructions will be provided in the terminal.

#### `npm test`

Runs the [jest](https://github.com/facebook/jest) test runner on your tests.

#### `npm run web`

Kicks off a webpack server on port 3001, it utilizes hot reloading with some redux-time-machine-magic to have a crazy awesome dev experience where you can rewind and revert actions in your application.

In your browser, open http://localhost:3001

#### `npm run web-bundle`

Creates a minified JavaScript bundle (that also houses the minified css) and places it next to the index.html in web/public that you can serve with any static file server.
---

#### `npm run eject`
## 👋 Intro

This boilerplate launches with a [React web app](https://reactjs.org/) and [React Native app](https://facebook.github.io/react-native/) sharing a single code base. It shares the 'business logic' (_i.e. actions, containers, reducers_) across the platforms, whilst allowing flexibility in View components to ensure your project looks and feels native in each platform.

The project is _super_ helpful to kick-start your next project, as it provides a lot of the common tools you may reach for, all ready to go. Specifically:

- A shared React and React Native structure
- __Flux architecture__
- [Redux](https://redux.js.org/docs/introduction/)
- __Routing and navigation__
- [React Native Router Flux](https://github.com/aksonov/react-native-router-flux) for native mobile
- [React Router](https://github.com/ReactTraining/react-router) for web
- __Data Caching / Offline__
- [Redux Persist](https://github.com/rt2zz/redux-persist)
- __UI Toolkit/s__
- [Native Base](https://nativebase.io/) for native mobile
- [Bootstrap](https://getbootstrap.com/) for web
- __Simpler mobile app development__ through
- [Expo](https://expo.io/)
- __User authentication__ example through
- [Firebase](https://firebase.google.com/)
- __API/Data example__
- Shows how to read/write data from/to an external API (in our case, [Firebase](https://firebase.google.com/))
- __Code Linting__ with
- [Airbnb's JS Linting](https://github.com/airbnb/javascript) guidelines

This will start the process of "ejecting" from Create React Native App's build scripts. You'll be asked a couple of questions about how you'd like to build your project.
---

**Warning:** Running eject is a permanent action (aside from whatever version control system you use). An ejected app will require you to have an [Xcode and/or Android Studio environment](https://facebook.github.io/react-native/docs/getting-started.html) set up.
## 📖 Docs

## Customizing App Display Name and Icon
- [Setup your own Firebase](/docs/firebase.md)
- [Understanding the file structure](/docs/file-structure.md)
- [FAQs & Opinions](/docs/faqs.md)
- [Testing, Deploying & Publishing](/docs/publishing.md)
- [Tests & testing](/docs/testing.md)
- [Contributing to this project](/docs/contributing.md)

You can edit `app.json` to include [configuration keys](https://docs.expo.io/versions/latest/guides/configuration.html) under the `expo` key.
---

To change your app's display name, set the `expo.name` key in `app.json` to an appropriate string.
## 🚀 Getting Started

To set an app icon, set the `expo.icon` key in `app.json` to be either a local path or a URL. It's recommended that you use a 512x512 png file with transparency.
#### 1. Clone and Install

## Writing and Running Tests
```bash
# Clone the repo
git clone https://github.com/mcnamee/react-native-starter-app.git

This project is set up to use [jest](https://facebook.github.io/jest/) for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called `__tests__` or with the `.test` extension to have the files loaded by jest. See the [the template project](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/App.test.js) for an example test. The [jest documentation](https://facebook.github.io/jest/docs/en/getting-started.html) is also a wonderful resource, as is the [React Native testing tutorial](https://facebook.github.io/jest/docs/en/tutorial-react-native.html).
# Install dependencies
npm i
```

## Sharing and Deployment
#### 2.1. Run the _React Native_ App

Create React Native App does a lot of work to make app setup and development simple and straightforward, but it's very difficult to do the same for deploying to Apple's App Store or Google's Play Store without relying on a hosted service.
```bash
# Start the React Native packager
npm start
```

### Publishing to Expo's React Native Community
Instructions are shown in the terminal. You can select to open it in:

Expo provides free hosting for the JS-only apps created by CRNA, allowing you to share your app through the Expo client app. This requires registration for an Expo account.
- An emulator (either iOS or Android)
- Your mobile device with the [Expo app](https://expo.io/). It will reload if you save edits to your files and you will see build errors and logs in the terminal.

Install the `exp` command-line tool, and run the publish command:
#### 2.2. Run the _Web_ App

```bash
# Starts are local live-reload server at:
# http://localhost:3001
npm run web
```
$ npm i -g exp
$ exp publish
```

### Building an Expo "standalone" app

You can also use a service like [Expo's standalone builds](https://docs.expo.io/versions/latest/guides/building-standalone-apps.html) if you want to get an IPA/APK for distribution without having to build the native code yourself.

### Ejecting from Create React Native App
Via webpack, starts a localhost server on port 3001 [http://localhost:3001](http://localhost:3001).

If you want to build and deploy your app yourself, you'll need to eject from CRNA and use Xcode and Android Studio.

This is usually as simple as running `npm run eject` in your project, which will walk you through the process. Make sure to install `react-native-cli` and follow the [native code getting started guide for React Native](https://facebook.github.io/react-native/docs/getting-started.html).
- Save code and it auto refreshes
- Install [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en) into Chrome to see the state of Redux

---

## The API & testing out authentication
We've created a quick little "API server" on [Google's Firebase Platform](https://firebase.google.com/). You can get your own API up and running within minutes too:

1. Signup for a [Firebase account](https://firebase.google.com/)
1. Create a new project - eg. "React Native Starter App"
1. Turn on email/password __Authentication__
1. Enable the __Database__ feature, and import the `firebase-sample-data.json` file found in this repo
1. Get the Firebase project's API credentials, and add them to the respective variables in your `/.env` file (eg. `APIKEY=d8f72k10s39djk29js`). You can get your projects details from Firebase, by clicking on the cog icon, next to overview > 'Add Firebase to your web app'.
1. Add the following __rules__ to the Database

```json
{
"rules": {
".read": false,
".write": false,

"meals": {
".read": true
},

"recipes": {
".read": true,
".indexOn": ["category"]
},

"users": {
"$uid": {
".read": "auth != null && auth.uid == $uid",
".write": "auth != null && auth.uid == $uid",

"firstName": { ".validate": "newData.isString() && newData.val().length > 0" },
"lastName": { ".validate": "newData.isString() && newData.val().length > 0" },
"lastLoggedIn": { ".validate": "newData.val() <= now" },
"signedUp": { ".validate": "newData.val() <= now" },
"role": {
".validate": "(root.child('users/'+auth.uid+'/role').val() === 'admin' && newData.val() === 'admin') || newData.val() === 'user'"
}
}
},

"favourites": {
"$uid": {
".read": "auth != null && auth.uid == $uid",
".write": "auth != null && auth.uid == $uid"
}
}
}
}
```
## 👊 Further Help?

Want to experiment even more with Firebase? Check out the [Firebase Cloud Functions](/docs/README.md)
This repo is a great place to start, but if you'd prefer to sit back and have your new project built for you, [get in touch with me directly](https://mcnam.ee) and I can organise a quote.
3 changes: 2 additions & 1 deletion app.json
@@ -1,5 +1,6 @@
{
"expo": {
"sdkVersion": "22.0.0"
"sdkVersion": "22.0.0",
"privacy": "public"
}
}
6 changes: 3 additions & 3 deletions docs/contributing.md
Expand Up @@ -11,15 +11,15 @@ Please follow [Airbnb's Name Conventions](https://github.com/airbnb/javascript#n
## File Structure & Naming Conventions

- __Structure__
- Follow the file structure [outlined above](#32-file-structure)
- Follow the existing file structure
- __Files__
- Should be `lowercase`, with words separated by hyphens (`-`) eg. `logo-cropped.jpg`
- With the exception of Containers and Components, which should be `PascalCase` - eg. `RecipeView.js`
- __Directories__
- Folder names should be `lowercase,` with words separated by a hyphen (`-`) - eg. `/components/case-studies`
- Folders and files can be named singlular or plural - do what sounds right
- If there's more than 1 file in a directory that are related, group them within their own directory
- eg. if I have 2 components: `/components/RecipeListing.js` and `/components/RecipeView.js`, create a new directory within components called `recipes` and put the 2 files within (removing `Recipes`). The result would be: `/components/recipes/Listing.js` and `/components/recipes/View.js`
- If there's more than a few files in a directory that are related, group them within their own directory
- eg. if I have 2 components: `/components/RecipeListing.js` and `/components/RecipeView.js`, I may choose to create a new directory within components called `recipes` and put the 2 files within (removing `Recipes`). The result would be: `/components/recipes/Listing.js` and `/components/recipes/View.js`

## Linting

Expand Down
47 changes: 47 additions & 0 deletions docs/faqs.md
@@ -0,0 +1,47 @@
# FAQs

## Where did you come up with this?

By no means is this the 'right' or 'only' way to build a React or React Native App. We have however, worked on various apps built with React and React Native, that are 'in the wild' right now. So the ideas presented here are simply based on experience.

## Code Style Guide?

We're using [Airbnb's](https://github.com/airbnb/javascript) JS/React Style Guide with ESLint linting. We just like it :)

## Is this a "Universal" app?

To be clear, No it isn't. We've tried sharing absolutely everything across web and native mobile apps - and have run into road blocks where we've needed to undo the "universalism".

Our opinion for performant and maintainable solutions, is to:

- Share things like data structures, libraries and business logic
- And hand craft optimal user-interfaces for each platform

## React, hah? How do I?

[React Native Express](http://www.reactnativeexpress.com/) is a great site to get you started, specifically:

- [Get your head around ES6](http://www.reactnativeexpress.com/es6)
- [What is JSX?](http://www.reactnativeexpress.com/jsx)
- [What are Components?](http://www.reactnativeexpress.com/components)
- [React State](http://www.reactnativeexpress.com/data_component_state)
- [Redux](http://www.reactnativeexpress.com/redux)

Once you've got your head around the basics, checkout the [React Native](https://facebook.github.io/react-native/) and [React](https://reactjs.org/) websites, specifically

- Go through ['The Basics'](https://facebook.github.io/react-native/docs/props.html)
- Gain an understanding of the [components](https://facebook.github.io/react-native/docs/activityindicator.html) React Native provides out of the box

## How do I customize the App Display Name and Icon?

You can edit `app.json` to include [configuration keys](https://docs.expo.io/versions/latest/guides/configuration.html) under the `expo` key.

To change your app's display name, set the `expo.name` key in `app.json` to an appropriate string.

To set an app icon, set the `expo.icon` key in `app.json` to be either a local path or a URL. It's recommended that you use a 512x512 png file with transparency.

## How do I eject from 'Create React Native App' and Expo?

If you want to build and deploy your app yourself, you'll need to eject from CRNA and use Xcode and Android Studio.

This is usually as simple as running `npm run eject` in your project, which will walk you through the process. Make sure to install `react-native-cli` and follow the [native code getting started guide for React Native](https://facebook.github.io/react-native/docs/getting-started.html).
20 changes: 20 additions & 0 deletions docs/file-structure.md
@@ -0,0 +1,20 @@
# Understanding the File Structure

- `/docs` - Github Repo Documentation
- `/firebase` - Firebase samples
- `/native-base-theme` - React Native's theme (by NativeBase)
- `/src` - Contains the source code for both web & native
- `/actions` - Redux Actions - payloads of information that send data _from_ your application _to_ your store. [Read More &rarr;](https://redux.js.org/docs/basics/Actions.html)
- `/constants` - Shared variables (across platforms)
- `/containers` - 'Smart-components' that connect business logic to presentation [Read More &rarr;](https://redux.js.org/docs/basics/UsageWithReact.html#presentational-and-container-components)
- `/lib` - Utils and custom libraries that are shared across platforms
- `/native` - React Native specific code
- `/components` - 'Dumb-components' / presentational. [Read More &rarr;](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
- `/constants` - Native-specific variables and config
- `/routes`- wire up the router with any & all screens [Read More &rarr;](https://github.com/aksonov/react-native-router-flux)
- `/reducers`- Redux Reducers - Actions dispatch to reducers, which actually change the state [Read More &rarr;](https://redux.js.org/docs/basics/Reducers.html)
- `/store`- Redux Store - hooks up the stores and provides initial/template states [Read More &rarr;](https://redux.js.org/docs/basics/Store.html)
- `/web` - React-Web specific code
- `/components` - 'Dumb-components' / presentational. [Read More &rarr;](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
- `/routes`- wire up the router with any & all screens [Read More &rarr;](https://github.com/aksonov/react-native-router-flux)
- `/styles`- all the SCSS you could dream of
52 changes: 52 additions & 0 deletions docs/firebase.md
@@ -0,0 +1,52 @@
# Get Started with Firebase

We've created a quick little "API server" on [Google's Firebase Platform](https://firebase.google.com/). You can get your own API up and running within minutes too:

1. Signup for a [Firebase account](https://firebase.google.com/)
1. Create a new project - eg. "React Native Starter App"
1. Turn on email/password __Authentication__
1. Enable the __Database__ feature, and import the `firebase-sample-data.json` file found in this repo
1. Get the Firebase project's API credentials, and add them to the respective variables in your `/src/constants/firebase.js` file. You can get your projects details from Firebase, by clicking on the cog icon, next to overview > 'Add Firebase to your web app'.
1. Add the following __rules__ to the Database

```json
{
"rules": {
".read": false,
".write": false,

"meals": {
".read": true
},

"recipes": {
".read": true,
".indexOn": ["category"]
},

"users": {
"$uid": {
".read": "auth != null && auth.uid == $uid",
".write": "auth != null && auth.uid == $uid",

"firstName": { ".validate": "newData.isString() && newData.val().length > 0" },
"lastName": { ".validate": "newData.isString() && newData.val().length > 0" },
"lastLoggedIn": { ".validate": "newData.val() <= now" },
"signedUp": { ".validate": "newData.val() <= now" },
"role": {
".validate": "(root.child('users/'+auth.uid+'/role').val() === 'admin' && newData.val() === 'admin') || newData.val() === 'user'"
}
}
},

"favourites": {
"$uid": {
".read": "auth != null && auth.uid == $uid",
".write": "auth != null && auth.uid == $uid"
}
}
}
}
```

Want to experiment even more with Firebase? Check out the [Firebase Cloud Functions](/firebase/README.md)

0 comments on commit 0f32fe6

Please sign in to comment.