CRAFT: Create React App From Template

If you’ve ever used create-react-app and wished you could customize the code it generates, read on.

If you’ve never used create-react-app, start here.

Say Hello to CRAFT

CRAFT (Create React App From Template) is a command-line utility that helps you get started with your new React app using a starting point of your liking: one you created yourself or maybe one someone created for you.

If you provide an SDK of some sort or you want developers to build on top your platform, why not give them a template with all the essentials built in?

CRAFT is open-source, written in JavaScript and available on NPM.

Install

$ npm install -g craftool

Prerequisite it, of course, that you have create-react-app already installed.

$ npm install -g create-react-app

What templates are out there?

CRAFT was just released so not too many. Up to you to create them. But still…

create-react-pwa

The creator of this template doesn’t even know they have created a template. Sneaky! Jeff created this project to show how to build a PWA (Progressive Web App) and shared the code. Since the code is what create-react-app generates plus some PWA goodness, it’s a perfect example of a CRAFT template.

create-react-pwa is available on Github.

FAIL

File API Input Layer (FAIL) is a template I created for myself. It helps me quickly build tools like the Photocreep: PWAs that have the user upload some images and do something with them. More about FAIL here and here.

Using CRAFT

Let’s generate a new app using the FAIL template. CRAFT needs a ZIP file that contains the template. Github already generates those, so we can grab the ZIP from https://github.com/stoyan/fail

You click the “Clone or download” button, then right-click “Download ZIP” and copy the URL which happens to be https://github.com/stoyan/fail/archive/master.zip

Time to run CRAFT:

$ craft MyApp https://github.com/stoyan/fail/archive/master.zip

This command downloads and unzips the template into a new directory called MyApp. It also does some string replacements where all the “fail” mentions turn into “MyApp”. It also tells you what to do next, namely to navigate to the new dir called MyApp and run npm install .

Running CRAFT

Following these instructions sets up all create-react-app stuff.

After npm install .

Next you do as always when working on a create-react-app-created app:

$ npm start .

And you have a new shiny app ready to change the course of the human civilization:

MyApp is ready

And that’s all, folks! Once you’re ready just run npm run build as always with create-react-app and you’re ready to deploy!

$ npm run build

Running the build step

Now copy the contents of the build/ directory to a server near you.

To see what we just did here, go to https://phpied.com/files/craft-myapp

To read more about making your own templates, see the project’s readme.

Next?

It’s you. Create some templates, make your life easier. Share the templates with others, make their lives easier.