feat(examples): convert create-react-app example to bazel run

examples/create-react-app/BUILD.bazel

@@ -29,11 +29,6 @@ copy_to_bin(
     ],
 )
 
-copy_to_bin(
-    name = "copy_test_files",
-    srcs = glob(_TESTS),
-)
-
 # react-scripts can only work if the working directory is the root of the application.
 # So we'll need to chdir before it runs.
 write_file(
@@ -42,23 +37,31 @@ write_file(
     content = ["process.chdir(__dirname)"],
 )
 
+_RUNTIME_DEPS = [
+    "chdir.js",
+    "copy_static_files",
+    "@npm//react",
+    "@npm//react-dom",
+]
+
 react_scripts(
     # Note: this must be named "build" since react-scripts hard-codes that as the output dir
     name = "build",
     args = [
         "--node_options=--require=./$(execpath chdir.js)",
         "build",
     ],
-    data = [
-        "chdir.js",
-        "copy_static_files",
+    data = _RUNTIME_DEPS + [
         "@npm//@types",
-        "@npm//react",
-        "@npm//react-dom",
     ],
     output_dir = True,
 )
 
+copy_to_bin(
+    name = "copy_test_files",
+    srcs = glob(_TESTS),
+)
+
 react_scripts_test(
     name = "test",
     args = [
@@ -71,15 +74,20 @@ react_scripts_test(
         "--no-watchman",
         "--ci",
     ],
-    data = [
-        "chdir.js",
-        "copy_static_files",
+    data = _RUNTIME_DEPS + [
         "copy_test_files",
         "@npm//@testing-library/dom",
         "@npm//@testing-library/jest-dom",
         "@npm//@testing-library/react",
         "@npm//@testing-library/user-event",
-        "@npm//react",
-        "@npm//react-dom",
     ],
 )
+
+react_scripts(
+    name = "start",
+    args = [
+        "--node_options=--require=$(rootpath chdir.js)",
+        "start",
+    ],
+    data = _RUNTIME_DEPS,
+)

examples/create-react-app/README.md

@@ -6,7 +6,7 @@ approaches you can take to build and test your React app with Bazel.
 
 ## Available Scripts
 
-In the project directory, you can run:
+Just like with stock create-react-app, we have the same developer workflow. In the project directory, you can run:
 
 ### `yarn start`
 
@@ -19,7 +19,9 @@ You will also see any lint errors in the console.
 ### `yarn test`
 
 Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+Note that it restarts Jest on each change, so there's a large time penalty on each re-run.
+This can be solved by making Jest ibazel-aware as we did with Karma.
+See https://github.com/bazelbuild/rules_nodejs/issues/2028
 
 ### `yarn build`
 

examples/create-react-app/src/App.tsx

@@ -8,7 +8,7 @@ function App() {
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
-          Edit <code>src/App.tsx</code> and save to reload.
+          Edit <code>src/App.tsx</code> and saverate to reload.
         </p>
         <a
           className="App-link"