Improve and document frontend resource build

Document the frontend build and reformat README.md to improve structure
and readability. Switch from plain npm to yarn.

README.md

@@ -7,9 +7,12 @@ in this repository provides the UI components that are required by Hydra.
 
 ## Setup
 
-- create certificates for the IDP, the application and Hydra. You can use the
-  testca from the [CAcert developer setup](https://git.dittberner.info/jan/cacert-devsetup)
-  like this:
+### Certificates
+
+You need a set of certificates for the IDP, the application and Hydra. You
+can use the Test CA created by the ``setup_test_ca.sh`` script from the
+[CAcert developer setup](https://git.dittberner.info/jan/cacert-devsetup)
+repository like this:
 
 1. create signing requests
 
@@ -47,9 +50,20 @@ in this repository provides the UI components that are required by Hydra.
    cp $PATH_TO_DEVSETUP_TESTCA/{hydra,idp,app}.cacert.localhost.crt.pem .
    ```
 
-- install Hydra according to their documentation
+3. Copy CA certificate for client certificates
   
-- setup the Hydra database
+   ```
+   openssl x509 -in $PATH_TO_DEVSETUP_TESTCA/class3/ca.crt.pem \
+       -out client_ca.pem
+   ```
+
+### Setup Hydra
+
+We use the ORY Hydra OAuth2 / OpenID Connect implementation. Install Hydra
+according to their [documentation](https://www.ory.sh/hydra/docs/install).
+The setup has been tested with the Linux binary installation.
+
+Perform the Hydra database setup:
 
 ```
 sudo -i -u postgres psql
@@ -60,7 +74,7 @@ in this repository provides the UI components that are required by Hydra.
 hydra migrate sql "postgres://hydra_local:${YOUR_POSTGRESQL_PASSWORD}@localhost:5432/hydra_local"
 ```
 
-- create a configuration file for Hydra i.e. hydra.yaml:
+Create a configuration file for Hydra i.e. ``hydra.yaml``:
 
 ```
 serve:
@@ -110,15 +124,20 @@ in this repository provides the UI components that are required by Hydra.
     - "${YOUR SECRET FOR HYDRA}"
 ```
 
-- add entries for auth.cacert.localhost and hydra.cacert.localhost to /etc/hosts
+The available configuration options are described in the
+[Hydra configuration documentation](https://www.ory.sh/hydra/docs/reference/configuration).
+
+Hydra needs to be able to resolve its hostnames and does not work with the
+systemd-nss module. You therefore need to define Hydra's hostnames in your
+``/etc/hosts`` file:
 
 ```
 ::1 auth.cacert.localhost hydra.cacert.localhost
 ```
 
-  This is required to allow Hydra to start properly
+### Add OpenID Connect configuration for a client
 
-- create an OIDC client configuration for the demo application
+Create an OpenID Connect (OIDC) client configuration for the demo application
 
 ```
 hydra clients create --endpoint https://hydra.cacert.localhost:4445/ \
@@ -130,26 +149,30 @@ in this repository provides the UI components that are required by Hydra.
     --client-uri https://register.cacert.localhost:3000/info/app
 ```
 
-  the command returns a client id and a client secret that you need to
-  configure for the demo application
+The command returns a client id and a client secret, that you need for the
+demo application configuration.
 
-- create a configuration for the IDP
+### Configure IDP
 
-  The IDP requires a strong random key for its CSRF cookie. You can generate
-  such a key using the following openssl command:
+The Identity Provider application (IDP) requires a strong random key for its
+CSRF cookie. You can generate such a key using the following openssl command:
 
 ```
 openssl rand -base64 32
 ```
 
-  Use this value and create `idp.toml`:
+Use this value and the database credentials from your cacert-devsetup and
+create `idp.toml`:
 
 ```
 [security]
 csrf.key = "<32 bytes of base64 encoded data>"
+  
+[db]
+dsn = "$MYSQL_USER:$MYSQL_PASSWORD@tcp(localhost:13306)/cacert
 ```
 
-- create a configuration for the Demo application
+### Configure the Demo Application
 
 You will need a 32 byte and a 64 byte random secret for the session
 authentication and encryption keys:
@@ -159,6 +182,9 @@ in this repository provides the UI components that are required by Hydra.
 openssl rand -base64 32
 ```
 
+You also need the client id and the client secret, that have been generated
+during the OIDC client setup described above.
+
 ```
 [oidc]
 client-id = "<client id from hydra clients invocation>"
@@ -169,6 +195,26 @@ in this repository provides the UI components that are required by Hydra.
 enc-key = "<32 bytes of base64 encoded data>"
 ```
 
+## Frontend resource build
+
+The frontend resources are built using [webpack 5](https://webpack.js.org/)
+and [yarn](https://classic.yarnpkg.com/lang/en/). You need recent nodejs
+and yarn versions. See the
+[Debian installation instructions](https://github.com/nodesource/distributions/blob/master/README.md#debinstall)
+of nodesource or look at the other options on the
+[nodejs Download page](https://nodejs.org/en/download/) if you cannot use
+Debian Bullseye or newer.
+
+When you are sure that you have nodejs >= 12 and yarn you can install the
+required dependencies and run webpack like this:
+
+```
+yarn
+yarn run build
+```
+
+## Start
+
 Now you can start Hydra, the IDP and the demo app in 3 terminal windows:
 
   ```

webpack.config.js

@@ -32,6 +32,7 @@ module.exports = {
         path: path.resolve(__dirname, 'static'),
         filename: 'js/[name].bundle.js',
     },
+    devtool: 'source-map',
     optimization: {
         minimize: true,
         minimizer: [new TerserPlugin()],
@@ -59,14 +60,14 @@ module.exports = {
                     loader: 'postcss-loader',
                     options: {
                         postcssOptions: {
-                            plugins: function () {
-                                return [
-                                    require('precss'),
-                                    require('autoprefixer'),
-                                ];
-                            }
-                        }
-                    }
+                            plugins: [
+                                [
+                                    'precss',
+                                    'autoprefixer',
+                                ],
+			    ],
+                        },
+                    },
                 }, {
                     loader: 'sass-loader',
                 }]