Kickstart Your React Native Development with Better Boilerplate

Dude—React Native rocks! But, wait a minute...

Beginning a project with React Native can be daunting. So many supporting technologies and ways to start, though helpful, can seem overwhelming when choosing a path forward for your project. Why not just use create-react-native-app and be done with it, you may ask? Well, who doesn't like options? Fortunately, options exist to kick-start your development cycle so you can focus on the core business logic that distinguishes your application from its competitors.

3... 2... 1... Blast off with Ignite CLI!

🔥Ignite CLI is a boilerplate generator for React Native that lets you choose from various project templates to get your React Native project up and running quickly and efficiently. The CLI was born out of Ignite 1, which was was InfiniteRed's sweet boilerplate for your React Native projects. Ignite CLI takes that further, giving you not only the option of where to start, but also let's you add component boilerplate as well. Moreover, it's modular and extensible through an awesome plugin architecture, so if you have an idea about how to make it awesome-er (yes, that is a word...), or you want to add your own boilerplate, you can!

But, why—why Ignite CLI?

You're just full of questions, aren't you? Well, here's why:

• It's easy peasy: You can quickly spin-up ready-to-build apps with modern best-practices baked right in.
• There's no runtime: Zip. Zilch. Nada. Instead of giving you gobs o' dependencies on which to rely, this CLI was built as a developer tool—for your use only, to make your life easier, not bury you in dependency hell.
• It's powerful, yet defined: The best of both worlds here. You get the power of an awesome development tool with great documentation and well-defined behavior on the command-line.
• It's battle-tested, mate: InfiniteRed eats their own dogfood. No, not literally, but figuratively. They use this tool everyday, as do hundreds of other developers for real, live, paying-the-bills client projects. I repeat: this is not a toy™. But it is really fun to play with. 🚀
• You will join an active community of smart developers enjoying a growing list of boilerplates and plugins: You are sure not to be left out in the cold here. The community around Ignite CLI is growing and vibrant, as is the list of available boilerplates and plugins.

I'm sold... So how do I get started with Ignite CLI?

RTFM. 😜Ha!

No, seriously, RTFM. 🤓 Though you might think so by now, this is not a tutorial on how to use Ignite CLI, rather a small compilation of some ways to get your React Native projects started quickly. As such, there is more boilerplate fun to come. However, I would be remiss not to give you something to whet your appetite for Ignite. So here it is.

Make sure you have React Native installed and Node 7.6+. You can check your version of nodeJS by opening a shell and executing node -v. And if you haven't already, install yarn with a simple issuance of npm i -g yarn at the command line to install it globally. Then, again in the shell, simply run:

$ npm i -g ignite-cli
$ ignite new MyAwesomeApp

And, voila! You are now a rocketeer and can blast off with the best of 'em. Don't forget to check out the Github repo for Ignite CLI and you will soon be saying:

$ ignite i love you

Plain Old Boilerplate to Get You Rollin'

Ignite CLI too complicated for you? Too powerful?

If so, the following boilerplate projects are great starting points for your React Native adventures and will surely get your project up to speed, as well.

⭐️ Bonus Points — Advanced readers might already be thinking about the possibilities of extending Ignite CLI with other open-source boilerplate projects. I'm sure the Ignite CLI team would love the idea and the support! Remember this: the only way to keep open-source alive and well is to give back.

🍕 Pepperoni

Pepperoni makes your life easier.

— The Futurice Team, creators of the Pepperoni Project

What is it – and can I eat it?

Well, it is delicious, but sadly, it is not recommended for your diet. However, Pepperoni is a great foundation on which to grow your app:

Pepperoni is a blueprint for building cross-platform mobile experiences rapidly with ready-to-use integrated building blocks for common mobile app features.

The reasons for using Pepperoni are at least threefold:

• It lets you focus on the product first.
• It promises a faster time to market
• It lets your team use one technology, across platforms

Features

Pepperoni is like a pizza packed with ingredients.

