feat: implement strimzi-ui build (strimzi#5)

* feat: provide build and basic UI - Adds implementation for the strimzi-ui build, inc npm package and required dependancies - Adds a very basic UI, which will be replaced, which uses this build - Update documentation to cover Contributes to: strimzi#2 Signed-off-by: Matthew Chirgwin <[email protected]> * refactor: build implementation details - moves dependencies to correct section, depending if they or code they generate are included in built output - adds browser levels to babel presets - adds webpack-bundle-analyzer for bundle size checking / docs to cover - tweaks location and merging of configuration to better match docs - adds extra comments/documentation Contributes to: strimzi#2 Signed-off-by: Matthew Chirgwin <[email protected]> * refactor: spelling error, review comments - fixes spelling errors Signed-off-by: Matthew Chirgwin <[email protected]> * feat: add copyright banner to css - adds copyright banner to built css Signed-off-by: Matthew Chirgwin <[email protected]> * refactor: simplify build based on review - changes/simplifies the build mechanism to become more additive - doc changes to cover Signed-off-by: Matthew Chirgwin <[email protected]> Co-authored-by: Matthew Chirgwin <[email protected]>
nictownsend · Aug 10, 2020 · 0ba3b1c · 0ba3b1c
1 parent bb3cdb7
commit 0ba3b1c
Show file tree

Hide file tree

Showing 18 changed files with 8,713 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,22 @@
+# dependencies
+node_modules/
+
+# built content
+dist/
+
+# test/supporting generated content
+generated/
+
+# misc
+.history
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.npmrc
+.eslintcache
+
+#IDEs
+.vscode/
+.idea/
diff --git a/README.md b/README.md
@@ -5,3 +5,32 @@
 
 This repository contains the Strimzi UI and its implementation.
 Strimzi UI provides a way for managing Strimzi and Kafka clusters (+ other components) deployed by it using a graphical user interface.
+
+## Getting started
+
+This UI uses `npm` to provide dependency management. If you wish to develop the UI, you will need:
+
+- [npm version 6.4.1 or later](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+- [node 10.15.0 or later](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+
+Once these prerequisites are met, all required dependencies to build and run the UI can be downloaded by running the following command:
+
+```
+npm install
+```
+
+### Helpful commands
+
+`npm` scripts are provided for common tasks. These include:
+
+- `npm run start` - runs the UI in development mode
+- `npm run build` - builds the UI
+- `npm run clean` - deletes the build/generated content directories
+
+## Implementation documentation
+
+Further details around how this UI is implemented can be found below:
+
+- [Build](./docs/Build.md)
+
+
diff --git a/client/Bootstrap/Styling.scss b/client/Bootstrap/Styling.scss
@@ -0,0 +1,14 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+
+#root {
+    font-family: 'Nunito', 'Open Sans', sans-serif;
+    color: #182C46;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 98vh;
+}
diff --git a/client/Bootstrap/index.html b/client/Bootstrap/index.html
@@ -0,0 +1,15 @@
+<!--
+
+    Copyright Strimzi authors.
+    License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+
+-->
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title><%= htmlWebpackPlugin.options.title %></title>
+    </head>
+    <body>
+        <div id='root' role="main"></div>
+    </body>
+</html>
diff --git a/client/Bootstrap/index.js b/client/Bootstrap/index.js
@@ -0,0 +1,16 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+
+import 'Styling';
+import image from 'Images/logo.png';
+
+window.addEventListener('load', () => {
+    const root = document.querySelector('[id="root"]');
+    const img = document.createElement('img');
+    img.src = image;
+    img.alt = 'Strimzi logo';
+    root.append(img);
+    root.append(document.createTextNode('Welcome to the Strimzi UI'));
+});
diff --git a/client/Images/favicon.ico b/client/Images/favicon.ico
diff --git a/client/Images/logo.png b/client/Images/logo.png
diff --git a/docs/Build.md b/docs/Build.md
@@ -53,7 +53,7 @@ In addition to aliasing, the webpack configuration will be as follows:
 | Option        | Value           | Purpose  |
 | ------------- | ------------- | -----:|
 | entry      | `client/Bootstrap/index.js` | Build entry point. *Note:* the `scss/css` is expected to be imported by individual view layer code, which is imported (directly or indirectly) from this file. Details to follow in Code Style approach documentation regarding this styling approach and why.  |
-| mode      | `production` or `development` (provided via config file used) | Build mode. If production, code will be minified and have developer helpers (warning etc) removed from the built output |
+| mode      | `production` or `development` (provided via config file used) | Build mode. If production, code will be minified and have developer helpers (warnings etc) removed from the built output |
 | output.path      | `dist` (via constant) | All output to be placed in the `dist` directory |
 | output.publicPath      | `` (empty string) | The public path of static/public content included by Webpack. Is relative to the URL. |
 | output.filename       | `[name].bundle.js` | Name of the built entry bundle. Will be `main.bundle.js` once built as we have one entry point |
@@ -66,7 +66,7 @@ In addition to aliasing, the webpack configuration will be as follows:
 | resolve.alias      | Array of aliases | [See section above](#webpack-aliases) |
 | devServer      | Object | [See section below](#webpack-dev-server) |
 
-This configuration will be defined in separate files per build mode - ie one for `development` and one for `production` - to keep the configuration as minimal and readable as possible. Common configuration will be inherited/extended into these files.
+To keep the configuration as minimal and readable as possible, configuration will be defined in separate files per build mode - ie one for `development` and one for `production`. These configurations will extend a common configuration file. [See this section for more details](#ui-build-implementation).
 
 ##### Module rules
 
@@ -79,6 +79,8 @@ Webpack allows file specific loaders or utilities to be invoked as a part of the
 | `/\.(woff(2)?\|ttf\|eot)$/`      | `file-loader` | For any font file, use file-loader to package the font to the `output.path` and replace/update any imports of those fonts to this location. These will be directed to a 'fonts' directory |
 | `/\.(jpg\|gif\|png\|svg)$/`      | `file-loader` | For any image file, use file-loader to package the image to the `output.path` and replace/update any imports of those images to this location. These will be directed to a 'images' directory |
 
+The module loading rules will be provided via helper functions from a common configuration file, but allow for modification. [See this section for more details](#ui-build-implementation).
+
 ##### Webpack plugins
 
 We also make use of the following plugins:
@@ -90,6 +92,10 @@ We also make use of the following plugins:
 | html-webpack-plugin      | Handles templating of built output into a provided index.html file |
 | mini-css-extract-plugin      | Compresses and emits a css file(s) containing all styling for the UI |
 | compression-webpack-plugin      | Compresses built output further using `gzip` algorithm, and emits these compressed files. Depending on headers provided by the browser, these gziped versions will be served to the browser, rather than the uncompressed versions |
+| webpack-bundle-analyzer      | At build time, produce a report regarding the JS bundle size (useful for understanding bloat and duplication). At dev build time this is an html file (which is then hosted by `webpack-dev-server`), and a json file at production build time. Each report is written to the `generated/bundle-analyser` directory |
+| BannerPlugin      | Used to add a copyright header to built css code. Other types handled by other plugins (eg TerserPlugin) |
+
+Where appropriate, plugins will be provided via helper functions from a common configuration file, but allow for modification to their configuration. [See this section for more details](#ui-build-implementation).
 
 ##### Terser plugin configuration
 
@@ -98,7 +104,7 @@ These options will all be provided to the TerserPlugin via it's constructor.
 | Option        | Value           | Purpose  |
 | ------------- | ------------- | -----:|
 | terserOptions.output.comments      | `false` | Remove all comments in the output |
-| terserOptions.output.preamble      | Strimzi copyright header | Adds the Strimzi header to the built JS output |
+| terserOptions.output.preamble      | [Strimzi header](../utils/constants.js) | Adds the Strimzi header to the built JS output |
 | terserOptions.keep_classnames      | `true` | Keep original class names |
 | terserOptions.keep_fnames      | `true` | Keep original function names |
 | terserOptions.mangle.safari10      | `true` | Works around known Safari issues |
@@ -118,7 +124,10 @@ dist/
     <hash1>.bundle.js.gz
     <hash2>.bundle.js.gz
     ....
-    styling.css
+    main.css
+    <hash1>.bundle.css
+    <hash2>.bundle.css
+    ...
     images/
         image1.svg
         ...
@@ -133,15 +142,24 @@ To enable efficient development, this UI makes use of [webpack-dev-server](https
 
 | Option        | Value           | Reason  |
 | ------------- | ------------- | -----:|
-| contentBase      | `dist` (via constant) | Source for static files. This is the built output directory, where static files will land as a part of the first build during dev start up |
+| contentBase      | [`dist` (via constant), `generated/bundle-analyser/bundles.html`] | Source for static files. This is the built output directory, where static files will land as a part of the first build during dev start up. In addition, include the output of `webpack-bundle-analyzer`, so a developer can access a `/bundles.html` file through `webpack-dev-server`, showing current bundle size/distribution |
 | watchContentBase      | `true` | Reload if a static file changes |
 | compress      | `true` | Serve all content via .gz files - makes rebuilds/hot changes faster to retrieve |
 | inline      | `true` | Enforce default setting, recommended when using `hot` reloading option |
 | hot      | `true` | Enables hot reloading of content when files change |
 | proxy      | TBD | Used to proxy requests for backend data when developing the UI |
 | overlay.warnings      | `false` | In case of an warning, do not show an overlay |
 | overlay.errors      | `true` | In case of an error, show an overlay over the UI showing it |
+| host      | `localhost` | The hostname to use for the server. Can be overridden using the `DEV_HOSTNAME` environment variable. |
+| port      | `8080` | The port to use for the server. Can be overridden using the `DEV_PORT` environment variable. |
+
+By default, `webpack-dev-server` will host the UI at `https://localhost:8080/`. Both the hostname and port can be overridden/changed via the `DEV_HOSTNAME` and `DEV_PORT` environment variables respectively.
+
+### UI Build implementation
+
+The above UI build is implemented in the [`build directory`](../utils/build). It is broken down into common configuration (and a function that will return it, helper functions and build constants), and individual use cases, such as dev and prod builds.
 
 ## UI build into Strimzi
 
-This section to be completed once build/packaging integration with Strimzi has been agreed upon.
+This section to be completed once build/packaging integration with Strimzi has been agreed upon.
+