Sharing UI add-ons

Now that you have the power to customize the UI through UI add-ons, a follow-up question may be how do I share this code and avoid repeating it for new implementations. That's where the power of sharing/reusing UI add-ons comes to solve this problem.

Publishing UI add-ons

So far you have a bunch of UI add-on source codes in your development machine and you want to share your code for someone else or your future-self to take it for a different storefront. When this use case is happening to you, you will need to publish the UI add-on (similar to publishing a JS module to npm).

So, the first step is to move your shell into the package (storefront) folder and then run the following command and make sure that this what you want to do because it won't prompt a confirmation, instead it will public the UI add-on by taking the name and version you selected when adding a UI add-on:

yalo addon:publish -t ui

After running the command you will see an output similar to this in you terminal:

██╗   ██╗ █████╗ ██╗      ██████╗      ██████╗██╗     ██╗
╚██╗ ██╔╝██╔══██╗██║     ██╔═══██╗    ██╔════╝██║     ██║
 ╚████╔╝ ███████║██║     ██║   ██║    ██║     ██║     ██║
  ╚██╔╝  ██╔══██║██║     ██║   ██║    ██║     ██║     ██║
   ██║   ██║  ██║███████╗╚██████╔╝    ╚██████╗███████╗██║
   ╚═╝   ╚═╝  ╚═╝╚══════╝ ╚═════╝      ╚═════╝╚══════╝╚═╝
                                                         

verifying credentials... done
verifying package... done (updating)
creating ui addon tarball... done
uploading tarball to registry... done
updating new version in DB... done
updating config for addon 'chickenshop' type:ui ... done

📘

UI Addon publishing

As mentioned before, if you run the command it will be published and there's no a rollback step. Don't worry if you publish a UI add-on by mistake, since UI add-ons are versioned, you can't delete a published version but you can publish a new one and let your team know about what version is the right one. Also, UI add-on versioning follows semver, so please try to follow as much as you can.

What happens if you try to publish your UI add-on again:

yalo addon:publish -t ui

The CLI will detect that you already have published the same version (the one set in package-config.yml) and will ask you if you want to publish a new version of it. If you enter Yes, it will let you choose a new semver to publish, otherwise it will stop.

██╗   ██╗ █████╗ ██╗      ██████╗      ██████╗██╗     ██╗
╚██╗ ██╔╝██╔══██╗██║     ██╔═══██╗    ██╔════╝██║     ██║
 ╚████╔╝ ███████║██║     ██║   ██║    ██║     ██║     ██║
  ╚██╔╝  ██╔══██║██║     ██║   ██║    ██║     ██║     ██║
   ██║   ██║  ██║███████╗╚██████╔╝    ╚██████╗███████╗██║
   ╚═╝   ╚═╝  ╚═╝╚══════╝ ╚═════╝      ╚═════╝╚══════╝╚═╝
                                                         

verifying credentials... done
verifying package... done (updating)
? Version(s) 0.1.0 for qsr (ui addon) already exists. Would you like to publish an update? (Y/n) 
? Choose whether new version is a major, minor or patch release following semver (Use arrow keys)
❯ 0.1.1 (patch) 
  0.2.0 (minor) 
  1.0.0 (major)

With this powerful feature you are ready to code once and share with your mates and reuse as much as you can for future storefront implementations.

Using published UI add-ons

Now, you're working a new storefront implementation and you want to reuse what you or a teammate did in another project regarding the UI changes and you know that it's been published somewhere. So, let's see how to reuse it.

First, as always when working with add-ons you need to make sure that you're located in the package (storefront) directory to run the following command:

yalo addon:add -t ui

This command will prompt to select what UI add-on you want to add and what version of this add-on to use:

██╗   ██╗ █████╗ ██╗      ██████╗      ██████╗██╗     ██╗
╚██╗ ██╔╝██╔══██╗██║     ██╔═══██╗    ██╔════╝██║     ██║
 ╚████╔╝ ███████║██║     ██║   ██║    ██║     ██║     ██║
  ╚██╔╝  ██╔══██║██║     ██║   ██║    ██║     ██║     ██║
   ██║   ██║  ██║███████╗╚██████╔╝    ╚██████╗███████╗██║
   ╚═╝   ╚═╝  ╚═╝╚══════╝ ╚═════╝      ╚═════╝╚══════╝╚═╝
                                                         

verifying credentials... done
verifying package... done (updating)

 Getting addon type:'ui'
? Select the ui addon (Use arrow keys)
❯ qsr 
  customizations 
? Choose the version for qsr (ui addon) (Use arrow keys)
❯ 0.1.1 
updating config for addon 'qsr' type:ui ... done

With this command you will see that your package-config.yml have been changed to include settings for the UI add-on and now you're able to run the preview with source code that you don't have to copy and paste in your new implementation or even publishing directly and see it live.

❗️

Customizing published UI add-ons

If you want to reuse an already published ui add-on but want to tweak a bit of it, you won't be able to do it by just adding the existing version because when you add an existing UI add-on, you only add a reference but you don't get a copy of the source code. So, for this cases you may want to track the source code of the UI add-on in Bitbucket/Github and make changes there if it's something that can be useful for many storefronts or do a fork of the code to use a custom one. This is the same behavior as when you work with JS modules published in NPM.

📘

Yalo CLI Add-on commands

Remember that whenever you want to create something custom Yalo CLI follows a semantic convention such as yalo addon:create -t ui and if you want to reuse an existing add-on, you will use the yalo addon:add -t ui instead.

Hope this helps your implementation to be built faster by making reusable UI add-ons :rocket:.


Did this page help you?