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?
$ 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…
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.
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.
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
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 .
Following these instructions sets up all
Next you do as always when working on a
$ npm start .
And you have a new shiny app ready to change the course of the human civilization:
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
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.
It’s you. Create some templates, make your life easier. Share the templates with others, make their lives easier.