Bazel typescript boilerplate webapp with e2e tests, devserver

Author: vikramkamath

Diff for: .gitignore

@@ -0,0 +1 @@
+node_modules

Diff for: BUILD.bazel

@@ -0,0 +1,35 @@
+filegroup(
+    name = "node_modules",
+    # Only include files needed for type-checking and runtime
+    srcs = glob([
+        "node_modules/**/*.js",
+        "node_modules/**/*.d.ts",
+        "node_modules/**/*.json"
+    ]),
+    visibility = ["//visibility:public"],
+)
+
+
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver", "ts_library")
+
+ts_library(
+    name = "app",
+    srcs = ["app.ts"],
+    tsconfig = ":tsconfig.json",
+)
+
+ts_devserver(
+    name = "devserver",
+    # We'll collect all the devmode JS sources from these TypeScript libraries
+    deps = [":app"],
+    # This is the path we'll request from the browser, see index.html
+    serving_path = "/bundle.js",
+    # The devserver can serve our static files too
+    static_files = ["index.html"],
+)
+
+ts_library(
+    name = "e2e",
+    testonly = 1,
+    srcs = ["app_e2e_test.ts"]
+)

Diff for: README.md

@@ -0,0 +1,24 @@
+# bazel-typescript-webapp
+
+This is a simple webapp built using `bazel`, `typescript`. This is an example app from [bazelbuild/rules_typescript](https://github.com/bazelbuild/rules_typescript)
+
+# Install 
+
+Use `homebrew` on OSx to install `bazel`
+
+`brew install bazel`
+
+Then, clone this project
+`npm i`
+
+## Build
+
+`npm run build`
+
+## Serve
+
+`npm run serve`
+
+## End-To-End tests
+
+`npm run e2e`

Diff for: WORKSPACE

@@ -0,0 +1,46 @@
+workspace(name = "app")
+
+http_archive(
+    name = "build_bazel_rules_nodejs",
+    url = "https://github.com/bazelbuild/rules_nodejs/archive/0.8.0.zip",
+    strip_prefix = "rules_nodejs-0.8.0",
+    sha256 = "4e40dd49ae7668d245c3107645f2a138660fcfd975b9310b91eda13f0c973953",
+)
+
+http_archive(
+    name = "io_bazel_rules_webtesting",
+    strip_prefix = "rules_webtesting-master",
+    urls = [
+        "https://github.com/bazelbuild/rules_webtesting/archive/master.tar.gz",
+    ],
+)
+
+load("@build_bazel_rules_nodejs//:defs.bzl", "node_repositories")
+
+node_repositories(package_json = ["//:package.json"])
+
+
+# Include @bazel/typescript in package.json#devDependencies
+local_repository(
+    name = "build_bazel_rules_typescript",
+    path = "node_modules/@bazel/typescript",
+)
+
+load("@build_bazel_rules_typescript//:defs.bzl", "ts_setup_workspace")
+
+
+
+ts_setup_workspace()
+
+# ts_devserver needs the Go rules.
+# See https://github.com/bazelbuild/rules_go#setup for the latest version.
+http_archive(
+    name = "io_bazel_rules_go",
+    url = "https://github.com/bazelbuild/rules_go/releases/download/0.8.1/rules_go-0.8.1.tar.gz",
+    sha256 = "90bb270d0a92ed5c83558b2797346917c46547f6f7103e648941ecdb6b9d0e72",
+)
+
+load("@io_bazel_rules_go//go:def.bzl", "go_rules_dependencies", "go_register_toolchains")
+
+go_rules_dependencies()
+go_register_toolchains()

Diff for: app.ts

@@ -0,0 +1,4 @@
+const el: HTMLDivElement = document.createElement('div');
+el.innerText = 'Hello, TypeScript';
+el.className = 'ts1';
+document.body.appendChild(el);

Diff for: app_e2e_test.ts

@@ -0,0 +1,25 @@
+import {browser, by, element, ExpectedConditions} from 'protractor';
+
+// This test uses Protractor without Angular, so disable Angular features
+browser.waitForAngularEnabled(false);
+
+// Since we don't have a protractor bazel rule yet, the test is brought up in
+// parallel with building the service under test. So the timeout must include
+// compiling the application as well as starting the server.
+const timeoutMs = 90 * 1000;
+
+describe('Devserver', () => {
+  beforeAll(() => {
+    browser.get('');
+    // Don't run any specs until we see a <div> on the page.
+    browser.wait(
+        ExpectedConditions.presenceOf(element(by.css('div.ts1'))),
+        timeoutMs);
+  }, timeoutMs);
+
+  it('should display: Hello world!', (done) => {
+    const div = element(by.css('div.ts1'));
+    div.getText().then(t => expect(t).toEqual(`Hello, TypeScript`));
+    done();
+  });
+});

Diff for: bazel-app

@@ -0,0 +1 @@
+/private/var/tmp/_bazel_Vikki/3177f6227db02b881211ca90570573eb/execroot/app

Diff for: bazel-bin

@@ -0,0 +1 @@
+/private/var/tmp/_bazel_Vikki/3177f6227db02b881211ca90570573eb/execroot/app/bazel-out/darwin-fastbuild/bin

Diff for: bazel-genfiles

@@ -0,0 +1 @@
+/private/var/tmp/_bazel_Vikki/3177f6227db02b881211ca90570573eb/execroot/app/bazel-out/darwin-fastbuild/genfiles

Diff for: bazel-out

@@ -0,0 +1 @@
+/private/var/tmp/_bazel_Vikki/3177f6227db02b881211ca90570573eb/execroot/app/bazel-out

Diff for: bazel-testlogs

@@ -0,0 +1 @@
+/private/var/tmp/_bazel_Vikki/3177f6227db02b881211ca90570573eb/execroot/app/bazel-out/darwin-fastbuild/testlogs

Diff for: index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+
+<!--
+   This HTML file is an example of how you can write and serve your own
+   index page. It's not required for ts_devserver - if no index.html file is
+   found to serve, a simple one will be generated.
+-->
+<html>
+  <head>
+    <title>ts_devserver example</title>
+  </head>
+  <body>
+    <!--
+      For development mode, this script will be bundled on-the-fly by
+      the devserver, based on the latest JS files built by Bazel.
+      For production, you should be able to use the same index.html file, but
+      this JS resource would be served from a static file.
+    -->
+    <script src="/bundle.js"></script>
+  </body>
+</html>