[New Account Console] Way to rewrite App.tsx

[Alex Oliynyk]

Happy New Year!

I'd like to change the layout of account console built with React - change styles, get rid of sidebar etc. And for this I need to modify `App.tsx`. After making changes it does not appear to be included in the build and changes are not displayed.

Is there a nice way to do that?

Best,

Alex

[Stan Silvert]

Hi Alex,

We designed this so that most people could make simple changes without doing a build.  But if you really need to change App.tsx then the tsx file needs to be transpiled from TypeScript to javascript.

Did you know about the quickstart where we demonstrate how to extend the new account console?
https://github.com/keycloak/keycloak-quickstarts/tree/latest/extend-account-console

Perhaps I need to add a readme that points to this quickstart.

Stan

--
You received this message because you are subscribed to the Google Groups "Keycloak User" group.
To unsubscribe from this group and stop receiving emails from it, send an email to keycloak-use...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-user/34a146e6-1f1e-4558-8153-0c3003732bdan%40googlegroups.com.

[Alex Oliynyk]

Hey Stan,

thanks for the prompt reply!

Yes, I saw extend-account-console repo, it helped a lot. Actually, we are transpiling tsx -> js and putting all the files inside `resources` folder. But App.js, Main.js are not rewritten, even when I include `index.ftl` file. 

Only when I rename Main.tsx (js) -> MyMain.tsx (js) and change entry point file in the `index.ftl` I'm able to use my code. That does not look neat to me though.

Maybe there is a cleaner way to do that?

Cheers!

[Stan Silvert]

Are you creating your own theme like:
<keycloak install>/themes/mytheme

You should not modify anything in <keycloak install>/themes/keycloak.v2.
You should extend it using theme.properties as shown in the Server Developer guide.

So the way the theme system works is that any file in your extended theme will be used instead of the matching file in the parent theme. 

To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-user/d9a11b36-b943-45d4-bd6a-f15bddee905dn%40googlegroups.com.

[Alex Oliynyk]

Thanks, Stan for the hints.

I did not modify the <keycloak install>/themes/mytheme. 

What helped me was adding my modified scripts to the theme.properties scripts section.

E.g. to make Keycloak take my App.js and AccountPage.js code I have to add like:

scripts=App.js content/account-page/AccountPage.js 

Maybe it can help someone else, took a while to figure it out.

Best,

Alex

[Soft Dev]

Hi alexo, did you transpile your files with babel or by hand? i have errors in the imports of App.tsx and AccountPage.tsx

Thank you

[Alex Oliynyk]

Yes, I did transpile all the files. That's actually a bizarre part which I believe should be done very carefully.

Because in order to transpile files I included all the .ts files from the Keycloak's keycloak-preview preview theme. 

But I changed only few of them.

And then it's like - I have all the files from the parent theme (keycloak-preview) in my custom theme, BUT transpiled files only get used when I 

add them in the `theme.properties` scripts section as I wrote above.

So I ended up with the theme where most of the files are from keycloak-preview + few of mine with modified UI.

Cheers,

[Stan Silvert]

On 1/21/2021 11:38 AM, Alex Oliynyk wrote:

Yes, I did transpile all the files. That's actually a bizarre part which I believe should be done very carefully.

Because in order to transpile files I included all the .ts files from the Keycloak's keycloak-preview preview theme. 

But I changed only few of them.

And then it's like - I have all the files from the parent theme (keycloak-preview) in my custom theme, BUT transpiled files only get used when I 

add them in the `theme.properties` scripts section as I wrote above.

So I ended up with the theme where most of the files are from keycloak-preview + few of mine with modified UI.

Cheers,

Anything you write in TypeScript must be transpiled to javascript in order to run in the browser.  But you are not strictly required to use TypeScript if you don't want to.  Plain javascript works just fine.

Also, you should not need to add these files to the scripts section in theme.properties as long as the module loader can find them.

The new console will already be looking for App.js.  So if you transpile it and put that into the right spot, your new App.js will be loaded instead of the one in the parent.

Lastly, I'm interested in what you needed to change in App.tsx.  We tried to make the application so that you wouldn't need to modify that.

To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-user/880db433-d4af-40e2-9f10-cd0849304e51n%40googlegroups.com.

[Alex Oliynyk]

In our case we wanted:

- change how the user's first & last name are presented (totally different style and move logout button into the dropdown)

- remove toolbar

Also, we needed to restyle header, sidebar and page section parts, but I believe that could be done with CSS without modifying App.tsx.

And a question regarding putting files into the "right spot":

- where is it? When I got transpiled e.g. App.js file, where should I put it so Keycloak grabs my file not the one from the parent theme?

Best,