A starter and demo project for Keycloakify v6 - Component level customization.

Overview

A starter/demo project for Keycloakify

⚠️ Please read the two following notices ⚠️

This starter is for Component-level customization, if you only want to customize the page at the CSS level heads over to keycloakify-starter.

If you are only looking to create a theme and don't care about integrating it into a preexisting React app there are a lot of things that you can remove from this starter. Please read this.

Quick start

yarn install
yarn start # See the Hello World app
# Uncomment line 6 of src/KcApp/kcContext, reload https://localhost:3000
# You can now develop your Login pages.

# Think your theme is ready? Run
yarn keycloak
# Read the instruction printed on the console to see how to test
# your theme on a real Keycloak instance.

Introduction

This repo constitutes an easily reusable CI setup for SPA React App that generates Keycloaks's theme using keycloakify.

The CI workflow

  • This CI is configured to both publish on GitHub Pages and on DockerHub. In practice you probably want one or the other but not both.
    We deploy the demo app at demo-app.keycloakify.dev using GitHub page on the branch gh-pages (you have to enable it).
    To configure your own domain name please refer to this documentation.
  • To release don't create a tag manually, the CI do it for you. Just update the package.json's version field and push.
  • The .jar files that bundle the Keycloak theme will be attached as an asset with every GitHub release. Example. The permalink to download the latest version is: https://github.com/USER/PROJECT/releases/latest/download/keycloak-theme.jar. For this demo repo it's here
  • The CI publishes the app docker image on DockerHub. <org>/<repo>:main for each commit on main, <org>/<repo>:<feature-branch-name> for each pull-request on main and when releasing a new version: <org>/<repo>:latest and <org>/<repo>:X.Y.Z See on DockerHub

image

image

If you want an example of an app that put that setup in production checkout onyxia-ui: the repo, the login, the app.

Standalone vs --external-assets

The CI creates two jars

  • keycloak-theme.jar: Generated with npx keycloakify --external-assets, the assets, located static/**/*, like for example static/js/main.<hash>.js will be downloaded from https://demo-app.keycloakify.dev/static/js/main.<hash>.js (demo-app.keycloakify.dev is specified in the package.json.
  • standalone-keycloak-theme.jar: Generated with npx keycloakify, this theme is fully standalone, all assets will be served by the Keycloak server, for example static/js/main.<hash>.js will be downloaded from an url like http://<your keycloak url>/resources/xxxx/login/keycloakify-starter/build/static/js/main.<hash>.js.

More info on the --external-assets build option here.

Docker

docker build -f Dockerfile -t garronej/keycloakify-advanced-starter:test .
#OR (to reproduce how the image is built in the ci workflow):
yarn && yarn build && tar -cvf build.tar ./build && docker build -f Dockerfile.ci -t garronej/keycloakify-advanced-starter:test . && rm build.tar

docker run -it -dp 8083:80 garronej/keycloakify-advanced-starter:test

DockerHub credentials

To enables the CI to publish on DockerHub on your behalf go to repository Settings tab, then Secrets you will need to add two new secrets:

  • DOCKERHUB_TOKEN, you Dockerhub authorization token.
  • DOCKERHUB_USERNAME, Your Dockerhub username.

Standalone keycloak theme

If you are only looking to create a keycloak theme, you can run theses few commands after clicking image to refactor the template and remove unnecessary file.

