Eject CLI command to re-create native folders #12162

ericvicenti · 2017-02-02T02:41:39Z

The iOS and Android native folders of a React Native app can be difficult to maintain. This introduces a new workflow for creating and maintaining the native code of your app.

New Functionality

Now it will be possible to:

Remove the native iOS or Android folders
Create an app.json for your app, with at least a name and displayName
Run react-native eject, and the native code for your app will be generated

Then, as usual, you can run react-native run-ios and react-native run-android, to build and launch your app

For apps that don't have any native code, it will be possible to ignore the ios and android folders from version control.

Test Plan

Eject step tested in RN app by deleting native folders.

@mkonicek, what is the best way to test react-native init?

Followup

As follow-up items, we can enable the following:

Configuring app icon and launch screen from the app.json
Automatically run react-native link for native libraries
Allow app.json to configure app linking
Allow react-native run-[android/ios] to work without any ios or android folder at all
Run your app in Exponent, without ejecting

mkonicek · 2017-02-02T10:39:29Z

Nice! 👍

To test 'react-native init', see https://github.com/facebook/react-native/blob/master/react-native-cli/README.md

mkonicek · 2017-02-02T10:40:18Z

local-cli/eject/eject.js

+const path = require('path');
+const fs = require('fs');
+
+function eject() {


Can you add some comment explaining what this does? People reading this code won't see the commit message from this pull request.

mkonicek · 2017-02-02T10:40:34Z

local-cli/eject/eject.js

+
+  const doesIOSExist = fs.existsSync(path.resolve('ios'));
+  const doesAndroidExist = fs.existsSync(path.resolve('android'));
+  if (doesIOSExist && doesAndroidExist) {


What if just one exists?

then we don't want to show this error because maybe the user just wants to generate one

mkonicek · 2017-02-02T10:41:10Z

local-cli/eject/eject.js

+function eject() {
+
+  const doesIOSExist = fs.existsSync(path.resolve('ios'));
+  const doesAndroidExist = fs.existsSync(path.resolve('android'));


nit: doesIOSFolderExist, doesAndroidFolderExist

mkonicek · 2017-02-02T10:42:13Z

local-cli/eject/eject.js

+  try {
+    appConfig = require(path.resolve('app.json'));
+  } catch(e) {
+    console.error('Eject requires an `app.json` config file to be located in your app root, and it must at least specify a `name` and a `displayName`.');


nit: in your app root directory.

It would also be very helpful to print the absolute path (path.resolve('app.json')) as part of the error message to make it clear what you mean by app root directory.

mkonicek · 2017-02-02T10:42:31Z

local-cli/eject/eject.js

+    appConfig = require(path.resolve('app.json'));
+  } catch(e) {
+    console.error('Eject requires an `app.json` config file to be located in your app root, and it must at least specify a `name` and a `displayName`.');
+    process.exit();


What's the error code? Should not be 0?

mkonicek · 2017-02-02T10:44:06Z

local-cli/eject/eject.js

+  const appName = appConfig.name;
+  const displayName = appConfig.displayName;
+  if (!appName || !displayName) {
+    console.error('App `name` and `displayName` must be defined in the `app.json` config file.');


Consider explaining in this message what name and displayName are - if they are missing I get this message and want to fill them in. I understand an app needs a name but have no idea what a displayName is - is it a label displayed under the icon on my home screen? Not sure.

Ok I'll explain that in the error message

mkonicek · 2017-02-02T10:44:08Z

local-cli/eject/eject.js

+  const displayName = appConfig.displayName;
+  if (!appName || !displayName) {
+    console.error('App `name` and `displayName` must be defined in the `app.json` config file.');
+    process.exit();


Oops, will put error code 1

mkonicek · 2017-02-02T10:45:13Z

local-cli/eject/eject.js

+    process.exit();
+  }
+
+  const templateOptions = { displayName };


Is this { displayName: displayName }? I always get confused by this syntax.

mkonicek · 2017-02-02T10:45:47Z

local-cli/generator/copyProjectTemplateAndReplace.js

@@ -57,6 +57,7 @@ function copyProjectTemplateAndReplace(srcPath, destPath, newProjectName, option
      absoluteSrcFilePath,
      path.resolve(destPath, relativeRenamedPath),
      {
+        'Hello App Name': options.displayName || newProjectName,


mkonicek · 2017-02-02T10:46:50Z

local-cli/templates/HelloWorld/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "HelloWorld",
+  "displayName": "HelloWorld"


Should this be "Hello World"?

Nope, because this is generated in the init step, where the name is all that exists.

mkonicek · 2017-02-02T10:46:57Z

local-cli/templates/HelloWorld/android/app/src/main/res/values/strings.xml

@@ -1,3 +1,3 @@
 <resources>
-    <string name="app_name">HelloWorld</string>
+    <string name="app_name">Hello App Name</string>


Maybe better use "Hello World"? Is this what's displayed on the home screen? I wouldn't get what "Hello App Name" means.

mkonicek · 2017-02-02T10:47:03Z

local-cli/templates/HelloWorld/ios/HelloWorld/Info.plist

@@ -4,6 +4,8 @@
 <dict>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
+	<key>CFBundleDisplayName</key>
+	<string>Hello App Name</string>


Should this be "Hello World"?

This is the display name so I wanted to make the replacement string very obvious. I'll rename it to "Hello App Display Name"

mkonicek · 2017-02-02T10:48:40Z

What is the difference between name and displayName? Where is display name used? Is that the label on the home screen?

Will docs for eject come in a separate PR? Probably deserves a new CRNA Guide on the website.

mkonicek · 2017-02-03T15:43:24Z

@ericvicenti Feel free to merge this yourself once you check my comments (feel free to address those you agree with, this PR looks pretty good!).

You can do that using (at)facebook-github-bot shipit-ninja.

ericvicenti · 2017-02-03T19:50:45Z

@facebook-github-bot shipit-ninja

facebook-github-bot · 2017-02-03T19:50:59Z

Normally, ericvicenti, someone else should review and ship your pull request. However, we will trust that you know what you are doing. Shipping!

facebook-github-bot · 2017-02-03T19:51:05Z

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

Summary: The iOS and Android native folders of a React Native app can be difficult to maintain. This introduces a new workflow for creating and maintaining the native code of your app. Now it will be possible to: 1. Remove the native iOS or Android folders 2. Create an `app.json` for your app, with at least a `name` and `displayName` 3. Run `react-native eject`, and the native code for your app will be generated Then, as usual, you can run `react-native run-ios` and `react-native run-android`, to build and launch your app For apps that don't have any native code, it will be possible to ignore the `ios` and `android` folders from version control. Eject step tested in RN app by deleting native folders. mkonicek, what is the best way to test `react-native init`? As follow-up items, we can enable the following: - Configuring app icon and launch screen from the `app.json` - Automatically run `react-native link` for native libraries - A Closes #12162 Differential Revision: D4509138 Pulled By: ericvicenti fbshipit-source-id: 0ee213e68f0a3d44bfce337e3ec43e5024bacc66

Summary: The iOS and Android native folders of a React Native app can be difficult to maintain. This introduces a new workflow for creating and maintaining the native code of your app. Now it will be possible to: 1. Remove the native iOS or Android folders 2. Create an `app.json` for your app, with at least a `name` and `displayName` 3. Run `react-native eject`, and the native code for your app will be generated Then, as usual, you can run `react-native run-ios` and `react-native run-android`, to build and launch your app For apps that don't have any native code, it will be possible to ignore the `ios` and `android` folders from version control. Eject step tested in RN app by deleting native folders. mkonicek, what is the best way to test `react-native init`? As follow-up items, we can enable the following: - Configuring app icon and launch screen from the `app.json` - Automatically run `react-native link` for native libraries - A Closes facebook#12162 Differential Revision: D4509138 Pulled By: ericvicenti fbshipit-source-id: 0ee213e68f0a3d44bfce337e3ec43e5024bacc66

ncuillery · 2017-02-16T16:04:08Z

I'm a bit late to share my thoughts about this feature, I hope it could help for the future work on this.

If I understand well, it's an alternative way to upgrade the host apps of a RN project (i.e. the ios and android directories).

The upgrade command and react-native-git-upgrade consist in merging the user changes with the RN changes, whereas the eject command resets the host apps from the template of the new version (including RN changes), and the user is supposed to restore his changes by running the link command afterward. Am I right ?

This process (eject followed by link) makes upgrades easier if the user changes can be completely written by the link command.

My point is: we already could do the same by running react-native upgrade and answering "Yes" to any changed file ( 👉 the existing file is overrided by the template file).

Is the eject command doing something else ?

grabbou · 2017-02-17T12:29:25Z

@ncuillery it is similar to create-react-app and it's being used in create-react-native-app. This has nothing to do with upgrading itself as far as I understand.

Also, it's not related to my prior work with upgrade tools, haven't finished that yet, but might start once again soon :)

Summary: **Motivation** This PR fixes #12420. For the first time, the version 0.41.2 includes a change in the generator (see #12162). The [require cache busting](https://github.com/facebook/react-native/blob/master/react-native-git-upgrade/cliEntry.js#L157-L163) of `react-native-git-upgrade`, designed to face this situation , was ineffective. The entry in `require.cache` is the file path including the `.js` extension. We have to delete this entry with the same key. **Test plan** - Publish `react-native-git-upgrade` to Sinopia, - Follow the reproduction steps of #12420 - 👉 The name of the app shouldn't be changed Closes #12422 Differential Revision: D4585549 Pulled By: mkonicek fbshipit-source-id: 508ac925c17d02b7739d47f9351a5aa336589f2e

Summary: The iOS and Android native folders of a React Native app can be difficult to maintain. This introduces a new workflow for creating and maintaining the native code of your app. Now it will be possible to: 1. Remove the native iOS or Android folders 2. Create an `app.json` for your app, with at least a `name` and `displayName` 3. Run `react-native eject`, and the native code for your app will be generated Then, as usual, you can run `react-native run-ios` and `react-native run-android`, to build and launch your app For apps that don't have any native code, it will be possible to ignore the `ios` and `android` folders from version control. Eject step tested in RN app by deleting native folders. mkonicek, what is the best way to test `react-native init`? As follow-up items, we can enable the following: - Configuring app icon and launch screen from the `app.json` - Automatically run `react-native link` for native libraries - A Closes facebook#12162 Differential Revision: D4509138 Pulled By: ericvicenti fbshipit-source-id: 0ee213e68f0a3d44bfce337e3ec43e5024bacc66

Summary: **Motivation** This PR fixes facebook#12420. For the first time, the version 0.41.2 includes a change in the generator (see facebook#12162). The [require cache busting](https://github.com/facebook/react-native/blob/master/react-native-git-upgrade/cliEntry.js#L157-L163) of `react-native-git-upgrade`, designed to face this situation , was ineffective. The entry in `require.cache` is the file path including the `.js` extension. We have to delete this entry with the same key. **Test plan** - Publish `react-native-git-upgrade` to Sinopia, - Follow the reproduction steps of facebook#12420 - 👉 The name of the app shouldn't be changed Closes facebook#12422 Differential Revision: D4585549 Pulled By: mkonicek fbshipit-source-id: 508ac925c17d02b7739d47f9351a5aa336589f2e

Summary: The iOS and Android native folders of a React Native app can be difficult to maintain. This introduces a new workflow for creating and maintaining the native code of your app. Now it will be possible to: 1. Remove the native iOS or Android folders 2. Create an `app.json` for your app, with at least a `name` and `displayName` 3. Run `react-native eject`, and the native code for your app will be generated Then, as usual, you can run `react-native run-ios` and `react-native run-android`, to build and launch your app For apps that don't have any native code, it will be possible to ignore the `ios` and `android` folders from version control. Eject step tested in RN app by deleting native folders. mkonicek, what is the best way to test `react-native init`? As follow-up items, we can enable the following: - Configuring app icon and launch screen from the `app.json` - Automatically run `react-native link` for native libraries - A Closes facebook#12162 Differential Revision: D4509138 Pulled By: ericvicenti fbshipit-source-id: 0ee213e68f0a3d44bfce337e3ec43e5024bacc66

Summary: The iOS and Android native folders of a React Native app can be difficult to maintain. This introduces a new workflow for creating and maintaining the native code of your app. Now it will be possible to: 1. Remove the native iOS or Android folders 2. Create an `app.json` for your app, with at least a `name` and `displayName` 3. Run `react-native eject`, and the native code for your app will be generated Then, as usual, you can run `react-native run-ios` and `react-native run-android`, to build and launch your app For apps that don't have any native code, it will be possible to ignore the `ios` and `android` folders from version control. Eject step tested in RN app by deleting native folders. mkonicek, what is the best way to test `react-native init`? As follow-up items, we can enable the following: - Configuring app icon and launch screen from the `app.json` - Automatically run `react-native link` for native libraries - A Closes #12162 Differential Revision: D4509138 Pulled By: ericvicenti fbshipit-source-id: 0ee213e68f0a3d44bfce337e3ec43e5024bacc66

Summary: The iOS and Android native folders of a React Native app can be difficult to maintain. This introduces a new workflow for creating and maintaining the native code of your app. Now it will be possible to: 1. Remove the native iOS or Android folders 2. Create an `app.json` for your app, with at least a `name` and `displayName` 3. Run `react-native eject`, and the native code for your app will be generated Then, as usual, you can run `react-native run-ios` and `react-native run-android`, to build and launch your app For apps that don't have any native code, it will be possible to ignore the `ios` and `android` folders from version control. Eject step tested in RN app by deleting native folders. mkonicek, what is the best way to test `react-native init`? As follow-up items, we can enable the following: - Configuring app icon and launch screen from the `app.json` - Automatically run `react-native link` for native libraries - A Closes facebook/react-native#12162 Differential Revision: D4509138 Pulled By: ericvicenti fbshipit-source-id: 0ee213e68f0a3d44bfce337e3ec43e5024bacc66

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 2, 2017

mkonicek reviewed Feb 2, 2017

View reviewed changes

mkonicek added GH Review: accepted and removed GH Review: review-needed labels Feb 3, 2017

Initial implementation of react-native eject

b39aeda

ericvicenti force-pushed the rn-eject branch from 6e67974 to b39aeda Compare February 3, 2017 19:26

facebook-github-bot added the Import Started This pull request has been imported. This does not imply the PR has been approved. label Feb 3, 2017

facebook-github-bot closed this in bc74dd1 Feb 3, 2017

drewvolz mentioned this pull request Feb 11, 2017

Upgrade React Native to 0.41 StoDevX/AAO-React-Native#688

Merged

ncuillery mentioned this pull request Feb 16, 2017

Fix react-native-git-upgrade cache busting #12422

Closed

javache deleted the rn-eject branch April 19, 2017 17:34

szymonrybczak mentioned this pull request Nov 24, 2023

RFC0717: Introducing reactNativeManifest to package.json for React Native specific metadata (Take 3) react-native-community/discussions-and-proposals#717

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Eject CLI command to re-create native folders #12162

Eject CLI command to re-create native folders #12162

ericvicenti commented Feb 2, 2017

mkonicek commented Feb 2, 2017 •

edited

Loading

mkonicek Feb 2, 2017

mkonicek Feb 2, 2017

ericvicenti Feb 3, 2017

mkonicek Feb 2, 2017

ericvicenti Feb 3, 2017

mkonicek Feb 2, 2017

mkonicek Feb 2, 2017

mkonicek Feb 2, 2017

ericvicenti Feb 3, 2017

mkonicek Feb 2, 2017

ericvicenti Feb 3, 2017

mkonicek Feb 2, 2017

ericvicenti Feb 3, 2017

mkonicek Feb 2, 2017

mkonicek Feb 2, 2017

ericvicenti Feb 3, 2017

mkonicek Feb 2, 2017

mkonicek Feb 2, 2017

ericvicenti Feb 3, 2017

mkonicek commented Feb 2, 2017

mkonicek commented Feb 3, 2017

ericvicenti commented Feb 3, 2017

facebook-github-bot commented Feb 3, 2017

facebook-github-bot commented Feb 3, 2017

ncuillery commented Feb 16, 2017 •

edited

Loading

grabbou commented Feb 17, 2017

Eject CLI command to re-create native folders #12162

Eject CLI command to re-create native folders #12162

Conversation

ericvicenti commented Feb 2, 2017

New Functionality

Test Plan

Followup

mkonicek commented Feb 2, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mkonicek commented Feb 2, 2017

mkonicek commented Feb 3, 2017

ericvicenti commented Feb 3, 2017

facebook-github-bot commented Feb 3, 2017

facebook-github-bot commented Feb 3, 2017

ncuillery commented Feb 16, 2017 • edited Loading

grabbou commented Feb 17, 2017

mkonicek commented Feb 2, 2017 •

edited

Loading

ncuillery commented Feb 16, 2017 •

edited

Loading