Add React examples in examples/ directory

.circleci/config.yml

@@ -26,19 +26,6 @@ jobs:
       - run:
           name: Build
           command: bazel build //...
-  build_with_node_modules_preinstalled:
-    <<: *job_configuration
-    steps:
-      - checkout
-      - *install_bazel
-      - run:
-          name: Build react-app with node_modules already installed
-          command: |
-            # Install node_modules into tests/examples/react-app to give Node the opportunity to
-            # get confused.
-            cd tests/examples/react-app
-            yarn install
-            bazel build ...
   build_dockerized_example:
     <<: *job_configuration
     steps:
@@ -52,10 +39,40 @@ jobs:
             bazel build //...
             bazel run //services/my-service:image
             docker run -d -p 3000:3000 bazel/services/my-service:image
+  build_react_examples:
+    <<: *job_configuration
+    steps:
+      - checkout
+      - *install_bazel
+      - run:
+          name: Build React examples
+          command: |
+            cd examples/react-app-javascript
+            bazel build //...
+            cd -
+            cd examples/react-app-typescript
+            bazel build //...
+            cd -
+            cd examples/react-storybook-typescript
+            bazel build //...
+            cd -
+  build_react_app_with_node_modules_preinstalled:
+    <<: *job_configuration
+    steps:
+      - checkout
+      - *install_bazel
+      - run:
+          name: Build React example with node_modules already installed
+          command: |
+            # Install node_modules to give Node the opportunity to get confused.
+            cd examples/react-app-javascript
+            yarn install
+            bazel build ...
 workflows:
   version: 2
   build_and_test:
     jobs:
       - build
-      - build_with_node_modules_preinstalled
+      - build_react_examples
+      - build_react_app_with_node_modules_preinstalled
       - build_dockerized_example

tests/examples/react-app/BUILD.bazel → examples/react-app-javascript/BUILD.bazel

@@ -1,21 +1,21 @@
 package(default_visibility = ["//visibility:public"])
 
-load("//:defs.bzl", "npm_packages", "web_bundle")
+load("@bazel_javascript//:defs.bzl", "npm_packages", "web_bundle")
 
 web_bundle(
   name = "app-bundle-dev",
-  lib = "//tests/examples/react-app/src:index",
+  lib = "//src",
   entry = "index.js",
   mode = "development",
-  html_template = "//tests/examples/react-app/public:index.html",
+  html_template = "//public:index.html",
 )
 
 web_bundle(
   name = "app-bundle-prod",
-  lib = "//tests/examples/react-app/src:index",
+  lib = "//src",
   entry = "index.js",
   mode = "production",
-  html_template = "//tests/examples/react-app/public:index.html",
+  html_template = "//public:index.html",
 )
 
 npm_packages(

examples/react-app-javascript/WORKSPACE

@@ -0,0 +1,25 @@
+# Note: We use a local version of bazel-javascript rules here.
+#
+# You should remove this and use the remote version below instead.
+local_repository(
+  name = "bazel_javascript",
+  path = "../..",
+)
+
+# git_repository(
+#     name = "bazel_javascript",
+#     remote = "https://github.com/zenclabs/bazel-javascript.git",
+#     tag = <use the latest tag>,
+# )
+
+git_repository(
+    name = "build_bazel_rules_nodejs",
+    remote = "https://github.com/bazelbuild/rules_nodejs.git",
+    tag = "0.10.0",
+)
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "node_repositories")
+
+node_repositories(
+    package_json = [],
+)

tests/examples/react-app/package.json → examples/react-app-javascript/package.json

@@ -1,11 +1,11 @@
 {
-  "name": "react-app",
+  "name": "react-app-javascript",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-scripts": "1.1.4"
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "react-scripts": "1.1.5"
   },
   "scripts": {
     "start": "react-scripts start",

tests/examples/react-app/src/App.js → examples/react-app-javascript/src/App.js

@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from "react";
+import logo from "./logo.svg";
+import "./App.css";
 
 class App extends Component {
   render() {

examples/react-app-javascript/src/BUILD.bazel

@@ -0,0 +1,16 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@bazel_javascript//:defs.bzl", "js_library")
+
+js_library(
+  name = "src",
+  srcs = glob([
+    "*.js",
+    "*.jsx",
+    "*.css",
+    "*.svg",
+  ]),
+  deps = [
+    "//:packages",
+  ],
+)