- 17
- 73 100
The UI Dawg
United States
Приєднався 23 тра 2020
Solving Front-end problems and sharing the solution
Keycloakify - Dynamically Render Content with PostBuild
Example Repo: github.com/willwill96/keycloakify-post-build-example
postBuild Docs docs.keycloakify.dev/configuration-options/postbuild
postBuild Docs docs.keycloakify.dev/configuration-options/postbuild
Переглядів: 88
Відео
End to End Testing Npm Packages With Verdaccio
Переглядів 1123 місяці тому
End to End your npm packages with Verdaccio Source PoC code can be found here: github.com/willwill96/verdaccio-e2e-testing
What is Keycloakify?
Переглядів 3,4 тис.6 місяців тому
Keycloakify Starter Repo: github.com/keycloakify/keycloakify-starter Keycloakify Docs: docs.keycloakify.dev/ Keycloakify Storybook: storybook.keycloakify.dev/ Keycloakify Repo: github.com/keycloakify/keycloakify
Build Reactjs Keycloak Themes with Keycloakify
Переглядів 37 тис.Рік тому
Note: Some of the information regarding developing themes past the 2:00 mark is now inaccurate. Check out the information at keycloakify's documentation site instead. Blog Post: willwill96.github.io/the-ui-dawg-static-site/en/keycloakify/ Keycloakify Starter Repo: github.com/keycloakify/keycloakify-starter Keycloakify Docs: docs.keycloakify.dev/ Keycloakify Storybook: storybook.keycloakify.dev/...
install npm packages directly from git
Переглядів 3,9 тис.2 роки тому
Background Music: Track: Aurora - WOMA [Audio Library Release] Music provided by Audio Library Plus Watch: ua-cam.com/video/HSKiM5iAw7w/v-deo.html Free Download / Stream: alplus.io/aurora
Inline styles with this HIDDEN Nexjts Feature
Переглядів 1422 роки тому
hdjirdeh/status/1369709676271726599
Creating a Web Scraper in under 2 minutes
Переглядів 562 роки тому
Background Sound Information: Track: Wonders - WOMA [Audio Library Release] Music provided by Audio Library Plus Watch: ua-cam.com/video/VlveVCamWtw/v-deo.html Free Download / Stream: alplus.io/wonders
3 Ways to Reuse Code Across Multiple Frameworks
Переглядів 1922 роки тому
3 Ways to Reuse Code Across Multiple Frameworks Veaury: github.com/devilwjp/veaury Stencil: stenciljs.com/ This video is now cross-posted as a blog article! willwill96.github.io/the-ui-dawg-static-site/en/reusing-components/ Background Music: Track: Feel - Land of Fire [Audio Library Release] Music provided by Audio Library Plus Watch: ua-cam.com/video/qAos_41O0lc/v-deo.html Free Download / Str...
Version Your Packages with Changesets
Переглядів 9 тис.2 роки тому
Changesets repo: github.com/changesets/changesets Monorepo Information: monorepo.tools/ This video is now cross-posted as a blog article! willwill96.github.io/the-ui-dawg-static-site/en/version-with-changesets/ Background Song Information: rainy night by Luke Hall soundcloud.com/c_luke_hall Creative Commons - Attribution-ShareAlike 3.0 Unported - CC BY-SA 3.0 Free Download / Stream: bit.ly/3TIQ...
Monkey Patch your Analytics Events Past Adblockers
Переглядів 802 роки тому
Code for this lives here: github.com/willwill96/petfinder-api-apps/tree/main/apps/dog-search Inspiration for this video came from: ua-cam.com/video/bVRo68NByvE/v-deo.html Additional References: www.freecodecamp.org/news/save-your-analytics-from-content-blockers-7ee08c6ec7ee/ Timestamps: 00:00 Intro 00:39 What is Monkey Patching? 02:59 Adblocker Background Knowledge 04:22 App Design 08:21 Closin...
Containerize your Development with VS Code Dev Containers
Переглядів 8 тис.2 роки тому
Use VS Code Dev Containers to containerize your workflow! code.visualstudio.com/docs/remote/containers This video is now cross-posted as a blog article! willwill96.github.io/the-ui-dawg-static-site/en/devcontainers/
Creating a GraphQL Server for Petfinder API
Переглядів 1874 роки тому
Repo with code: github.com/willwill96/petfinder-graphql Petfinder API Docs: www.petfinder.com/developers/v2/docs/
React State Pitfalls
Переглядів 1064 роки тому
These are the most commonly made mistakes for React beginners in my experience. Link to repo with code: github.com/willwill96/react-useState-pitfalls
Nextjs: Setting up Petfinder API
Переглядів 2,6 тис.4 роки тому
Link to Petfinder: www.petfinder.com/ Link to Petfinder API docs: www.petfinder.com/developers/v2/docs/ Link to Final Code: github.com/willwill96/nextjs-petfinder-api-example
Apollo GraphQL: Improving Network Performance with cacheRedirects
Переглядів 794 роки тому
Apollo GraphQL: Improving Network Performance with cacheRedirects
This is fantastic
does css libraries like tailwind work
Great content
You are the best! I was searching for the solution for a month. God bless you!
Note: Some of the information regarding developing themes past the 2:00 mark is now inaccurate. Check out the information at keycloakify's documentation site instead.
Awesome video!! Please i'm wondering how do i change the primary blue color globally to match my App's primary color? Where can i find the global cofig file to change the color? Secondly, after applying the theme, i started getting CORS error, but when i switched back to Keycloak default theme, the error was gone. Is there something that needs to be done? PS: I have an existing Angular project, i'm just using Keycloak for Authentication purpose. I currently have * in my CORS setting in Keycloak so i'm sure the error isn't from Keycloak configuration and the fact that the error disappears after switching back to Keycloak default theme signifies there's something i'm missing with Keycloakify theme. Thanks in anticipation.
With your Dockerfile I get "mvn not found" error.
Check out the attached blog post. It has an updated docker file that installs maven
Great awesome video. but as of now I can see the login button page with react and vite logo as initial page but you have shown in the video like it will open react app with custom keycloakify theme that's i can't see in this current "keycloakify.starter" Could you please make a details video on it. or just you can share you repository code might be that will really helpful
I'll do a video tutorial soon
@@josephgarronegj Awesome thank you. Also if you can share or if possible like login screen split into two screens 1 for email and another one for password is that possible?
@@rohit87k You have an example of what you're thinking about?
@@josephgarronegj Yes. I have shared with you linkedin chat. I can't share it here because url not allowed to share in the comment
Thanks a lot for this video ❤❤❤
I created a custom theme by keycloakify . Can I send the user role from the register page?
I don't know for sure, but I don't think keycloak will support that out of the box. You might need a custom flow within keycloak to make that work.
First of all, thank you for your initial response. While registering, I needed to determine the user's (Customer, Company, ...) type, and then I added this using 'user.properties', which worked. However, to work dynamically, I need to load these property values (Client or Realm) into the properties and pass them when the Register page loads. Do you have any information on this?@@theuidawg3274
This may be more involved than you were hoping, but the way we accomplish something similar by extending the FreemarkerLoginFormsProvider implementation that ships with keycloak. From there, we were able to inject additional properties into the kcContext object available in keycloakify. Unfortunately, I can't share the source code, but if you have follow on questions I can try to answer.
It was helpful but the app is having build issue.
It's been a while since I made this video, but I can try to debug if you give me a stack trace
This was really helpful man thanks for everything
Thx for the video but why i get this error when i want to start again? yarn run v1.22.21 $ copy-keycloak-resources-to-public && start-storybook -p 6006 node:internal/errors:865 const err = new Error(message); ^ Error: Command failed: npm run build at checkExecSyncError (node:child_process:885:11) at Object.execSync (node:child_process:957:15) at D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:160:63 at step (D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:57:23) at Object.next (D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:38:53) at D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:32:71 at new Promise (<anonymous>) at __awaiter (D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:28:12) at Object.action (D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:91:44) { status: 1, signal: null, output: [ null, null, null ], pid: 1520, stdout: null, stderr: null } thxx for the help
Are you saying it worked and started up once, and then hasn't worked since?
@@theuidawg3274 after i terminated and i want to start again. The npm start give me the error output. Sorry for my bad English
No worries, just wanted to make sure I understood. It might be worth trying to run "docker system prune" before rerunning the command. If that doesn't work, I recommend to open an issue or discussion on the keycloakify repo.
Hi The UI Dawg, When i do ---> docker build -t keycloak-app . I have this error: ERROR [builder 3/4] COPY --from=keycloakify_jar_builder /opt/app/build_keycloak/target/keycloakify-sta 0.0s ------ > [builder 3/4] COPY --from=keycloakify_jar_builder /opt/app/build_keycloak/target/keycloakify-starter-keycloak-theme-4.4.4.jar /opt/keycloak/providers/: ------ failed to compute cache key: "/opt/app/build_keycloak/target/keycloakify-starter-keycloak-theme-4.4.4.jar" not found: not found My DOCKERFILE: FROM node:alpine3.18 as keycloakify_jar_builder RUN apk update RUN apk add openjdk11 RUN apk add 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 --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"] Can you help me please?
My only guess is that the version (4.4.4.jar) might be misaligned with what's defined in the keycloakify starter. If that doesn't help, I recommend opening a discussion on the keycloakify repo
this video is very helpful and forecasting, I encounter the same problem 1 year after this video
This video is in a chrome tab for more than a month... Today was the day to watch it I can see that I have learned something new! Thank you very much! I have a question - is that going to be so easy to setup java dev container? What is your opinion?
I haven't set it up, but it should be just as simple to setup java because they have a predefined template for it 🙂. If you need a build tool like maven, it looks a bit more config involved to setup but they do have instructions. UA-cam doesn't allow links in comments, but if you Google "maven vs code devcontainers" I think you can find it - it should be a markdown file in their repo. I love using devcontainers for trying out new languages, because it lets you skip the entire installation setup.
@@theuidawg3274 i found the templates, there is one for java container. I will try my luck with it! Thank you!
nice
Im doing everything as mentioned in the video but the keycloakify-starter theme is not available from the theme options (only "base" and "keycloak" are available)
Sorry, I don't check my notifications often. Guessing you may have already got this figured out, but if you can post any additional information that would be helpful. The keycloakify GitHub discussions section is also a good place to get help.
same thing
Good stuff!
Can I customize the admin console themes using this ?
Only login and account themes are currently supported out of the box with working sets of components. But you can use the extraPages config to implement any pages that keycloakify doesn't support yet: docs.keycloakify.dev/build-options#extrapages
ok thanks for the info @@theuidawg3274
Hi! I've seen your blog about this video, and I followed, but its not working now. docker error message is bellow. E: Unable to locate package openjdk-11-jdk Error response from daemon: The command '/bin/sh -c apt-get update && apt-get install -y openjdk-11-jdk && apt-get install -y maven;' returned a non-zero code: 100 Failed to deploy '<unknown> Dockerfile: Dockerfile': Can't retrieve image ID from build stream
node:18 is bookworm linux, and it is not support openjdk11 anymore So I successed change base image and install command. FROM node:alpine3.18 as keycloakify_jar_builder RUN apk update RUN apk add openjdk11 RUN apk add maven
@@coding-gorilla to what base you changed ?
@@winstonlowel1286 alpine3.18
@theuidawg I'd like your help with my simple example. If I'd a simple example of react app, what the steps should I need to do? Thanks 🙏
I cloned the keycloakify starter template in this video, that's about as simple as the react application can be for this use case. That's the easiest place to get started: github.com/keycloakify/keycloakify-starter
You can not believe how happy I am that I don't have to get into that crazy ftl format too much. Big thanks to every one of you!
Thank you for your nice feedback 😊
Thank you, @the UI Dawg, for this fantastic video introduction! It's wonderful that you demonstrate to people how to create a Keycloakify Docker image that bundles a theme. This was much needed, as instructions were previously only available for Helm. I'd like to highlight that after bunlding the theme (2:46), you are provided with a single command that you can run to spin up a dockerized Keycloak with the theme preloaded (and hot reload enabled). This would be the most straightforward method to test the theme in an actual Keycloak instance. Once again, thank you for the informative video. I'll be sure to include it in the landing page and documentation.
Oh wow. Maybe a little embarassing, but I had no idea that command existed. I was going to add an annotation with this updated information, but apparently annotations don't exist anymore.
This was actually super helpful. Is the best way to incorporate themes to add keycloakify to an existing UI project? Or run the starter project and transfer the .jar file?
I'm glad it was helpful! It's possible to integrate into an existing UI project, but I find it easier to clone the starter project, and start ripping out the stuff you don't need.
Yes, I agree with Dawg, I mean at the moment you can only collocate Keycloakify in a project that bundles with web pack. If you're using something else than create-react-app you are probably out of luck. We are working on improving this though.
So I am new to programming. What I am struggling with is the source code. Where does it reside? Inside the container? How do we manage it? Git inside the container? Any help would be appreciated.
The ".devcontainer" folder typically lives alongside your source code. Devcontainers aren't technically opinionated on the the way you manage your code, but git is definitely the industry standard. VS Code mounts your code inside of the container, meaning changes should be reflected both inside and out of the container. I typically use my git commands from within the container, but either way should work fine. I think this is the most minimal example of a repo using devcontainers in case your looking for an example: github.com/willwill96/simple-web-scraper Let me know if I can clarify anything else for you and welcome to programming!
@@theuidawg3274 thank you for the clarification!
Great video. Have you found a way to use conventional commits with changesets?
Funny enough, I recently wrote a script to convert conventional commits to generate change sets. If you want to take a look it's in a pr on one of my repos: github.com/willwill96/mono-repo-tools/pull/4
There's also a github issue open to add better integration, but it hasn't seen much traction recently: github.com/changesets/changesets/issues/862
@@theuidawg3274 This is a really nice script. Though, i am getting an empty array in getCommitsSinceRef function. Shouldn't that be an array of commit hashes? I am pushing on main and using it in github actions ci
I fixed it by making a pr from different branch/ref. Now even if changesets are written, tags won't get generated
Ah yeah, I think if it's being run from CI on the main branch, you might need to update the ref being used for getCommitsSinceRef to be whatever the previous latest commit was. Some CI systems provide it as env var, but you could probably base it off the most recent tagged commit if that doesn't work.
Thanks for the video, But I get error when deploying to vercel, because of following error: basically in deployment when "npm run build" is run it doesn't get access the following path. Any suggestions, would be helpful. Error: Cannot find module '/vercel/path0/.next/server/chunks/Build/Cesium/index.cjs'
I'm not really sure, but it could be the cjs file extensions. You could try replacing the cjs files with js extension
@@theuidawg3274 Thanks for your reply, it appears to be a problem that Cesium folder which resides inside public directory, is not visible to vercel when it runs "npn run build" command. Any suggestion, how this static library folder that we copied to public folder in nextjs directory can be made visible to vercel?
Nice explanation, ez sub! Really appreciate the calm and considered presentation
Nice video. I like how calm your voice is lol. Do you think it's also possible to setup this in Jetbrains IDEs? I've been having a hard time even making them work with WSL, and adding Docker on top of that... VS Code is miles ahead, at least for now.
Thanks! I don't think jetbrains has something as fully featured as this yet, although last I checked they have a ticket open to implement it. You could probably get a partial implementation by running docker manually and forwarding the right ports to make remote debug work. It would be a bit hacky though.
Note: to all. Performing these steps will not work. Thumbs down,
thanks
im in love with those vids man! keep goin
your channel is gonna go sky high. gold content.
useful,thanks
Thank you very much man
Thank you
Thanks a lot... : )
It is helpful, tks!
I have CORS policy issue. How can I solve it?
Hard to help you debug without more information. I would guess the access token you are using is invalid. Double check using postman or something similar to verify it's only an issue in browser.
Would next-transpile-modules solve the ssr/ES6 issue?
Potentially! However, you may also run into issues with cesium needing browser apis like window. Would be interested to hear your results if you try it out!
How are you getting around CORS?
The Petfinder API supports cross-origin requests, so I wouldn't expect to run into any cors issues. Are you seeing issues with the token request or the actual API call?
@@theuidawg3274 Funny enough I was able to resolve the issue shortly after posting the comment. I am still not 100% sure what the issue was. Thanks for the reply though.
@@drewole No problem. I did a bit of playing around and found that you get a cors error if your auth token is invalid, so maybe it's possible your token was expired? Just spitballing. Regardless, glad you got your issue resolved!
Audio could be louder. Great content though.
Thanks for documenting this! It was really helpful :)
Very nice quickstarter. Do you have a eloborate video on storybook as well? Do share the link