Add recommended project structure to examples

[jzeltman]

The examples should include a 'recommended' approach to using these tools, and should also be shown in the context of a 'normal' AEM project folder structure.

[godanny86]

I'm curious about adding the storybook project to the ui.frontend module that the AEM Project archetype generates: https://docs.adobe.com/content/help/en/experience-manager-core-components/using/developing/archetype/uifrontend.html. It seems that the instructions on the README prefer to use ui.apps...

[megazear7]

@godanny86 It supports adding the storybook project to the ui.frontend module just as easily. The config paths just need to be based on the fact the package.json is in that directory and not the other.

Additionally, the changes in pull request 81 will simplify the config files. This comment also shows an example config where the storybook project is in the ui.frontend module. Keep in mind that that config will only work once the changes in that PR are merged in.

[godanny86]

Ah nice! Thanks for the clarification @megazear7. Looks good!

[megazear7]

@CodeByAlex Do you think we should add an example project built with the AEM Project Archetype? It could show off both the htl-engine way of doing things and the fetchFromAem way of doing things.

[jzeltman]

@megazear7 Yeah I think that would be great. We should also ensure that the existing examples are updated to use the CLI correctly as well.

[CodeByAlex]

I’ve been thinking about this one and I have mixed feelings. I’m thinking we probably shouldn’t have 3 examples right? Now that we know that the cli works with the non archetype should we just replace what’s in the kitchen sync with the archetype - or would that not make sense to some devs would it be better to have a variety

[megazear7]

I see three things that need examples:

1. htl-engine in a more streamlines project structure without all of the AEM boilerplate. This could include all the sub variations of how the htl-engine version can be used.
2. htl-engine in the context of a normal AEM project structure.
3. fetchFromAEM in the context of a normal AEM project structure.

It seems like the two examples we have now both demonstrate item 1 (correct me if I am wrong), and that an example project using the AEM Project Archetype could demonstrate both item 2 and item 3. So two examples projects? One example project that demonstrates item 1 from the above list combining the two example projects we have now, and a second example project that demonstrates items 2 and 3 from the above list.