rm -r src/App
rm src/KcApp/index.ts
mv src/KcApp/* src/

cat << EOF > src/index.tsx
import { createRoot } from "react-dom/client";
import { StrictMode, lazy, Suspense } from "react";
import { kcContext } from "./KcApp/kcContext";

const KcApp = lazy(() => import("./KcApp"));

if( kcContext === undefined ){
    throw new Error(
        "This app is a Keycloak theme" +
        "It isn't meant to be deployed outside of Keycloak"
    );
}

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <KcApp kcContext={kcContext} />
    </StrictMode>,
);
EOF

rm .dockerignore Dockerfile Dockerfile.ci nginx.conf

cat << EOF > .github/workflows/ci.yaml
name: ci
on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:

  build:
    runs-on: ubuntu-latest
    if: github.event.head_commit.author.name != 'actions'
    steps:
    - uses: actions/checkout@v2
    - uses: actions/[email protected]
      with:
        node-version: '14'
    - uses: bahmutov/npm-install@v1
    - run: yarn build
    - run: npx keycloakify
    - uses: actions/upload-artifact@v2
      with:
        name: standalone_keycloak_theme
        path: build_keycloak/target/*keycloak-theme*.jar
    - uses: actions/upload-artifact@v2
      with:
        name: build
        path: build

  check_if_version_upgraded:
    name: Check if version upgrade
    runs-on: ubuntu-latest
    needs: build
    outputs:
      from_version: ${{ steps.step1.outputs.from_version }}
      to_version: ${{ steps.step1.outputs.to_version }}
      is_upgraded_version: ${{ steps.step1.outputs.is_upgraded_version }}
    steps:
    - uses: garronej/[email protected]
      id: step1
      with: 
        action_name: is_package_json_version_upgraded

  create_github_release:
    runs-on: ubuntu-latest
    needs: 
      - check_if_version_upgraded
    # We create a release only if the version have been upgraded and we are on a default branch
    # PR on the default branch can release beta but not real release
    if: |
      needs.check_if_version_upgraded.outputs.is_upgraded_version == 'true' &&
      (
        github.event_name == 'push' ||
        needs.check_if_version_upgraded.outputs.is_release_beta == 'true'
      )
    steps:
    - run: mkdir jars
    - uses: actions/download-artifact@v2
      with:
        name: standalone_keycloak_theme
    - run: mv *keycloak-theme*.jar jars/standalone-keycloak-theme.jar
    - uses: softprops/action-gh-release@v1
      with:
        name: Release v${{ needs.check_if_version_upgraded.outputs.to_version }}
        tag_name: v${{ needs.check_if_version_upgraded.outputs.to_version }}
        target_commitish: ${{ github.head_ref || github.ref }}
        generate_release_notes: true
        files: |
          jars/standalone-keycloak-theme.jar
        draft: false
        prerelease: ${{ needs.check_if_version_upgraded.outputs.is_release_beta == 'true' }}
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
EOF
You might also like...

Starter-gatsby-blog - Gatsby starter for a Contentful project from the community.

Starter-gatsby-blog - Gatsby starter for a Contentful project from the community.

Contentful Gatsby Starter Blog Create a Gatsby blog powered by Contentful. Static sites are scalable, secure and have very little required maintenance

Jan 29, 2022

A web component that allows you to run high level programming languages on your websites (static websites included!)

Code-Runner-Web-Component A web component that allows you to run high level programming languages on your website via the public Piston API Show your

Dec 16, 2022

This simple project, show how work with async Fetch, function component and class component

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Feb 17, 2022

Node-cli-starter - Basic starter kit for building Node CLI applications with TypeScript.

node-cli-starter Minimal starter kit for building Node CLI applications with TypeScript. Getting Started To get started clone repo locally and run npm

May 17, 2022

Next-level academia! Repository for the Native Overleaf project, attempting to integrate Overleaf with native OS features for macOS, Linux and Windows.

Next-level academia! Repository for the Native Overleaf project, attempting to integrate Overleaf with native OS features for macOS, Linux and Windows.

Native Overleaf Overleaf is a fantastic webtool for writing and cooperating on LaTeX documents. However, would it not be even better if it were to beh

Dec 18, 2022

A pokemon-like project game where you level up by hacking your neighbor.

CTF BourgPalette A pokemon-like project game where you level up by hacking your neighbor. You play as a new hacker. You are not trying to capture all

Dec 27, 2022

Medusa on steroid, take your medusa project to the next level with some badass features 🚀

 Medusa on steroid, take your medusa project to the next level with some badass features 🚀

medusa-extender Full documentation website Medusa on steroid, take your medusa project to the next level with some badass features 🚀 The extender pro

Jan 3, 2023

Personal project to a student schedule classes according his course level. Using GraphQL, Clean Code e Clean Architecture.

Personal project to a student schedule classes according his course level. Using GraphQL, Clean Code e Clean Architecture.

classes-scheduler-graphql This is a personal project for student scheduling, with classes according his course level. I intend to make just the backen

Jul 9, 2022

🚀 Final Esports project based on Rocketseat's Next Level Week.

🚀 Final Esports project based on Rocketseat's Next Level Week.

The evolved version of the Esports project on the Next Level Week by Rocketseat. The web client is deployed on Vercel here: https://nlw-esports-ignite

Oct 26, 2022
Releases(v1.0.6)
Owner
Joseph Garrone
In charge of pushing for wider use of free and open-source software in the French administrations. Working on the Datascience platform of the future: Onyxia
Joseph Garrone
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Project to manage multiple emails at once with lots of customization. You can send and receive emails. Desktop notifications can be modified.

Technologies Used React Redux Tailwind CSS Features Admin dashboard User settings and or user dashboard send emails recive emails Connections through

Multi Email 9 Dec 17, 2022
GitHub starter project link: https://github.com/buildspace/waveportal-starter-project

Running React on Repl.it React is a popular JavaScript library for building user interfaces. Vite is a blazing fast frontend build tool that includes

MD Rafi Uddin 0 Jun 5, 2022
Lazy evaluation list with high tree-shaking affinity and easy customization.

Lazy evaluation list with high tree-shaking affinity and easy customization. Features ?? Lazy Evaluation: The collections are only enumerated to the m

Masanori Onoue 22 Dec 28, 2022
Salazar - a Discord bot that is easy to customize and configure, aiming at the possibility of customization for the user

Salazar is a Discord bot that is easy to customize and configure, aiming at the possibility of customization for the user. This is the BETA version, which uses the current version of Node.js.

guto 5 Dec 7, 2022
A non-overflowing `console.table` alternative with customization options.

nice-table A non-overflowing console.table alternative with customization options. Usage import { createTable } from 'nice-table'; type Person = {

Tim van Dam 5 Aug 4, 2022
This is a template for a peripheral customization PWA.

Peripheral Customization PWA This repository contains a template Progressive Web App (PWA) that can be used to customize peripherals. The template was

Google 3 Sep 30, 2022
Nftix-demo-ui - Demo UI used in my NFT course on Egghead.io

NFTix Demo UI This repository contains the UI used for my Egghead course on building a NFT ticketing system ?? ?? If you're watching the videos, use t

Ryan Harris 10 Dec 17, 2022
NFT Game Starter Project: https://github.com/buildspace/buildspace-nft-game-starter

Running React on Repl.it React is a popular JavaScript library for building user interfaces. Vite is a blazing fast frontend build tool that includes

Zahuis 2 Feb 11, 2022