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.
This commit is contained in:
Jan Dittberner 2021-01-02 10:42:19 +01:00
parent 49c91cddb0
commit cd61f7d3cf
4 changed files with 2569 additions and 9804 deletions

View file

@ -7,9 +7,12 @@ in this repository provides the UI components that are required by Hydra.
## Setup ## Setup
- create certificates for the IDP, the application and Hydra. You can use the ### Certificates
testca from the [CAcert developer setup](https://git.dittberner.info/jan/cacert-devsetup)
like this: 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 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 . 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 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" 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: serve:
@ -110,15 +124,20 @@ in this repository provides the UI components that are required by Hydra.
- "${YOUR SECRET FOR 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 ::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/ \ 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 --client-uri https://register.cacert.localhost:3000/info/app
``` ```
the command returns a client id and a client secret that you need to The command returns a client id and a client secret, that you need for the
configure for the demo application 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 The Identity Provider application (IDP) requires a strong random key for its
such a key using the following openssl command: CSRF cookie. You can generate such a key using the following openssl command:
``` ```
openssl rand -base64 32 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] [security]
csrf.key = "<32 bytes of base64 encoded data>" 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 You will need a 32 byte and a 64 byte random secret for the session
authentication and encryption keys: authentication and encryption keys:
@ -159,6 +182,9 @@ in this repository provides the UI components that are required by Hydra.
openssl rand -base64 32 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] [oidc]
client-id = "<client id from hydra clients invocation>" 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>" 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: Now you can start Hydra, the IDP and the demo app in 3 terminal windows:
``` ```

9679
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

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

2397
yarn.lock Normal file

File diff suppressed because it is too large Load diff