Lovelace: Migrate from storage to yaml mode

Configuration Frontend
1

Hi All,

I think it won’t harm if I share my method of migrating from UI-configured Lovelace to YAML.
I started using yaml mode recently when the opportunity to create dashboards was introduced so I had my default dashboard in UI mode and created a new one with mode: yaml.
It became apparent that for various reasons I no longer use most of the UI configuration features and on top of that I wanted to try lovelace_gen.
The task is simple - you need to transfer your current Lovelace configuration to ui-lovelace.yaml and configure lovelace integration so it works in yaml mode and uses all necessary resources (if any).
After checking the docs that in yaml mode I’ll still be able to create a UI-controlled dashboard (via Configuration -> Lovelace Dashboards) I went ahead and here’s what you need to do:

  1. Go to Supervisor -> Snapshots and create a full snapshot, just in case.
  2. On your Overview screen click on three dots in the top right corner and select “Configure UI”.
  3. Click on three dots again and select “Raw configuration editor”.
  4. Select all text (Edit -> Select All in your browser).
  5. Copy it (Edit -> Copy in your browser) and click on x sign next to Edit Configuration.
  6. Open your favourite text editor, create a new file and paste your configuration into it (Edit -> Paste).
  7. Save it as ui-lovelace.yaml in <Home Assistant configuration folder>
  8. (Optional step if you use any resources i.e custom cards etc.) Open in your editor file <Home Assistant configuration folder>/.storage/lovelace_resources
    a. Remove anything apart from entries like
"type": "module",
"url": "/local/stack-in-card.js"

    and change them so the result is something like

resources:
  - url: /local/stack-in-card.js
    type: module
  - url: /local/button-card.js
    type: module
    ...

   b. Select all text (`Edit -> Select All`) and copy it (`Edit -> Copy`).
  1. Open in your editor configuration.yaml.
  2. Add the following
lovelace:
  mode: yaml
  1. If using any resources, paste the copied at step 8 text below mode so the result is
lovelace:
  mode: yaml
  resources:
    - url: /local/stack-in-card.js?v=0.1.0
      type: module
    - url: /local/button-card.js?v=20200319
      type: module
      ...

Restart your HA and in Configuration -> Lovelace Dashboards you’ll see your default dashboard as ‘Configuration method: YAML file’.

Hope it’s useful to someone.
Here is official documentation on yaml mode and dashboards.

5 Likes