Smooth edges for getting started around Docs and HubL files

README.md

@@ -2,7 +2,7 @@
 
 ## Documentation
 
-Check out an expanded documentation page at [https://github.hubspot.com/cms-react/](https://github.hubspot.com/cms-react/)
+Check out an expanded documentation page at <a href="https://github.hubspot.com/cms-react/" target="_blank">https://github.hubspot.com/cms-react/</a>
 
 ## Welcome!
 
@@ -37,10 +37,16 @@ Once the module is uploaded you should be able to see it when you go to edit a p
 
 ## Examples
 
-In this repository is example usage of some of key features of React modules. These examples are are best understood alongside our official [documentation](docs). You can quickly try things out without any local setup by [opening this repo in Codesandbox.io](https://codesandbox.io/p/sandbox/stoic-pateu-g20chg?file=%2Fcms-react%2FREADME.md).
+In this repository is example usage of some of key features of React modules. These examples are are best understood alongside our official <a href="https://github.hubspot.com/cms-react/" target="_blank">docs</a>. You can quickly try things out without any local setup by [opening this repo in Codesandbox.io](https://codesandbox.io/p/sandbox/stoic-pateu-g20chg?file=%2Fcms-react%2FREADME.md).
+
+### [Getting Started](examples/getting-started)
+
+The "Getting Started" example is the most up to date example of CMS React basics. It illustrates the definition and development of Modules with React, uses 3rd party dependencies, islands, and CSS Modules.
 
 ### [Hello World](examples/hello-world)
 
+**NOTE:** this is an older example, and [Getting Started](getting-started) is a better first example
+
 The "Hello World" example combines partials, modules, islands and CSS modules for styling to show a more cohesive yet straightforward example of how CMS React components and APIs work together.
 
 ### [Styling](examples/styling)
@@ -58,4 +64,3 @@ GraphQL is the future for querying HubSpot data in your CMS pages. As part of JS
 ### [Todo MVC](examples/todo-mvc)
 
 It seems with every new FE technology on the web comes an implemetation of TodoMVC. We didn't want to be left out and ported a recent version that made use of React and React hooks to work as a JS Module with Islands. Additionally there is an example of our `sharedIslandReducer` which provides a redux like interface for sharing state across islands.
-

examples/getting-started/README.md

@@ -47,15 +47,21 @@ To run this example project locally, navigate to the `getting-started-project/sr
 npm run start
 ```
 
-Then navigate to [http://hslocal.net:3000](http://hslocal.net:3000) to see an index page that links to all your modules.
+*This example makes use of a weather API through [RapidAPI](https://rapidapi.com/search?term=weatherapi-com&sortBy=ByRelevance). You will need to go through the process of singing up for this service (free) to fully see this example in action. Once you have an API Key you can add it to `getting-started-project/src/utils.ts` at the `apiKey` constant.*
+
+Then navigate to [http://hslocal.net:3000](http://hslocal.net:3000) to see an index page that links to all your modules. Click on the "local version" of the "Weather" module.
+
+In your local code editor from the `getting-started-project/src` directory open `components/modules/Weather/index.tsx` and change the `city` field default from "Boston" to your local city.
+
+See your changes live update in the browser.
 
 ### 4. Uploading and Deploying on HubSpot
 
 Run `hs init` from the root of the repository to configure it to upload to your HubSpot account using your personal access key. When setting up JavaScript assets for the first time, you will need to deactivate and regenerate your personal access key, ensuring it includes `CMS Pages`, `Design Manager`, `Developer Projects`, and `GraphQL Data Fetching` permissions. This will create a `hubspot.config.yaml` file required for both uploading changes and local development. See the [HubSpot CLI documentation](https://developers.hubspot.com/docs/cms/guides/getting-started-with-local-development) for more information.
 
 > **Warning:** If you are using an existing access key from a previous call to `hs init` or `hs auth`, you will need to deactivate and regenerate the access key to include new scopes necessary for local CMS React development.
 
-Double-check you are still in `getting-started/` and run:
+Navigate back to `/examples/getting-started/` and run:
 
 ```bash
 npm run deploy

examples/getting-started/getting-started-theme/layouts/base.hubl.html

@@ -17,7 +17,7 @@
   <body>
     <div class="body-wrapper {{ builtin_body_classes }}">
       {% block header %}
-        {% module 'main header' path="@projects/getting-started-project/src/components/modules/Header.tsx" %}
+        {% module 'main header' path="@projects/getting-started-project/src/components/modules/Header" %}
       {% endblock header %}
 
       {# The main-content ID is used for the navigation skipper in the header.html file. More information on the navigation skipper can be found here: https://github.com/HubSpot/cms-theme-boilerplate/wiki/Accessibility #}
@@ -26,7 +26,7 @@
       {% endblock body %}
 
       {% block footer %}
-        {% module 'footer' path="@projects/getting-started-project/src/components/modules/Footer.tsx" %}
+        {% module 'footer' path="@projects/getting-started-project/src/components/modules/Footer" %}
       {% endblock footer %}
     </div>
 

examples/getting-started/getting-started-theme/weather.hubl.html

@@ -8,7 +8,8 @@
 {% block body %}
 
   {% module
-    path="@projects/getting-started-project/app/components/modules/Weather.tsx",
+    "weather"
+    path="@projects/getting-started-project/src/components/modules/Weather",
   %}
 
 {% endblock body %}