CLI: Add support for templates fetched from npm #12548

mkonicek · 2017-02-23T15:35:59Z

This PR allows anyone to publish templates for React Native.

It's possible for people to publish modules for React Native, we should also support custom templates. A suggestion from a Cordova mantainer where they did the same thing suggests this is useful:
https://github.com/mkonicek/AppTemplateFeedback/issues/1

How it works

I published a sample template react-native-template-demo.

(GitHub: https://github.com/mkonicek/react-native-template-demo)

With this PR anyone can then use that template:

react-native init MyApp --template demo

The convention is: if someone publishes an npm package called react-native-template-foo, people can use it by running react-native init MyApp --template foo.

What's supported

Use a template called react-native-template-demo from npm:

react-native init MyApp --template demo

Use a local template:

react-native init MyApp --template file:///path_to/react-native-template-demo

Use a template from a https:// or git:// URL:

react-native init MyApp --template git://.../react-native-template-demo

Test plan

Published the stock 'navigation' template to npm under the name 'demo':
https://www.npmjs.com/package/react-native-template-demo

Also added a native dependency (react-native-vector-icons) to the template to test that linking native dependencies works.

Generated app works:

react-native init MyApp --template demo

MyApp/package.json contains all the dependencies of the template (react-navigation, react-native-vector-icons)
Xcode and Gradle build files of MyApp contain react-native-vector-icons

Checked that existing workflows still work:

Built-in template (local-cli/templates/HelloNavigation):

react-native init MyApp --template navigation

The app works (screenshots are the same as above).

Checked that existing workflows still work:

No template:

react-native init MyApp

GantMan · 2017-02-23T16:27:02Z

Code looks great! Philosophically, I'm wondering if you should keep built in templates. Since a template being built in would be extra overhead and need to be exclusive. You'll have to have a rule-set on who's PRs can be built in and who's not. Regardless of size implications, this puts an interesting onus on the PR-review team.

My suggestion is go 100% npm, with a purely documentation based guide of examples. This feels more OSS and keeps the templates as proper tool for the community.

Also, as a code management initiative, templates being in their own repo and outside the local-cli feels right.

skellock

Thank you.

skellock · 2017-02-23T17:15:38Z

local-cli/generator/templates.js

+  } else {
+    // templateKey is e.g. 'ignite',
+    // use the template react-native-template-ignite from npm
+    createFromNpmTemplate(templateKey, destPath, newProjectName, yarnVersion);


Lovely! Thank you!

skellock · 2017-02-23T17:22:47Z

local-cli/generator/templates.js

+  );
+  try {
+    if (yarnVersion) {
+      execSync(`yarn add ${packageName} --ignore-scripts`, {stdio: 'inherit'});


I just went through this process on Ignite 2 the other day.

The developer experience of having to push up to npm to test your package is pretty painful. It'd be great to support local folder installs as well.

This could be a future feature, of course... but... if you do go the route of supporting local folder installs... 🐲🐲🐲 BEWARE THE CACHES 🐲🐲🐲

https://github.com/infinitered/ignite/blob/master/packages/ignite-cli/src/commands/add.js#L46

^ not pretty nor proud... however, it works. and i cannot figure out the same strategy for npm yet.

Yeah, take heed on the npm cache if you do local folders :(

Thanks, this is a very good point. I'll add support for using templates from local folders.

facebook-github-bot · 2017-02-27T16:09:58Z

@mkonicek has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

mkonicek · 2017-02-27T16:35:55Z

Thanks for the review @GantMan. Addressed comments, merging.

Summary: This PR allows anyone to publish templates for React Native. It's possible for people to publish modules for React Native, we should also support custom templates. A suggestion from a Cordova mantainer where they did the same thing suggests this is useful: https://github.com/mkonicek/AppTemplateFeedback/issues/1 I published a sample template [react-native-template-demo](https://www.npmjs.com/package/react-native-template-demo). (GitHub: https://github.com/mkonicek/react-native-template-demo) With this PR anyone can then use that template: `react-native init MyApp --template demo` The convention is: if someone publishes an npm package called `react-native-template-foo`, people can use it by running `react-native init MyApp --template foo`. Use a template called `react-native-template-demo` from npm: `react-native init MyApp --template demo` Use a local template: `react-native init MyApp --template file:///path_to/react-native-template-dem Closes facebook#12548 Differential Revision: D4620567 Pulled By: mkonicek fbshipit-source-id: bb40d457a7fec28edb577f08137e73241072de3a

amoghbanta · 2017-04-22T08:38:05Z

is it in future plan to be able to add devDependencies and additional scripts to the template?

jpshelley · 2017-05-01T04:04:56Z

@mkonicek Will there be documentation for how to create a template? Are custom native folders such as Android and iOS allowed for template projects. Suppose I want my template to have a custom native Android Activity/iOS ViewController, is that possible, or is only JS related files observed by the template?

GantMan · 2017-05-01T13:57:57Z

Couple notes: @mkonicek doesn't work with Facebook anymore, but I'm not sure, he might still be supporting this feature.

@jpshelley - if you want to use Ignite, we have docs etc on using our template/plugin system, and any gaps you find I'd be happy to help with. https://github.com/infinitered/ignite/blob/master/docs/advanced-guides/creating-boilerplates.md

Disclaimer: It doesn't come with react-native, but it has quite a few features to help plugins etc.

Summary: This PR allows anyone to publish templates for React Native. It's possible for people to publish modules for React Native, we should also support custom templates. A suggestion from a Cordova mantainer where they did the same thing suggests this is useful: https://github.com/mkonicek/AppTemplateFeedback/issues/1 I published a sample template [react-native-template-demo](https://www.npmjs.com/package/react-native-template-demo). (GitHub: https://github.com/mkonicek/react-native-template-demo) With this PR anyone can then use that template: `react-native init MyApp --template demo` The convention is: if someone publishes an npm package called `react-native-template-foo`, people can use it by running `react-native init MyApp --template foo`. Use a template called `react-native-template-demo` from npm: `react-native init MyApp --template demo` Use a local template: `react-native init MyApp --template file:///path_to/react-native-template-dem Closes facebook/react-native#12548 Differential Revision: D4620567 Pulled By: mkonicek fbshipit-source-id: bb40d457a7fec28edb577f08137e73241072de3a

facebook-github-bot added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Feb 23, 2017

skellock approved these changes Feb 23, 2017

View reviewed changes

skellock mentioned this pull request Feb 23, 2017

Adds support for React Native templates. infinitered/ignite#731

Merged

mkonicek changed the title ~~CLI: Add support for templates fetched from npm~~ [DO NOT MERGE - WIP] CLI: Add support for templates fetched from npm Feb 24, 2017

Martin Konicek added 6 commits February 27, 2017 12:57

Better error message

6d08905

Link dependencies

865e55c

Copy template from npm

a60614c

Working

3c2b19b

Support URLs when fetching templates

9b7ef68

Revert temp change

274857e

mkonicek force-pushed the custom_template branch from 6ff74d9 to 274857e Compare February 27, 2017 13:18

facebook-github-bot added GH Review: accepted Import Started This pull request has been imported. This does not imply the PR has been approved. and removed GH Review: review-needed labels Feb 27, 2017

mkonicek changed the title ~~[DO NOT MERGE - WIP] CLI: Add support for templates fetched from npm~~ CLI: Add support for templates fetched from npm Feb 27, 2017

facebook-github-bot closed this in 17c175a Feb 27, 2017

lopezjurip mentioned this pull request Feb 28, 2017

Make this project a template lopezjurip/ReactNativeTS#15

Open

amoghbanta mentioned this pull request Apr 23, 2017

Proposal: React Navigation Vs React Native Flux Router / React Router react-everywhere/re-start#14

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CLI: Add support for templates fetched from npm #12548

CLI: Add support for templates fetched from npm #12548

mkonicek commented Feb 23, 2017 •

edited

Loading

GantMan commented Feb 23, 2017 •

edited

Loading

skellock left a comment

skellock Feb 23, 2017

skellock Feb 23, 2017

GantMan Feb 23, 2017

mkonicek Feb 23, 2017

facebook-github-bot commented Feb 27, 2017

mkonicek commented Feb 27, 2017

amoghbanta commented Apr 22, 2017

jpshelley commented May 1, 2017

GantMan commented May 1, 2017

CLI: Add support for templates fetched from npm #12548

CLI: Add support for templates fetched from npm #12548

Conversation

mkonicek commented Feb 23, 2017 • edited Loading

How it works

What's supported

Test plan

GantMan commented Feb 23, 2017 • edited Loading

skellock left a comment

Choose a reason for hiding this comment

skellock Feb 23, 2017

Choose a reason for hiding this comment

skellock Feb 23, 2017

Choose a reason for hiding this comment

GantMan Feb 23, 2017

Choose a reason for hiding this comment

mkonicek Feb 23, 2017

Choose a reason for hiding this comment

facebook-github-bot commented Feb 27, 2017

mkonicek commented Feb 27, 2017

amoghbanta commented Apr 22, 2017

jpshelley commented May 1, 2017

GantMan commented May 1, 2017

mkonicek commented Feb 23, 2017 •

edited

Loading

GantMan commented Feb 23, 2017 •

edited

Loading