DOCSEARCHbyAlgolia
Submit Docs

The UI Dawg

website·Indexed 29 days ago

https://willwill96.github.io/the-ui-dawg-static-site/en/introduction

A front-end development blog and resource center covering topics such as Keycloakify for Keycloak themes, VS Code Devcontainers, npm package management with Verdaccio and Changesets, and cross-framework component reuse.

Tokens
4.6K
Snippets
23
Records
34
Agent score
75%

What's inside The UI Dawg

  1. Overview of Keycloakify for React themes

    Keycloakify allows developers to build Keycloak themes using React. It solves two primary challenges in native Keycloak theming: converting React builds into the Freemarker templates (.ftl) required by Keycloak, and dynamically updating asset URIs at runtime to match the hashed URLs generated by the Keycloak container.

  2. Overview of Petfinder GraphQL Wrapper

    The Petfinder GraphQL wrapper provides a GraphQL interface for the Petfinder API. It is built using Express and Apollo Server and can be deployed as Express middleware, installed as an npm package, or run as a standalone Docker image.
    # Install via npm
npm install willwill96-petfinder-graphql

# Or run via Docker
docker pull wbw4sv/petfinder-graphql

  5. Implement a Micro-Frontend architecture for component sharing

    Micro-frontends allow different parts of a page to be owned by different teams and built with different frameworks (e.g., a Next.js header, a Vue homepage, and a Svelte footer). A separate service merges these independent applications into a single page. This is suitable for large organizations but introduces complexities in bundle splitting, global state management, and potential performance hits due to transaction timing.

  6. Set up a VS Code Dev Container

    To create a containerized development environment, you need VS Code, Docker, and the 'Remote Containers' extension installed.

    1. Open your project folder in VS Code.
    2. Open the Command Palette (Ctrl/Cmd+Shift+P).
    3. Run the command "Create New Devcontainer Config".
    4. Select the image appropriate for your project (e.g., Node).
    5. Once the configuration is generated, run "Remote Containers: Rebuild & Reopen in Container" from the Command Palette to build and enter the environment.

  7. Implement a full E2E test workflow for npm packages using GitHub Actions and Verdaccio

    This workflow demonstrates how to set up a Verdaccio registry, configure the npm client to use it, publish a test version of a package, and then install that package in a separate test project to verify its functionality.

    Key steps include:

    1. Setting the registry globally via .npmrc.
    2. Using npm-cli-login to authenticate with the local registry.
    3. Publishing the package using the --registry flag.
    4. Installing the specific test version in a consumer project.
    jobs:
  e2e-test:
    services:
      verdaccio-instance:
        image: verdaccio/verdaccio
        ports:
          - 4873:4873
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js 20
        uses: actions/setup-node@v3
        with:
          node-version: 20
          cache: "npm"
      # Setup verdaccio as the default npm registry
      - run: echo "registry=http://localhost:4873" > ~/.npmrc
      - name: Publish Package
        run: |
          {
            cd verdaccio-test
            npm version 1.0.0-test-ci --git-tag-version=false
            npm ci
            npx npm-cli-login -u test -p 1234 -e test@domain.test -r http://localhost:4873
            npm publish --registry http://localhost:4873
          }
      - name: "Test published package"
        run: |
          {
            cd verdaccio-test-install
            npm install
            npm install my-test-pkg1@1.0.0-test-ci
            npm run test
          }

  8. Apply a Keycloakify theme to a Realm or Client

    After deploying the JAR and starting Keycloak, the theme must be activated in the Admin Console:

    1. Log in to the Keycloak Admin Console.
    2. Navigate to the specific Realm and Client you wish to theme.
    3. Go to the client's Login Settings (located towards the bottom of the page).
    4. Select the keycloakify-starter theme from the dropdown.
    5. Click Save.

  9. Integrate Keycloakify JAR into Keycloak Docker image

    To make a Keycloakify theme available, the generated JAR file must be placed in the /opt/keycloak/providers directory before the Keycloak build step is executed.
    FROM node:18 as keycloakify_jar_builder

RUN apt-get update && \
    apt-get install -y openjdk-11-jdk && \
    apt-get install -y maven;

COPY ./keycloakify-starter/package.json ./keycloakify-starter/yarn.lock /opt/app/

WORKDIR /opt/app

RUN yarn install --frozen-lockfile

COPY ./keycloakify-starter/ /opt/app/

RUN yarn build-keycloak-theme

FROM quay.io/keycloak/keycloak:latest as builder

WORKDIR /opt/keycloak

# Copy the JAR from the builder stage to the providers directory
COPY --from=keycloakify_jar_builder /opt/app/build_keycloak/target/keycloakify-starter-keycloak-theme-4.4.4.jar /opt/keycloak/providers/
RUN /opt/keycloak/bin/kc.sh build

FROM quay.io/keycloak/keycloak:latest
COPY --from=builder /opt/keycloak/ /opt/keycloak/
ENV KC_HOSTNAME=localhost
ENTRYPOINT ["/opt/keycloak/bin/kc.sh", "start-dev"]

  10. Manage static assets and build-time variables in Keycloakify

    Keycloakify projects (based on create-react-app) support standard React asset and environment management:

    • Static Assets: Place files in the /public/ directory to have Keycloak host them.
    • Build-Time Variables: Prefix environment variables with REACT_APP_ and access them via process.env.REACT_APP_MY_VAR.
    • Development: Use yarn storybook to preview theme changes locally.

  11. Publish a package to a local Verdaccio registry

    To end-to-end test a package, build it and publish it to the local Verdaccio instance. Ensure your package.json correctly points to the compiled output (e.g., dist/) and includes the necessary build scripts.
    // package.json example
{
  "name": "my-test-pkg1",
  "version": "1.0.0",
  "main": "dist/index.js",
  "files": ["dist/"],
  "scripts": {
    "build": "tsc"
  }
}
    # Publish to the registry configured in .npmrc
npm publish