Make your own React Native boilerplate with Ignite CLI

Hey everybody!

My team recently shipped ignite-cli as part of our HUGE Ignite CLI beta update. Ignite is now a full fledged extensible interface with support for plugins and other boilerplates.

Ignite used to be just one boilerplate, but now it’s a boilerplate platform. It’s evolved to support a variety of opinions, not just ours, and includes the new Ignite CLI as well as various boilerplates and plugins. You can generate the well-loved Ignite Andross boilerplate(code named “Andross” after the video game villain), which includes React Navigation, Redux, Redux Sagas and more. Or our new “Bowser” boilerplate which introduces TypeScript, mobx-state-tree, and more. Or use one of several other boilerplates in active development!

Okay, Jamon, I get it — your boilerplates are cool. But I want to make my own. — Alan Turing

Wow…you’re in the right place then, Al. Let me show you how to make your own boilerplate and add it to the Ignite CLI ecosystem! (Also, big fan — can I get your autograph?) It’s as easy as:

1. Create a working React Native app
2. Generate a new Ignite plugin
3. Copy over your App files
4. Customize the boilerplate script
5. Customize your generators
6. Test everything
7. Publish and promote!

Create a working app

It’s a good rule of thumb to make a working React Native app first and then backport it into an Ignite boilerplate.

NOTE: If you haven’t installed Ignite CLI yet, follow the instructions on the readme.

Start things off with any starter boilerplate you want. I’ll use the default IR Boilerplate with the minimum option selected.

$ ignite new BossBoilerplate --min
-----------------------------------------------
  (                  )   (
  )\ )   (        ( /(   )\ )    *   )
 (()/(   )\ )     )\()) (()/(  ` )  /(   (
  /(_)) (()/(    ((_)\   /(_))  ( )(_))  )\
 (_))    /(_))_   _((_) (_))   (_(_())  ((_)
 |_ _|  (_)) __| | \| | |_ _|  |_   _|  | __|
  | |     | (_ | | .` |  | |     | |    | _|
 |___|     \___| |_|\_| |___|    |_|    |___|
-----------------------------------------------
An unfair headstart for your React Native apps.
https://infinite.red/ignite
-----------------------------------------------
🔥 igniting app BossBoilerplate
✔ using the Infinite Red boilerplate
✔ added React Native 0.42.0 in 16.03s
✔ added ignite-ir-boilerplate in 5.63s
✔ configured git
🍽 Time to get cooking!
To run in iOS:
  cd BossBoilerplate
  react-native run-ios
To run in Android:
  cd BossBoilerplate
  react-native run-android
To see what ignite can do for you:
  cd BossBoilerplate
  ignite

Now customize the app to your liking. I’m going to rip out a ton of things because, well, I’m the Boss and I can.

How my engineers let me “help”

I did the following:

• Ripped out Redux entirely
• Moved all the styles into the component objects
• Deleted anything not used in the welcome screen
• Renamed Containers to Screens (make sure to update your index.ios.js and index.android.js accordingly)
• Deleted all the tests 😈

Then I spun up the app with react-native run-ios and got this screen:

The app is working well and it’s skinny (unlike me). Let’s turn it into a boilerplate.

Generate a new Ignite plugin

Ignite boilerplates are basically Ignite plugins that have a boilerplate.js file and a boilerplate folder. Ignite CLI has a nifty generator to get you started (make sure to run from some other plugins folder or something). Generate the plugin and then npm install.

$ ignite plugin new boss-boilerplate
? Is this an app boilerplate plugin? Yes
? Will your plugin have an example component? No
? Will your plugin have a generator command? (e.g. ignite generate <mygenerator> <name>) Yes
Creating new plugin: ignite-boss-boilerplate
$ cd ignite-boss-boilerplate
$ npm install

Copy over your App files

Now that we have a boilerplate boilerplate (heh), remove the existing App and Tests folders first, and then move everything from our previous sample app’s App folder over to our plugin’s boilerplate/App folder.

$ cd ../..
$ rm -rf plugins/ignite-boss-boilerplate/boilerplate/App
$ rm -rf plugins/ignite-boss-boilerplate/boilerplate/Tests
$ cp playground/BossBoilerplate/App plugins/ignite-boss-boilerplate/boilerplate/

This copies everything over, so your boilerplate folder looks like this:

Edit the boilerplate/index.js.ejs file to point to the right App.js file:

Notice while you’re in there that we’re accessing <%= props.name %> in this template. That will get replaced with whatever the developer chooses for their App name when using your boilerplate to generate their app.

Customize the boilerplate script

Jump into the boilerplate.js file in the root of your plugin. You can see how Ignite CLI runs the install command to generate a new React Native project and copy over all the files, running some of them through the ejs template engine.

I’m going to remove the Tests folder and git initialization toward the end of the file, because that’s how I roll.

Customize generators

Jump into your plugin.js file in the root of your plugin and remove everything except two empty functions, like this:

const add = async function (context) {}
const remove = async function (context) {}
module.exports = { add, remove }

Normal, non-boilerplate ignite plugins will install NPM packages and configure them and whatnot, but we don’t need to do that in this boilerplate.

Also remove the add and remove tests in ./test. No need for those when our add/remove functions don’t do anything!

Now, let’s customize the generator that was created when we created this plugin. Go into commands/thing.js. Essentially, this command will generate a “Thing” (this could be Component, Saga, Service, whatever). It puts the Thing into the App/Things folder in your generated app.

In this case, I’m going to rename Thing to Screen and generate a component into our App/Screens folder.

I could describe what steps to take, but let me just show you instead in this GIF (you’ll have to click through — this is a big one):

https://cloud.githubusercontent.com/assets/1479215/25786186/61381446-3345-11e7-9036-adba456df00c.gif

Also update your ignite.json file in the root of your plugin to screen as well:

This registers your generator as the default forignite generate screen MyScreen.

Test your boilerplate

Now, the moment of truth!

You can easily generate a new app with your boilerplate by passing in a path to the ignite new command. (Customize this one to point to your actual boilerplate location.)

$ cd ../playground
$ ignite new TestingBoilerplate --boilerplate=/full/path/to/ignite-boss-boilerplate

You should see the boilerplate generating a new project:

Now, cd into the generated app and run react-native run-ios. If you see what you’re expecting to see, you’re in luck!

If not, take a look at what was generated and update your boilerplate accordingly. Then generate another one.

Let’s test the screen generator now.

$ ignite g screen BossScreen

You should see the new screen pop into the right folder like this:

Yay!

Publish your boilerplate

Now that you have a sweet boilerplate ready to go, edit your package.json and get it ready to publish. Remember that Ignite CLI plugins start with ignite-* so keep that prefix on there.

Use npm run shipit to publish to NPM. (You may have to npm login first).

Once it’s on NPM, you can generate with it using this command:

$ ignite new MyAwesomeApp -b boss-boilerplate

Submit pull requests to add to our list of boilerplates and plugin registry. If it’s good quality, we’re happy to promote it from our main Ignite Twitter account, too!

Troubleshooting

Hit us up in the IR Community Slack if you’re having any issues. I’m always happy to help if I can. You can find the source for my demo boilerplate here:

https://github.com/jamonholmgren/ignite-boss-boilerplate

Happy boilerplating!

Jamon Holmgren is cofounder and COO of Infinite Red, a mobile app/web design and dev company based in the San Francisco and Portland areas & across the USA. He lives in WA State with his wife and four kids.