New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CLI: Add support for templates fetched from npm #12548

Closed
wants to merge 6 commits into
from

Conversation

Projects
None yet
6 participants
@mkonicek
Contributor

mkonicek commented Feb 23, 2017

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:
mkonicek/AppTemplateFeedback#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

screenshot 2017-02-23 13 27 03

screenshot 2017-02-23 13 36 47


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

screenshot 2017-02-23 14 13 43

screenshot 2017-02-23 14 11 55

@GantMan

This comment has been minimized.

Show comment
Hide comment
@GantMan

GantMan Feb 23, 2017

Contributor

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.

Contributor

GantMan commented Feb 23, 2017

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.

Show outdated Hide outdated 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);

This comment has been minimized.

@skellock

skellock Feb 23, 2017

Contributor

Lovely! Thank you!

@skellock

skellock Feb 23, 2017

Contributor

Lovely! Thank you!

Show outdated Hide outdated local-cli/generator/templates.js
);
try {
if (yarnVersion) {
execSync(`yarn add ${packageName} --ignore-scripts`, {stdio: 'inherit'});

This comment has been minimized.

@skellock

skellock Feb 23, 2017

Contributor

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.

@skellock

skellock Feb 23, 2017

Contributor

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.

This comment has been minimized.

@GantMan

GantMan Feb 23, 2017

Contributor

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

@GantMan

GantMan Feb 23, 2017

Contributor

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

This comment has been minimized.

@mkonicek

mkonicek Feb 23, 2017

Contributor

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

@mkonicek

mkonicek Feb 23, 2017

Contributor

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

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

@facebook-github-bot

This comment has been minimized.

Show comment
Hide comment
@facebook-github-bot

facebook-github-bot Feb 27, 2017

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

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

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

@mkonicek

This comment has been minimized.

Show comment
Hide comment
@mkonicek

mkonicek Feb 27, 2017

Contributor

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

Contributor

mkonicek commented Feb 27, 2017

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

GaborWnuk pushed a commit to GaborWnuk/react-native that referenced this pull request Feb 28, 2017

CLI: Add support for templates fetched from npm
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:
mkonicek/AppTemplateFeedback#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

dudeinthemirror pushed a commit to dudeinthemirror/react-native that referenced this pull request Mar 1, 2017

CLI: Add support for templates fetched from npm
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:
mkonicek/AppTemplateFeedback#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

dudeinthemirror added a commit to dudeinthemirror/react-native that referenced this pull request Mar 1, 2017

CLI: Add support for templates fetched from npm
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:
mkonicek/AppTemplateFeedback#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

This comment has been minimized.

Show comment
Hide comment
@amoghbanta

amoghbanta Apr 22, 2017

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

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

@jpshelley

This comment has been minimized.

Show comment
Hide comment
@jpshelley

jpshelley May 1, 2017

Contributor

@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?

Contributor

jpshelley commented May 1, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@GantMan

GantMan May 1, 2017

Contributor

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.

Contributor

GantMan commented May 1, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment