https://github.com/zavoloklom/keycloakify-webpack-example
https://github.com/zavoloklom/keycloakify-webpack-example
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zavoloklom/keycloakify-webpack-example
- Owner: zavoloklom
- License: mit
- Created: 2023-09-18T21:06:21.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-27T09:13:24.000Z (over 1 year ago)
- Last Synced: 2025-01-16T22:19:04.270Z (5 months ago)
- Language: TypeScript
- Size: 256 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Keycloakify + Webpack Example
This is example repository (src folder is a copy
from [keycloakify-starter](https://github.com/keycloakify/keycloakify-starter)) that
shows how to use [Keycloakify](https://github.com/keycloakify/keycloakify) with Webpack 5.
It is not a template, but you can use it as a starting point for your own project. For requirements for
Webpack configuration, please read [this section](#requirements-for-webpack-settings).
## How to start
```bash
git clone https://github.com/keycloakify/keycloakify-starter
cd keycloakify-webpack-example
yarn # install dependencies
```
You can test different Webpack configurations by executing commands:
```bash
yarn build-minimal # Build with babel-loader on minimal working config.
yarn build-babel # Build with babel-loader and Terser minification.
yarn build-babel-runtime # Build with babel-loader and Terser minification. Runtime chunk is extracted.
yarn build-ts # Build with ts-loader and Terser minification.
yarn build-esbuild # Build with esbuild-loader and Esbuild minification. Not working with ES5 target.
```
Read the instruction printed on the console to see how to test theme on a real Keycloak instance.
## Requirements for Webpack Configuration
> If you prefer code above documentation - take a look at [minimal working configuration](./webpack/configs/minimal.config.js).
**Base rules:**
- The output directory should be set to `build`.
- JavaScript files should be located in `build/static/js`.
- CSS files should be located in `build/static/css`.
**Webpack output:**
- Set `output.publicPath` to `/` to ensure all assets load correctly.
**Javascript:**
- Ensure both `output.filename` and `output.chunkFilename` are configured to store JavaScript files in `build/static/js`.
- `optimization.minimize` must be set to true.
- You can use any combination of `babel-loader`, `ts-loader`, `esbuild-loader`, and `terser`.
- `TerserPlugin` is optional.
**Styles:**
- If utilizing MiniCssExtractPlugin, configure filename to store files in `build/static/css`.
- If utilizing `style-loader`, it is working without any specific configuration.
- Loader `postcss-loader` is optional.
**Assets:**
- Configure `assetModuleFilename` to store files in `build/static`.
- You may need to set `generator.filename` in 'asset/resource' loaders to ensure assets are loaded appropriately.
**Other:**
- Make sure to copy all files from the `public` folder to `build` folder, excluding `index.html`, either with the `EventHooksPlugin` or `CopyWebpackPlugin`.