Improve Extension Getting Started Guide

[richard-cox]

https://extensions.rancher.io/extensions/next/extensions-getting-started

This needs to be converted into a clear A --> Z guide and possibly broken up

• "Creating an extension" covers creating the root app and 1 extension, this isn't very clear
• Order isn't logical
  • asked to run yarn create @rancher/extension my-app
  • then info on installing rancher (this shouldn't be embedded in this guide, if at all it should be a link outside)
  • then in the same section as installing rancher details of the options for create @rancher/extension takes
  • then instructions on how to run rancher using root app
• Creating another extension pkg
  • this starts with the same command as above, which would create the root app (does it skip if exists?)
  • not sure why his isn't covered in the section above?
• Configuring extension (shouldn't this be writing extension, it's not really config)
• Running the App
  • this repeats the instruct from above
• Loading Into Rancher
• Creating a Release
• Wrap-up

[sudomateo]

I would very much appreciate an improved getting started guide that covers creating an extension with both cloud-credential and machine-config folders. My use case is I would like to create a third-party Node Driver with a more polished UI than the default.

When I was researching and hacking around on this I found the following resources.

• https://github.com/rancher/ui-driver-skel - This is for the older Ember UI and seemingly not what I want anymore.
• https://github.com/rancher/ui-plugin-examples - This is more up to date but the examples use Vue 2 which do not work in Rancher v2.10.0 which uses Vue 3.
• https://github.com/rancher/elemental-ui/tree/main/pkg/elemental Rancher's official OS Management extension. Code is pretty up to date with Vue 3 but doesn't have any cloud-credential code.

I asked for help in the Rancher Users Slack and received guidance to look at Notable Vue3 syntax changes and the Vue 3 Migration Guide. Those resources were helpful and I was able to get components rendering but I still don't fully understand the data binding model. Specifically how does data within cloud-credential relate to machine-config and the node driver itself?

I spent more time than I wanted on this so I'm going to punt on this and focus just on the Go node driver. I'll come back to this when the documentation is more current/stable. I think a great getting started guide would be one that runs through a full node driver integration with a UI extension that customizes the cloud-credential and machine-config. This guide could also explain how the data is meant to interact with one another. Thank you for writing this issue up!