Creating Custom Component using Moqui and mount using MoquiConf.xml - components

Question

I'm fairly new to moqui and reaching out for some help with creating custom component using moqui and mount the application on webroot using MoquiConf.xml
I had read https://www.moqui.org/MakingAppsWithMoqui-1.0.pdf and created tutorial component and successfully mounted using the below section from https://www.moqui.org/MakingAppsWithMoqui-1.0.pdf
Add a subscreens-item element under the subscreens element in the apps.xml file like:
location="component://tutorial/screen/tutorial.xml"/>
However my understanding based on the reading from Moqui Documentation below -->
https://www.moqui.org/docs/framework/User+Interface/XML+Screen is that i should be able to mount a custom component using MoquiConf.xml -> screen-facade in my custom component directory, without having to make changes in apps.xml under webroot (i really like this idea)
For #4 (Moqui Conf XML File) you can put these elements in any of the Moqui Conf XML files that get merged into that runtime configuration. The main way to do this is in a MoquiConf.xml file in your component directory so the configuration is in the same component as the screens and you don't have to modify and maintain files elsewhere. See more details about the Moqui Conf XML options in the Run and Deploy instructions. Here is an example from the MoquiConf.xml file in the moqui/example component:
<screen-facade>
<screen location="component://webroot/screen/webroot/apps.xml">
<subscreens-item name="example" menu-title="Example" menu-index="97"
location="component://example/screen/ExampleApp.xml"/>
</screen>
</screen-facade>
However i was not able to get this to work, i tried the MoquiConf.xml approach in tutorial component and also made a copy of example component and still no joy, Appreciate any pointers
My Configuration from my attempt with tutorial project
component/tutorial/MoquiConf.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!-- No copyright or license for configuration file, details here are not considered a creative work. -->
<moqui-conf xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/moqui-conf-2.1.xsd">
<screen-facade>
<screen location="component://webroot/screen/webroot/apps.xml">
<subscreens-item name="tutorial" menu-title="Tutorial" menu-index="98" location="component://tutorial/screen/tutorial.xml"/>
</screen>
</screen-facade>
</moqui-conf>
component/tutorial/screen/tutorial.xml
<screen xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://moqui.org/xsd/xml-screen-2.1.xsd"
require-authentication="false" include-child-content="true" menu-image="glyphicon glyphicon-wrench" menu-image-type="icon">
<subscreens default-item="hello">
</subscreens>
<widgets>
<label type="h1" text="Hello world with Sub Screens!"/>
<subscreens-panel id="hello-app" type="popup"/>
<subscreens-active/>
</widgets>
</screen>
component/tutorial/screen/tutorial/hello.xml
<screen>
<widgets>
<render-mode>
<text type="html"
location="component://tutorial/screen/tutorial/hello.html"/>
</render-mode>
</widgets>
</screen>
component/tutorial/screen/tutorial/hello.html
<h1>Hello world! (from the hello.html file)</h1>
With the above MoquiConf.xml configuration, the Tutorial component would not even show in the Applications --> AppList (Menu), but works when i load using below change in base-component/webroot/screen/webroot/apps.xml
<subscreens default-item="AppList">
<subscreens-item name="tutorial" menu-title="Tutorial"
location="component://tutorial/screen/tutorial.xml"/>
</subscreens>
Pretty sure i'm missing a config as the above seems to work in example, tools and possibly other components, Appreciate any pointers

Answer 1

Sorry for the delay, i was able to use the online tutorial -> moqui.org/docs/framework/Quick+Tutorial included in David's comments, and was successful in completing the tutorial, Thanks David.