[MissingTutorial/HACK] HOw to use DesignerUI in Mac M1 Monteray,

General
1

After a week wondering around, I want to share or document a short tutorial how to run DesignerUI in Mac M1 because I find that Designer tutorial is not simply run.

Let say an additional tutorial in case someone needed. Special thanks to @Rodolfo_Felipe who answered my questions in 2 posts before.

Apple M1, Sonoma 14.4.1, IntelliJ 2023.3.6, DesignerUI 4.6.26, Homebrew JDK 21.0.2.

Basically you can follow all steps in designer tutorial.

After you install plugin, import starter project to intellij then:

  • Use internal node provided by vaadin-maven plugin
    Add <require.home.node>true</require.home.node> in your properties insidepom.xml.
    It seems vaadin plugin cant detect node installed using homebrew.
    I try to add symlink ln -s /opt/homebrew/opt/node@20/bin/npm /usr/local/bin/ and node detected but it shows only blank editor page in browser.
    In this moment i stick to use internal node from vaadin plugin.

  • Build Main View → if everything is right, you can create main-view.ts with template-type: lit.

  • Update import statement from newly created main-view.ts,

    import { LitElement, html, customElement} from ‘lit-element’;

    to:

    import { LitElement, html, css} from ‘lit-element’;
    import { customElement } from ‘lit-element/decorators.js’;

    You can see that import error warning dissappear after this fix.

  • Run `mvn vaadin:prepare-frontend’. It will download all available ui component.

  • Open you main-view.ts in browser because this is the only way that works. You can activate this feature in system settings -> editor -> vaadin designer -> enable chrome editor.

  • !! Sometime you cant use vaadin component (it is shown gray) even after you do mvn vaadin:prepare-frontend. Let say i want to use vaadin-vertical-layout.
    I make sure that it is available in node_module/@vaadin/vertical-layout.
    Then add import '@vaadin/vertical-layout/src/vaadin-vertical-layout.js'; manually into main-view.ts,
    Close editing browser and openmain-view.ts once again in browser. Usually it will show all vaadin components that cant be accessed before.
    This trick can solve problem when designer shows only a page without any component availables or a page without a predefined template.

    I tried to invalidate cache and restart intelliJ but it seems that it is not imported. Designer UI shows unaccessable components.

    Adding manually and remove it later, I can see and use other vaadin component which are not accessible before.

Like I said, this is what i do and it works. Maybe not a formal (or formally correct). But I hope it will solve all headaches to prepare and run your project using designerui in M1.

Feel free to add your opinion. I am open for suggestion.

regards
sLawalata

2 Likes
2

Nicely put together @sanga2, thanks for your contribution.

Happy to have helped :bowing_man: