-
Notifications
You must be signed in to change notification settings - Fork 522
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(examples): demonstrate using Webpack to build and serve a React app
- Loading branch information
Showing
14 changed files
with
4,597 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| node_modules |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| import %workspace%/../../common.bazelrc |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| load("@npm//http-server:index.bzl", "http_server") | ||
| load("@npm//sass:index.bzl", "sass") | ||
| load("@npm//typescript:index.bzl", "tsc") | ||
| load("@npm//webpack-cli:index.bzl", webpack = "webpack_cli") | ||
|
|
||
| sass( | ||
| name = "styles", | ||
| outs = ["styles.css"], | ||
| args = [ | ||
| "$(location styles.scss)", | ||
| "$(location styles.css)", | ||
| ], | ||
| data = ["styles.scss"], | ||
| ) | ||
|
|
||
| tsc( | ||
| name = "compile", | ||
| outs = ["index.js"], | ||
| args = [ | ||
| "$(location index.tsx)", | ||
| "$(location types.d.ts)", | ||
| "--outDir", | ||
| "$@", | ||
| "--lib", | ||
| "es2015,dom", | ||
| "--jsx", | ||
| "react", | ||
| ], | ||
| data = [ | ||
| "index.tsx", | ||
| "types.d.ts", | ||
| "@npm//@types", | ||
| "@npm//csstype", | ||
| ], | ||
| ) | ||
|
|
||
| webpack( | ||
| name = "bundle", | ||
| outs = ["app.bundle.js"], | ||
| args = [ | ||
| "$(location index.js)", | ||
| "--config", | ||
| "$(location webpack.config.js)", | ||
| "-o", | ||
| "$(location app.bundle.js)", | ||
| ], | ||
| data = [ | ||
| "index.js", | ||
| "styles.css", | ||
| "webpack.config.js", | ||
| "@npm//css-loader", | ||
| "@npm//style-loader", | ||
| ], | ||
| ) | ||
|
|
||
| # Note, on Windows you need `--enable_runfiles` | ||
| http_server( | ||
| name = "server", | ||
| data = [ | ||
| "app.bundle.js", | ||
| "index.html", | ||
| ], | ||
| templated_args = ["."], | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| This example shows how to use Webpack to build and serve a React app with Bazel. | ||
|
|
||
| We use the minimal webpack loaders, because Bazel takes care of things like Sass and TypeScript compilation before calling webpack. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| workspace( | ||
| name = "react_webpack", | ||
| managed_directories = {"@npm": ["node_modules"]}, | ||
| ) | ||
|
|
||
| load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive") | ||
|
|
||
| http_archive( | ||
| name = "build_bazel_rules_nodejs", | ||
| sha256 = "1447312c8570e8916da0f5f415186e7098cdd4ce48e04b8e864f793c766959c3", | ||
| urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/0.38.2/rules_nodejs-0.38.2.tar.gz"], | ||
| ) | ||
|
|
||
| load("@build_bazel_rules_nodejs//:index.bzl", "yarn_install") | ||
|
|
||
| yarn_install( | ||
| # Name this npm so that Bazel Label references look like @npm//package | ||
| name = "npm", | ||
| package_json = "//:package.json", | ||
| yarn_lock = "//:yarn.lock", | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <html> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script src="app.bundle.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import * as React from "react"; | ||
| import * as ReactDOM from "react-dom"; | ||
| import * as styles from "./styles.css"; | ||
|
|
||
| ReactDOM.render( | ||
| <h1 className={styles.h1}>Hello, world!</h1>, | ||
| document.getElementById("root") | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| { | ||
| "private": true, | ||
| "devDependencies": { | ||
| "@bazel/bazel": "latest", | ||
| "@bazel/buildifier": "latest", | ||
| "@bazel/ibazel": "latest", | ||
| "@types/react": "^16.9.5", | ||
| "@types/react-dom": "^16.9.1", | ||
| "css-loader": "^3.2.0", | ||
| "http-server": "^0.11.1", | ||
| "react": "^16.10.2", | ||
| "react-dom": "^16.10.2", | ||
| "sass": "^1.23.0", | ||
| "style-loader": "^1.0.0", | ||
| "typescript": "^3.6.3", | ||
| "webpack": "^4.41.0", | ||
| "webpack-cli": "^3.3.9", | ||
| "webpack-dev-server": "^3.8.2" | ||
| }, | ||
| "scripts": { | ||
| "build": "bazel build //...", | ||
| "serve": "ibazel run :server" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .h1 { | ||
| color: red; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| // TODO: this should be generated from the css file using some tool | ||
| declare module "*.css" { | ||
| let _module: { [key: string]: string }; | ||
| export = _module; | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
|
|
||
| module.exports = (env, argv) => ({ | ||
| mode: argv.mode, | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.css$/, | ||
| exclude: /node_modules/, | ||
| use: [ | ||
| { loader: "style-loader" }, | ||
| { | ||
| loader: "css-loader", | ||
| query: { | ||
| modules: true | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| ] | ||
| } | ||
| }); |
Oops, something went wrong.