Adds docs on how to enable Live Reload in a starter app (#252)

* Remove Thymeleaf application properties as they are not needed to use Live Reload
* Add docs on how to set up Live Reload
* Rearrange docs on when to go to localhost
* Add chromium browser list

Author: cy-by

README.md

@@ -17,7 +17,11 @@ Table of Contents
         * [Actions](#actions)
         * [Conditions](#conditions)
 * [Setup Instructions](#setup-instructions)
+    * [Mac and Linux](#mac-and-linux)
+    * [Windows](#windows)
     * [Setup Environment](#setup-environment)
+        * [IntelliJ](#intellij) 
+            * [Setup Live Reload](#setup-live-reload)
         * [Setup Application](#setup-application)
         * [Contributing Live Templates to your App](#contributing-live-templates-to-your-app)
         * [Using a local version of the Form-Flow Library (For Form-Flow Library Developers)](#using-a-local-version-of-the-form-flow-library-for-form-flow-library-developers)
@@ -141,19 +145,38 @@ After cloning the repository, run `scripts/setup.sh` from the root of the repo's
 Check the script `scripts/setup.sh` for the most up to date list of dependencies and steps you'll need to install
 manually.
 
-### Setup Environment
+## Setup Environment
 
 Note that you'll need to provide some environment variables specified in [sample.env](sample.env) to
 your IDE/shell to run the application. We use IntelliJ and have provided setup instructions for
 convenience.
 
-#### IntelliJ
+### IntelliJ
 
 - `cp sample.env .env` (.env is marked as ignored by git)
 - Download the [EnvFile plugin](https://plugins.jetbrains.com/plugin/7861-envfile) and follow the
   setup instructions[here](https://github.com/Ashald/EnvFile#usage) to setup Run Configurations with
   EnvFile.
 
+#### Setup Live Reload
+
+Live Reload is very helpful when making many changes to HTML templates, CSS, or JavaScript. Here are instructions on how to get IntelliJ to reload resources and have the LiveReload browser extension automatically reload the browser tab for you.
+
+* Download live reload extension in your browser of choice:
+    * [Firefox extension](https://addons.mozilla.org/en-US/firefox/addon/livereload-web-extension/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search)
+    * [Chrome extension - works with Chrome, Edge, Brave, Arc](https://chromewebstore.google.com/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)
+* Restart your browser after install
+* In IntelliJ, go to Edit configuration
+    * Modify options
+        * On Frame deactivation:
+            * Check - Update classes and resources
+* Run your application from IntelliJ
+* Go to `http://localhost:8080/`
+* Check that the live reload extension is "turned on", it will either be a solid color or a filled dot in the middle of the icon
+* Now when you move focus away from IntelliJ it will trigger an update and will then trigger a browser refresh
+
+> 📹 Here's a [video going step by step through these instructions](https://www.loom.com/share/74183c76d45c416e870ccf7aa06dd8ee?sid=a3bf01f9-b22d-423a-b61c-050bb0620d02).
+
 ### Setup Application
 
 - Use instructions from

src/main/resources/application.yaml

@@ -60,15 +60,11 @@ spring:
         - demo
         - form-flow-library
   thymeleaf:
-    cache: false
     template-resolver-order: 0
     check-template-location: true
-  # TODO: move caching 0 to a dev only context?
   web:
     resources:
       static-locations: file:src/main/resources/static/, file:generated/main/resources/static
-      cache:
-        period: 0
   datasource:
     url: jdbc:postgresql://localhost:5432/starter-app
     username: starter-app

src/main/resources/templates/index.html

@@ -59,4 +59,4 @@ <h2 th:text="#{index.already-applied-additional}"></h2>
 </div>
 <th:block th:replace="~{fragments/footer :: footer}"/>
 </body>
-</html>
+</html>