Using custom assets
Last updated
Last updated
TLDR: There is nothing specific to Keycloakify about importing assets. You can do it however you would in any other project.
Just if you're referencing assets that are in the public directory, use import.meta.env.BASE_URL
Let's say you want to put te logo of your company on every pages of the theme.
First you'd eject the Template:
This will create a src/login/Template.tsx file in your project.
Let's use this placeholder for the demo: logo.png.
We put the file in public/img/logo.png
Now let's edit the template to import the file:
You can see the result by running npx keycloakify start-keycloak
If you ever need to SSH into the Keycloak server and hot swipe the image you can find it at
/opt/keycloak/themes/<name of your theme>/login/resources/dist/img/logo.png
Importing your asset from the public directory has the drawback that you won't get a compilation error if you made a mistake, like for example if you rename a file and forget to update the imports. A nice solution for this is to let Vite or Webpack handle the import.
Let's move our logo.png to /src/login/assets/logo.png
Now let's update the imports:
This will yield the same result except that now if you delete, move or rename the logo.png file you'll get a compilation error letting you know that you must also update your Template.tsx file.