feat: support init with custom project directory

__e2e__/init.test.js

@@ -22,27 +22,27 @@ test('init --template fails without package name', () => {
   expect(stderr).toContain('missing required argument');
 });
 
-test('init --template', () => {
-  const templateFiles = [
-    '.buckconfig',
-    '.eslintrc.js',
-    '.flowconfig',
-    '.gitattributes',
-    // should be here, but it's not published yet
-    // '.gitignore',
-    '.watchmanconfig',
-    'App.js',
-    '__tests__',
-    'android',
-    'babel.config.js',
-    'index.js',
-    'ios',
-    'metro.config.js',
-    'node_modules',
-    'package.json',
-    'yarn.lock',
-  ];
+const templateFiles = [
+  '.buckconfig',
+  '.eslintrc.js',
+  '.flowconfig',
+  '.gitattributes',
+  // should be here, but it's not published yet
+  // '.gitignore',
+  '.watchmanconfig',
+  'App.js',
+  '__tests__',
+  'android',
+  'babel.config.js',
+  'index.js',
+  'ios',
+  'metro.config.js',
+  'node_modules',
+  'package.json',
+  'yarn.lock',
+];
 
+test('init --template', () => {
   const {stdout} = run(DIR, [
     'init',
     '--template',
@@ -84,3 +84,21 @@ test('init --template file:/tmp/custom/template', () => {
 
   expect(stdout).toContain('Run instructions');
 });
+
+test('init --template with custom project path', () => {
+  const projectName = 'TestInit';
+  const customPath = 'custom-path';
+
+  run(DIR, [
+    'init',
+    '--template',
+    'react-native-new-template',
+    projectName,
+    '--directory',
+    'custom-path',
+  ]);
+
+  // make sure we don't leave garbage
+  expect(fs.readdirSync(DIR)).toEqual([customPath]);
+  expect(fs.readdirSync(path.join(DIR, customPath))).toEqual(templateFiles);
+});

docs/commands.md

@@ -114,13 +114,15 @@ Output project and dependencies configuration in JSON format to stdout. Used by
 
 > Available since 0.60.0
 
-Usage:
+> **IMPORTANT**: Please note that this command is not available through `react-native-cli`, hence you need to either invoke it directly from `@react-native-community/cli` or `react-native` package which proxies binary to this CLI since 0.60.0, so it's possible to use it with e.g. `npx`.
+
+Usage (with `npx`):
 
 ```sh
-react-native init <projectName> [options]
+npx react-native init <projectName> [directory] [options]
 ```
 
-Initialize new React Native project. You can find out more use cases in [init docs](./init.md).
+Initialize a new React Native project named `<projectName>` in a directory of the same name or specified by an optional `[directory]` argument. You can find out more use cases in [init docs](./init.md).
 
 #### Options
 
@@ -140,10 +142,11 @@ Uses a custom template. Accepts following template sources:
 Example:
 
 ```sh
-react-native init MyApp --template react-native-custom-template
-react-native init MyApp --template typescript
-react-native init MyApp --template file:///Users/name/template-path
-react-native init MyApp --template file:///Users/name/template-name-1.0.0.tgz
+npx react-native init MyApp CustomDirectory
+npx react-native init MyApp --template react-native-custom-template
+npx react-native init MyApp --template typescript
+npx react-native init MyApp --template file:///Users/name/template-path
+npx react-native init MyApp --template file:///Users/name/template-name-1.0.0.tgz
 ```
 
 A template is any directory or npm package that contains a `template.config.js` file in the root with following of the following type:
@@ -164,9 +167,9 @@ Example `template.config.js`:
 
 ```js
 module.exports = {
-  placeholderName: "ProjectName",
-  templateDir: "./template",
-  postInitScript: "./script.js",
+  placeholderName: 'ProjectName',
+  templateDir: './template',
+  postInitScript: './script.js',
 };
 ```
 

packages/cli/src/cliEntry.js

@@ -55,6 +55,10 @@ const handleError = err => {
 // one modified to suit our needs
 function printHelpInformation(examples, pkg) {
   let cmdName = this._name;
+  const argsList = this._args
+    .map(arg => (arg.required ? `<${arg.name}>` : `[${arg.name}]`))
+    .join(' ');
+
   if (this._alias) {
     cmdName = `${cmdName}|${this._alias}`;
   }
@@ -64,7 +68,7 @@ function printHelpInformation(examples, pkg) {
     : [];
 
   let output = [
-    chalk.bold(`react-native ${cmdName}`),
+    chalk.bold(`react-native ${cmdName} ${argsList}`),
     this._description ? `\n${this._description}\n` : '',
     ...sourceInformation,
     `${chalk.bold('Options:')}`,

packages/cli/src/commands/init/index.js

@@ -3,16 +3,18 @@ import init from './init';
 
 export default {
   func: init,
-  name: 'init <packageName>',
-  description: 'initialize new React Native project',
+  name: 'init <projectName> [directory]',
+  description:
+    'Initialize a new React Native project named <projectName> in a directory of the same name or specified by an optional [directory] argument.',
   options: [
     {
       name: '--version [string]',
-      description: 'Version of RN',
+      description: 'Uses a valid semver version of React Native as a template',
     },
     {
       name: '--template [string]',
-      description: 'Custom template',
+      description:
+        'Uses a custom template. Valid arguments are: npm package, absolute directory prefixed with `file://`, Git repository or a tarball',
     },
     {
       name: '--npm',

packages/cli/src/commands/init/init.js

@@ -5,6 +5,8 @@ import fs from 'fs-extra';
 import Ora from 'ora';
 import minimist from 'minimist';
 import semver from 'semver';
+import inquirer from 'inquirer';
+import mkdirp from 'mkdirp';
 import type {ConfigT} from 'types';
 import {validateProjectName} from './validate';
 import DirectoryAlreadyExistsError from './errors/DirectoryAlreadyExistsError';
@@ -22,12 +24,52 @@ import installPods from '../../tools/installPods';
 import {processTemplateName} from './templateName';
 import banner from './banner';
 import {getLoader} from '../../tools/loader';
+import {CLIError} from '@react-native-community/cli-tools';
 
 type Options = {|
   template?: string,
   npm?: boolean,
 |};
 
+function doesDirectoryExist(dir: string) {
+  return fs.existsSync(dir);
+}
+
+function getProjectDirectory({projectName, directory}): string {
+  return path.relative(process.cwd(), directory || projectName);
+}
+
+async function setProjectDirectory(directory) {
+  const directoryExists = doesDirectoryExist(directory);
+  if (directoryExists) {
+    const {shouldReplaceprojectDirectory} = await inquirer.prompt([
+      {
+        type: 'confirm',
+        name: 'shouldReplaceprojectDirectory',
+        message: `Directory "${directory}" already exists, do you want to replace it?`,
+      },
+    ]);
+
+    if (!shouldReplaceprojectDirectory) {
+      throw new DirectoryAlreadyExistsError(directory);
+    }
+
+    await fs.emptyDir(directory);
+  }
+
+  try {
+    mkdirp.sync(directory);
+    process.chdir(directory);
+  } catch (error) {
+    throw new CLIError(
+      `Error occurred while trying to ${
+        directoryExists ? 'replace' : 'create'
+      } project directory.`,
+      error,
+    );
+  }
+}
+
 function adjustNameIfUrl(name, cwd) {
   // We use package manager to infer the name of the template module for us.
   // That's why we get it from temporary package.json, where the name is the
@@ -46,14 +88,19 @@ async function createFromTemplate({
   templateName,
   version,
   npm,
+  directory,
 }: {
   projectName: string,
   templateName: string,
   version?: string,
   npm?: boolean,
+  directory: string,
 }) {
   logger.debug('Initializing new project');
   logger.log(banner);
+
+  await setProjectDirectory(directory);
+
   const Loader = getLoader();
   const loader = new Loader({text: 'Downloading template'});
   const templateSourceDir = fs.mkdtempSync(
@@ -127,31 +174,32 @@ async function installDependencies({
   loader.succeed();
 }
 
-function createProject(projectName: string, options: Options, version: string) {
-  fs.mkdirSync(projectName);
-  process.chdir(projectName);
-
-  if (options.template) {
-    return createFromTemplate({
-      projectName,
-      templateName: options.template,
-      npm: options.npm,
-    });
-  }
+async function createProject(
+  projectName: string,
+  directory: string,
+  version: string,
+  options: Options,
+) {
+  const templateName = options.template || 'react-native';
 
   return createFromTemplate({
     projectName,
-    templateName: 'react-native',
-    version,
+    templateName,
+    // version is "latest" by default, but it's easier for us to treat it as
+    // undefined when the "template" param is passed. Might refactor later
+    version: options.template ? undefined : version,
     npm: options.npm,
+    directory,
   });
 }
 
 export default (async function initialize(
-  [projectName]: Array<string>,
+  [projectName, directory]: Array<string>,
   _context: ConfigT,
   options: Options,
 ) {
+  const rootFolder = process.cwd();
+
   validateProjectName(projectName);
 
   /**
@@ -160,16 +208,21 @@ export default (async function initialize(
    */
   const version: string = minimist(process.argv).version || 'latest';
 
-  if (fs.existsSync(projectName)) {
-    throw new DirectoryAlreadyExistsError(projectName);
-  }
+  const directoryName = getProjectDirectory({
+    projectName,
+    directory: directory || projectName,
+  });
+  const directoryExists = doesDirectoryExist(directoryName);
 
   try {
-    await createProject(projectName, options, version);
+    await createProject(projectName, directoryName, version, options);
 
-    printRunInstructions(process.cwd(), projectName);
+    printRunInstructions(rootFolder, projectName);
   } catch (e) {
     logger.error(e.message);
-    fs.removeSync(projectName);
+    // Only remove project if it didn't exist before running `init`
+    if (!directoryExists) {
+      fs.removeSync(path.resolve(rootFolder, directoryName));
+    }
   }
 });

packages/cli/src/tools/installPods.js

@@ -17,6 +17,10 @@ async function installPods({
   loader?: typeof Ora,
 }) {
   try {
+    if (!(await fs.pathExists('ios'))) {
+      return;
+    }
+
     process.chdir('ios');
 
     const hasPods = await fs.pathExists('Podfile');