zarazi / react-native-webpack-starter-kit

Future-facing starter kit for React Native apps using ES6/7, Webpack and Babel 6

react-native-webpack-starter-kit

A future-facing starter kit for React Native apps with a minimalistic lean on tooling. Follows the latest React Native stable release. Uses Babel 6 for ES6-style JSX transpilation with ES7 Stage 1 support, and Webpack as a dev server and module bundler. Provides static code linting using ESLint and build output in the same console window, and Source Maps for debugging in the browser.

Leverages react-native-webpack-server. Incorporates sane default linting rules. Uses Greenkeeper to help keep dependencies fresh. Unprescriptive in terms of test frameworks and Flux implementations. Use with EditorConfig to help code consistency between editors. Try with webpack-notifier for desktop notifications on OS X.

For an example implementation take a look at Lumpen Radio. Or check out a few other Awesome React Boilerplates.

Requirements

• Node 4.x or better
• React Native for development
• Xcode for iOS development (optional)
• Android SDK for Android development (optional)
• Android Lollipop or better for Android device testing (optional)

Stack

• React Native for native app development
• Babel for ES6+ support
• Webpack module loader and bundler

Installation

Start by cloning this repo and installing dependencies:

git clone https://github.com/jhabdas/react-native-webpack-starter-kit.git react-native-kit && cd $_
npm install # or simply npm i

Running

Once dependencies are installed, run the kit with:

npm start

This will start a Webpack Dev Server and React Packager. The dev server will watch your JS files for changes and automatically lint and generate the index.[platform].js files expected by your React Native iOS or Android app.

iOS

Open ios/App.xcodeproj in Xcode, build and run the project.

Unlike the app currently generated by react-native init this app removes the UIViewControllerBasedStatusBarAppearance key to prevent the app from logging an error in Xcode and leading to an App Store rejection. The key may be added back, if desired, but its value must be set to true to prevent unexpected rejection during the review process.

Android

For android development use the following:

npm run android-setup-port
react-native run-android

Note Android support in React Native is relatively new, so expect some hiccups. Please see the official Android Setup documentation for getting set-up and the README in RNWS for additional information. And here's some helpful npm scripts courtesy of @niftylettuce.

If you run into any issues please see the Getting Started guide for React Native before submitting an issue.

Testing

As a minimalist seed this project does not introduce a testing framework. Instead it leverages simple static code analysis to help prevent coding mistakes and introduce some good practices for building React Native apps with ES6.

Webpack is configured with a pre-loader to lint the application with ESLint using the Babel parser during app development. And the npm test command may be run at anytime to lint source code otherwise. See the .eslintrc file to adjust linter rules to your liking.

Bundling

Building the app for distribution.

1. Execute npm run bundle to generate the offline JS bundle.
2. For iOS, update AppDelegate.m to load from pre-bundled file on disk.
3. Test the application, create an archive and submit to the store.

Submitting to Store

Please see Submitting to App Store for instructions on iOS. If you have any good Android instructions, please send a PR this way. Good luck and have fun out there!