Cli: Improve `init` command

[thymikee]

We should look at the react-native init behaviour and think about improving the way it works.

Here are some of the things that could be improved:

• Using custom templates. Right now, when you init a new project with a custom template, it gets applied on top of the default one. This makes it a bit confusing when applying e.g. a Typescript template, where you end up with Flow configuration (left-over from the default template).
• We could make it interactive

Please comment with other improvements/feedback and we will convert them into issues at some point.

[cpojer]

Yes please!

[vovkasm]

In the process of fixing template for upcoming 0.58 release (facebook/react-native#23128) I'am looked at the code and have some notes (copy pasted from discord chat):

In this PR I tried to do minimal changes, but in master I would do some more:
I'm not like the way file renaming works currently (especially this https://github.com/facebook/react-native/blob/0.58-stable/local-cli/generator/copyProjectTemplateAndReplace.js#L126-L133 and https://github.com/facebook/react-native/blob/0.58-stable/local-cli/init/init.js#L93 too hardcoded parts). Both of this parts still in new https://github.com/react-native-community/react-native-cli. I think we should try to introduce some more generic way to process files.

It would be better to have generic and single rule to rename files, I see two potential variants:

1. We always replace pattern like _[a-z] to .[a-z] (but I don't like this much, because then we will need to escape underline character and rule quickly became hard to understand)
2. We have some file that described layout of template, manifest.json for ex. Actually this system is partially exists - remote templates can have dependencies.json and devDependencies.json files, but I propose more regular solution: manifest.json, where we can describe all meta information needed for install this template. For example, for HelloWorld template from 0.58-stable branch, this manifest.json can look like:

{
  "install": [
    "__tests__", // copy __tests__ folder as is into project
    "android",
    "ios",
    "*.js", // copy all .js files into project
    "app.json",
    ["_babel.config.js", "babel.config.js"], // copy file into project and name as `babel.config.js`
    ["_buckconfig", ".buckconfig"],
    ["_flowconfig", ".flowconfig"],
    ["_gitattributes", ".gitattributes"],
    ["_gitignore", ".gitignore"],
    ["_watchmanconfig", ".watchmanconfig"]
  ],
  "dependencies": { // Add dependencies to package.json after copy files
    "react": "{REACT_VERSION}",
    "react-native": "{REACT_NATIVE_VERSION}",
  },
  "devDependencies": { // Add devDependencies to package.json after copy files
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "{REACT_VERSION}"
  },
}

Something like this, may be add some options and some variables to substitute such as APP_NAME, REACT_VERSION etc...

[michalchudziak]

I would like to have an opportunity to choose the language used within the generated template. Even if we keep all the modules written in obj-c and java, we might want to use swift and kotlin as a main native language in the generated app. Flutter CLI allows choosing it in a pretty nice way flutter create -i swift -a kotlin hello (https://flutter.io/docs/development/packages-and-plugins/developing-packages). I think it would be a nice piece of functionality for an init command.

[yleflour]

My issue with templating is the lack of a postInstall script.

If you check react-native-template-typescript a setup.js script needs to be executed manually after the template is copied. It would be great if the templating engine allowed a postinstall script.

For those who would argue about security and unknown scripts being launched, I can add any dependency I want to the template which can itself contain a postinstall script.

[patrickkempff]

I have spend some time today trying to give the init command a cleaner look. I can create a PR when the new improvements of the init command (#241) is merged, any interest?

Video version

[thymikee]

@patrickkempff this is great! I think we could make the ascii image a bit smaller (like 2-3x :D) but it looks pretty neat anyway :)

Feel free to collaborate and review on @Esemesek work 🙂

[patrickkempff]

@thymikee awesome! I made a couple of different variations and sizes. Don't want to "spam" this issue with multiple screenshots so I created a new issue to discuss the ascii art. See https://github.com/react-native-community/react-native-cli/issues/266