Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/futurice/pepperoni-app-kit

Pepperoni - React Native App Starter Kit for Android and iOS
https://github.com/futurice/pepperoni-app-kit

futurice immutable jest pepperoni react-native redux starter-kit

Last synced: 5 days ago
JSON representation

Pepperoni - React Native App Starter Kit for Android and iOS

Awesome Lists containing this project

README 

        
![Pepperoni - Empowered by Futurice](/docs/pepperoni.png?v=2)

Futurice React Native Starter Kit

===



[![Join the chat at https://gitter.im/futurice/pepperoni-app-kit](https://badges.gitter.im/futurice/pepperoni-app-kit.svg)](https://gitter.im/futurice/pepperoni-app-kit?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

[![Build Status](https://travis-ci.org/futurice/pepperoni-app-kit.svg?branch=master)](https://travis-ci.org/futurice/pepperoni-app-kit)

[![React Native](https://img.shields.io/badge/react%20native-0.49.3-brightgreen.svg)](https://github.com/facebook/react-native)

[![Sponsored](https://img.shields.io/badge/chilicorn-sponsored-brightgreen.svg)](http://spiceprogram.org/oss-sponsorship/)

[![License](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/futurice/pepperoni-app-kit/blob/master/LICENSE)



## ⚠️ Deprecation Warning



Dear community, as time moved on so did React Native and we've not been able to provide continous support for pepperoni in the past. We are happy that so many of you found it useful and are looking forward to build new tools in the future.



If you are new to React Native and are looking for ways how to start, [Expo](https://expo.io/) is a great choice or head straight to the [React Native docs](https://facebook.github.io/react-native/docs/getting-started) as it's never been easier to get started with the official setup. 



## Intro



We :green_heart: building apps with React Native, because it helps us create high quality products for both major mobile platforms quickly and cost-effectively.



Getting started on a new app just takes too damn long, though. Most apps need the same basic building blocks and developer infrastructure, and we are bored of reinventing the wheel time and time again.



This Starter Kit reflects the best practices of React Native development we have discovered while building real-world applications for our customers. It is opinionated about tooling, patterns and development practices. It might not be a one-size-fits-all solution for everyone, but feel free to customize it for your needs, or just take inspiration from it.



React Native Starter Kit is a part of [Pepperoni](http://getpepperoni.com), a framework for kickstarting digital product development.



## tltr;



Sounds good and you just want to see how it works? Here is a quick start guide:



```

git clone https://github.com/futurice/pepperoni-app-kit.git

cd pepperoni-app-kit

yarn install

react-native run-ios

```



For further setup instructions please see our [Getting Started](#getting-started) section.



## Contents



:warning: **WORK IN PROGRESS** |

:star: **COMING SOON**



Not all of the below is yet fully implemented



### Application Blueprint



* Always up-to-date [React Native](https://facebook.github.io/react-native/) scaffolding

* Modular and well-documented structure for application code

* [Redux](http://redux.js.org/) and [ImmutableJS](https://facebook.github.io/immutable-js/) for safe and **Reasonaboutable**:tm: state management

* [Redux Loop](https://github.com/raisemarketplace/redux-loop) for Elm-style controlled side effects

* [React Navigation](https://reactnavigation.org/) for awesome navigation with 60fps transitions

* Disk-persisted application state caching for offline support and snappy startup performance

* Clean and testable service layer for interacting with RESTful APIs

* :warning: Sample app to show how to wire it all together

* :star: JSON Web Token authentication

* :star: Multi-environment configuration (dev, staging, production) for iOS and Android

* :star: Built-in error handling and customizable error screens



### Testing Setup



* [Jest](https://facebook.github.io/jest/) for unit testing application code and providing coverage information.

* [Enzyme](https://github.com/airbnb/enzyme) and fully mocked React Native for unit testing UI components

* Utilities for end-to-end integration testing Redux state, including side effects and asynchronous actions



### Development & Deployment Infrastructure



* [Bitrise.io](https://www.bitrise.io) configurations for Continuous Integration and beta app distribution

* :warning: [Google Tag Manager](https://www.google.com/analytics/tag-manager/) analytics

* [Travis CI](https://travis-ci.org/futurice/pepperoni-app-kit) example [configuration](https://github.com/futurice/pepperoni-app-kit/blob/master/.travis.yml) for Android, iOS and Javascript tests.



### Roadmap



* **TODO** :star: [Microsoft Code Push](http://microsoft.github.io/code-push) for instant JavaScript and images update

* **TODO** Crash reporting

* **TODO** Android and iOS UI Testing with Calaba.sh?

* **TODO** Feature flags?



## Getting started



To build your own app on top of the Starter Kit, fork or mirror this repository. For serious use we recommend [mirroring using these instructions](https://help.github.com/articles/duplicating-a-repository/), since you can't make a fork of a public repository private on GitHub. To contribute to Starter Kit development or just playing around, forking is the way to go.



First, give your application a name by running `./support/rename.sh YourAppName`.



Once you have the code downloaded, follow the **[Setup guide](docs/SETUP.md)** to get started.



## Development workflow



After you have set up the project using above instructions, you can use your favorite IDE or text editor to write code, and run the application from the command line. Turn on React Native hot module reloading in the app developer menu to update your application as you code.



To learn how to structure your application and use the Redux application architecture, read the **[Architecture guide](docs/ARCHITECTURE.md)** for more details.



##### Start the application in iOS simulator

```

$ react-native run-ios

```



##### Start the application in Android simulator

(If using the stock emulator, the emulator must be running)

```

$ react-native run-android

```



##### Run unit tests

```

$ npm test

```



##### Run tests every time code changes

```

$ npm run test:watch

```



##### Generate code coverage report

```

$ npm run coverage

```



Read the **[Testing guide](docs/TESTING.md)** for more information about writing tests.



## Debugging



For standard debugging select *Debug JS Remotely* from the React Native Development context menu (To open the context menu, press *CMD+D* in iOS or *D+D* in Android). This will open a new Chrome tab under [http://localhost:8081/debugger-ui](http://localhost:8081/debugger-ui) and prints all actions to the console.



For advanced debugging under **macOS** we suggest using the standalone [React Native Debugger](https://github.com/jhen0409/react-native-debugger), which is based on the official debugger of React Native.

It includes the React Inspector and Redux DevTools so you can inspect React views and get a detailed history of the Redux state.



You can install it via [brew](https://brew.sh/) and run it as a standalone app:

```

$ brew update && brew cask install react-native-debugger

```

> Note: Make sure you close all active chrome debugger tabs and then restart the debugger from the React Native Development context menu.



## Deployment



Read the **[Deployment guide](docs/DEPLOYMENT.md)** to learn how to deploy the application to test devices, app stores, and how to use Code Push to push updates to your users immediately.



## Contributing



If you find any problems, please [open an issue](https://github.com/futurice/pepperoni-app-kit/issues/new) or submit a fix as a pull request.



We welcome new features, but for large changes let's discuss first to make sure the changes can be accepted and integrated smoothly.



## License



[MIT License](LICENSE)



## Credits



This project was initially motivated by [Snowflake](https://github.com/bartonhammond/snowflake), a React Native boilerplate by Barton Hammond. It shares some features and design principles for Pepperoni, but it wasn't the right fit for our needs. At this time Snowflake is more mature, so if you like Pepperoni but didn't agree with something we are doing, you should check it out to see if it's a good fit for your app.