Migrate client-admin from gulp to webpack (compdemocracy#1242)

* First-pass gulp-to-webpack conversion.

* Update webpack-cli, and create prod/dev logic.

* Messy: leave uncompressed files in dev mode build.

* Shut off compression in dev mode more elegantly.

* Get docker build working.

* Fixed bundlewatch path to find client-admin files.

* Get rid of old webpack build scripts.

* Don't minify for dev build.

* Removed dep pkgs for s3 deploy.

* Added ability to use bundle analyzer plugin.

* Removed all unneeded files.

* Fixed up eslint issue with upgraded packages.

* Fixed bundlewatch CI script.

* Keep new client-admin bundle consistently named.

* Try running e2e tests against sslip.io instead of localhost.

* Escape the domainWhitelist strings as it was done before.

* Revert "Try running e2e tests against sslip.io instead of localhost."

This reverts commit 46722d0.

* Oops. Inversed the boolean for configs.

* Trying to debug index_admin.html issue.

* Added upterm for remote debugging.

* Ensure upterm runs on failures.

* Added publicPath to make script link absolute.

* Drop the embed.html test file into new home.

* Ensuring dev mode builds and dev server use same simplifications.

* Set up all routes to point to index.html. Added mention of future proxy.

* Removed debugging step from github actions.

* Tiny fixups to clean up PR.

* Only write headerJson files during prod build.

* Migrate from dist to more build as before.

* Removed unneeded config vars.

* Cleaned up webpack dev-mode logic.

* Went back to using dist folder to fix bundle-analyzer bug.

* Updated client-admin README. Removed badges. Removed deployment references.

* Cleaned up ignorefiles.

* Mention where builds happen.

* Use build instead of dist for client-admin build output

* switch to npm run build:prod in file-server/Dockerfile

* inject compiled js in html body for client-admin

* add/update webpack versions

Co-authored-by: Christopher Small <metasoarous@gmail.com>

.bundlewatch.config.js

@@ -10,7 +10,7 @@ module.exports = {
  },
  "files": [
  {
- "path": "client-admin/dist/*.js",
+ "path": "client-admin/dist/**/*.js",
  "maxSize": "180 kB",
  },
  {

.github/workflows/bundlewatch.yml

@@ -47,7 +47,9 @@ jobs:
  working-directory: client-admin
  run: |
  npm install
- npm run build:webpack
+ cp polis.config.template.js polis.config.js
+ npm run build:prod
+ mv dist/static/js/admin_bundle.*.js dist/static/js/admin_bundle.xxxxxxxx.js
 
  - name: "Install & Build: client-participation"
  working-directory: client-participation

.github/workflows/cypress-tests.yml

@@ -57,7 +57,7 @@ jobs:
  echo EMAIL_TRANSPORT_TYPES=mailgun,aws-ses,nonexistent,maildev >> server/docker-dev.env
 
  - name: Ensure embed test html is served
- run: cp e2e/cypress/fixtures/html/embed.html client-admin/embed.html
+ run: cp e2e/cypress/fixtures/html/embed.html client-admin/public/embed.html
 
  - name: Serve app via docker-compose
  run: docker-compose up --detach

client-admin/.babelrc

@@ -5,7 +5,7 @@
  ],
  "plugins": [
  ["@babel/plugin-proposal-decorators", { "legacy": true }],
- ["@babel/plugin-proposal-class-properties", { "loose": true }],
+ ["@babel/plugin-proposal-class-properties"],
  "lodash",
  "@babel/plugin-transform-runtime"
  ]

client-admin/.dockerignore

@@ -27,14 +27,8 @@ $RECYCLE.BIN/
 
 # App specific
 build
-dist
-coverage
 node_modules
-bower_components
-.tmp
-lib
 npm-debug.log
-.polis_s3_creds_client.json
 .env_dev
 
 # VCS

client-admin/.gitignore

@@ -27,14 +27,7 @@ $RECYCLE.BIN/
 
 # App specific
 build
-dist
-coverage
 node_modules
-bower_components
-.tmp
-lib
 npm-debug.log
-.polis_s3_creds_client.json
 .env_dev
 polis.config.js
-polis.config

client-admin/Dockerfile

@@ -1,5 +1,4 @@
-# Gulp v3 stops us from upgrading beyond Node v11
-FROM docker.io/node:11.15.0-alpine
+FROM docker.io/node:14.14.0-alpine
 
 WORKDIR /app
 
@@ -13,4 +12,4 @@ COPY polis.config.template.js polis.config.js
 COPY . .
 
 ARG GIT_HASH
-RUN npm run deploy:prod
+RUN npm run build:prod

client-admin/README.md

@@ -1,21 +1,17 @@
-[![Build Status](https://travis-ci.org/pol-is/polisClientAdmin.svg?branch=master)](https://travis-ci.org/pol-is/polisClientAdmin) [![Code Climate](https://codeclimate.com/github/pol-is/polisClientAdmin/badges/gpa.svg)](https://codeclimate.com/github/pol-is/polisClientAdmin) [![Test Coverage](https://codeclimate.com/github/pol-is/polisClientAdmin/badges/coverage.svg)](https://codeclimate.com/github/vital-edu/sala-de-espera/coverage)
-
-Polis Admin Console
-===================
+# Polis Admin Console
 
 The below instructions are no longer officially supported; if you'd like to use them as a reference, we suggest you check out the official [Dockerfile](Dockerfile) to understand the latest build process and specific package versions.
 
 ---
 
-Configuration
--------------
+## Configuration
 
 Install the NVM following the instructions: [NVM Installation Guide](https://github.com/creationix/nvm#install-script).
 
 Them run the commands below to install the correct Node.JS version and the application dependencies.
 
 ```sh
-nvm install 8.17.0
+nvm install 14.14.0
 npm install
 ```
 
@@ -28,16 +24,14 @@ npm cache clear
 npm install
 ```
 
-Running Application
--------------------
+## Running Application
 
 ```sh
-nvm use 6.2.0
+nvm use 14.14.0
 npm start
 ```
 
-Running Tests
--------------
+## Running Tests
 
 We aspire to use the Jest Testing Framework. We welcome contributors to help us write tests!
 
@@ -46,32 +40,12 @@ We aspire to use the Jest Testing Framework. We welcome contributors to help us
 npm test
 ```
 
-Building and Deploying for Production
--------------------------------------
+## Building for Production
 
-To build static assets for a production deployment, run
+To build static assets into `build/` for a production deployment, run
 
 ```sh
-gulp dist
+npm run build:prod
 ```
 
-As a convenience, the `npm deploy:prod` is provided for deploying to AWS S3 or via SCP to a static file server.
-For S3 deployment, place your AWS credentials in a JSON file at `.polis_s3_creds_client.json` that looks like this:
-
-```json
-{"key": "XXXXXXX", "secret": "YYYYYYY"}
-```
-
----
-
-### Icons from the Noun Project
-
-* Checklist by David Courey from the Noun Project
-* AI by mungang kim from the Noun Project
-* Science by Akriti Bhusal from the Noun Project
-* Success File by Ben Davis from the Noun Project
-
-### Collections to look into
-
-* https://thenounproject.com/vectorsmarket/collection/project-management-line-icon/?i=1326778
-
+Deployment is currently performed via Docker, and so no other deployment scripts are provided.