• Prebuilt app components/boilerplate for common use cases
• Auth0 login/user management
• User-to-user and group messaging
• Push notifications
• Instant app update deployment

The Scoop

You won't go wrong if you choose Pepperoni for your boilerplate. It's a solid project, active and popular on GitHub. The project took its foundational inspiration from Snowflake, so it uses some of the technologies and patterns found in the project we cover in the next section. Under the hood, you will find Redux and ImmutableJS, together providing Reasonaboutable™ state management. Routing is provided by NavigationExperimental, a bleeding-edge Facebook technology for providing "a different approach to navigation, allowing any view to act as a navigation view and using reducers to manipulate state at a top-level object."

Ready, Set, Go!

To get started on iOS, the process is easy as pie... pizza pie:

$ git clone git@github.com:futurice/pepperoni-app-kit.git
$ cd pepperoni-app-kit
$ yarn install
$ react-native run-ios

Andoroid developers, just substitute that last line with:

$ react-native run-android

After that, you can run the provided shell script to rename your application:

$ ./support/rename.sh YourAppName

Then simply follow the Setup Guide to get started on the road to launch.

❄️ Snowflake

When our mobile dev team jumped into React Native 8 months ago, we couldn’t find concise information. The boilerplates we did find were either lacking or just... well sucked. Keep in mind, this is before such awesome releases as Barton Hammond’s Snowflake.

— Gant Laborde, infinite.red

What is it—and will it melt?

Thankfully, there is no need for meltdown with this project. Snowflake is an opinionated framework that provides a choice of two backends, "a Hapi server or Parse server solution." The Snowflake Hapi Server runs on RedHat OpenShift, which is built on Docker and Kubernetes. Simple instructions walk you through setting up and instance of the server locally, or you can use the convenient development server that the project has for testing purposes. The alternative backend is the Snowflake Parse Heroku Server, which can be run locally or (surprise!!) on Heroku. Again, a development server is already running for your convenience. The backend servers are purely a matter of taste, as performance is quite similar and the API that wraps the backend abstracts out the differences in the servers' intricacies.

Navigation is handled by React Native Router Flux and comes with out-of-the-box scene support for login, register, and reset password. Once your user is logged in, additional scenes handle logout, subview, and user profile. Testing is covered by Jest and code coverage for the project runs at roughly 90%. With state being handled by Redux and Immutable, your app will be easily testable. All this is sweetened with hot reloading of your application, which saves a lot of time during the development process!

Features

Snowflake is unique:

• Session state is handled by AsyncStorage so subsequent usage won't require another login
• User input is handled by Validate.js and appropriate messages are ready to be displayed for invalid user input
• Continuous Integration is supplied by Bitrise.io and backed with a thourough library of documentation and nearly an hour of excellent video instruction
• Form building is extremely easy and uses the popular Tcomb Form Library

The Scoop

What I like most about Snowflake is the baked in continuous integration with Bitrise.io. It is well-documented and makes it easy to test-on-the go during development. Applications turn out better with high-quality code and features that "just work." After using the CI in Snowflake, I found myself wishing some of the other projects had it in their DNA.

The backend server options are also great. Hapi makes me happy and Parse server is a breeze. It is no wonder why Snowflake is not only one of my go-to boilerplates for new React Native Projects, but loved by the development community.

Ready, Set... Snow!

First, get Snowflake from the GitHub repository. Over HTTPS:

$ git clone https://github.com/bartonhammond/snowflake.git MyApp

or SSH:

$ git clone git@github.com:bartonhammond/snowflake.git

Then cd into MyApp and run npm install.

Next, determine which backend server option is best for you and follow the server setup instructions for Hapi or for Parse to shore up the backend.

Then, mush! Get the sled-dogs running and head toward the finish line.

Conclusion

Hopefully this article has given you an idea of some of the best ways developers are using to get their React Native projects up to speed quickly. If you know of any other, better ways to spin-up a new React Native project, feel free to reach out and email me. I'd be happy to update this article to keep it smelling fresh... Cheers, for now!