Giter Club home page Giter Club logo

keycloakify-demo-app's Introduction

This repo constitutes an easily reusable CI setup for React App in general, and Apps that generates Keycloaks's theme using keycloakify in particular.

By default this setup assumes you want to have single project for your main app and for your Keycloak pages.
If, however, you want a starting point for a project which only purpose is to be a Keycloak theme read this.

  • 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.
  • 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
  • A CHANGELOG.md will be maintained for you using the commit messages between releases. If you don't want a specific commit to appear in the changelog do something like. git commit -am "yadi yada (changelog ignore).

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.

Important note about Keycloakify

This branch is configured for customizing only the css of the keycloak pages.
If you want to implement a more advanced configuration you can checkout the look_and_feel branch.

This repo is currently configured to build the theme with --external-assets. If your keycloak pages need to stay up even when your app is down you should remove --external-assets here.

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.

Docker

docker build -f Dockerfile -t garronej/keycloakify-demo-app:test .
#OR:
yarn && yarn build && tar -cvf build.tar ./build && docker build -f Dockerfile.ci -t garronej/keycloakify-demo-app:test . && rm build.tar

docker run -it -dp 8083:80 garronej/keycloakify-demo-app:test

# http://localhost:8083/keycloakify-demo-app won't work because of the nginx.config for / and not /keycloakify-demo-app

Keycloak theme only

If you are only looking to create a keycloak theme, there are a lot of things you should remove after clicking image:

  • You can remove all things related to building a docker image and publishing on github pages: remove these lines and this line from .github/workflows/ci.yaml.
  • All the assets will need to be served by Keycloak: remove --external-assets from this line.
  • You can remove /Dockerfile, Dockerfile.ci ,/.dockerignore and /nginx.conf
  • You can assume the app will only run in the context of Keycloak so you can remove these lines in src/index.tsx (and you can, of course, remove src/App.tsx, App.css ect...).
  • Replaces those lines by const kcContext = realKcContext ?? kcContextMocks.kcLoginContext;, now if you run yarn start you will be able to debug the login page, replace kcLoginContext by kcRegisterContext and the register page will be loaded instead.
  • You can remove the homepage field from the package.json

For the rest all stays the same, when your theme is ready, just upgrade the version in package.json and push.
You will find your theme packaged in a .tar file in the GitHub releases of your project.

keycloakify-demo-app's People

Contributors

actions-user avatar cahuzacf avatar garronej avatar thieryw avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.