From c1f9224e48629ce0c03a3a7398ae45550ab6d9b1 Mon Sep 17 00:00:00 2001
From: Apolo Pena <3060702+apolopena@users.noreply.github.com>
Date: Sat, 22 May 2021 11:38:27 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20RELEASE:=20Version=201.3.0=20(#1?=
 =?UTF-8?q?44)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 👌 IMPROVE: https://github.com/apolopena/gitpod-laravel-starter/issues/138 Add -<port number> and --help options to op command

* 🤖 TEST: force docker

* 💡 UPDATE COMMENTS: fix inacurate info in the header

* ➕ ADD: download react typescript skeleton

* ➕ ADD: react typescript example

* 🐛 FIX: tar --overwrite

* 🐛 FIX: all zeros not working

* 🤖 TEST: run laravel mix to avoid saas warnings

* 🤖 TEST: remove previous test

* 🤖 TEST: disable typescript example init

* 🐛 FIX: temp workaround for third party saas bug: https://github.com/apolopena/gitpod-laravel-starter/issues/140

* ✏️ FIX TYPO: sass not saas

* 🐛 FIX: workaround tthird party bug https://github.com/apolopena/gitpod-laravel-starter/issues/140

* 🐛 FIX: workaround third party bug https://github.com/apolopena/gitpod-laravel-starter/issues/140

* 🐛 FIX: workaround third party bug https://github.com/apolopena/gitpod-laravel-starter/issues/140

* 🐛 FIX: https://github.com/apolopena/gitpod-laravel-starter/issues/140

* 👌 IMPROVE: hotfix https://github.com/apolopena/gitpod-laravel-starter/issues/140

* ✏️ FIX TYPO: 140 not 130

* 🐛 FIX: https://github.com/apolopena/gitpod-laravel-starter/issues/141

* 🐛 FIX: https://github.com/apolopena/gitpod-laravel-starter/issues/142

* ♻️ REFACTOR: improve all_zeros regexp

* 🐛 FIX: hard coded version bump for upcomming release

* 🐛 FIX: https://github.com/apolopena/gitpod-laravel-starter/issues/142

* 🐛 FIX: https://github.com/apolopena/gitpod-laravel-starter/issues/142

* 🤖 TEST: fix vue material dashboard example: reload after login triggers runtime error

* 🐛 FIX: restore code from previous test

* 🐛 FIX: https://github.com/apolopena/gitpod-laravel-starter/issues/142

* 📖 DOC: https://github.com/apolopena/gitpod-laravel-starter/issues/139 and https://github.com/apolopena/gitpod-laravel-starter/issues/142
---
 .gitpod.Dockerfile                            |   2 +-
 .gp/bash/.bash_aliases                        |   4 +-
 .gp/bash/change-passwords.sh                  |   2 +-
 .gp/bash/examples/change-passwords.sh         | 110 ++++++++++++++++++
 .gp/bash/examples/init-react-example.sh       |  14 +--
 .../examples/init-react-typescript-example.sh |  33 ++++++
 .gp/bash/examples/init-vue-example.sh         |  42 ++-----
 .gp/bash/helpers.sh                           |   4 +-
 .gp/bash/init-optional-scaffolding.sh         |  46 ++++++++
 .gp/bash/init-phpmyadmin.sh                   |   2 +-
 .gp/bash/init-project.sh                      |  14 +--
 .gp/bash/open-preview.sh                      |  38 +++---
 .gp/snippets/messages/op-help.txt             |  20 ++++
 .../projects/material-dashboard-example.sh    |  42 +++++++
 README.md                                     |  23 +++-
 15 files changed, 320 insertions(+), 76 deletions(-)
 create mode 100644 .gp/bash/examples/change-passwords.sh
 create mode 100644 .gp/bash/examples/init-react-typescript-example.sh
 create mode 100644 .gp/snippets/messages/op-help.txt
 create mode 100644 .gp/snippets/projects/material-dashboard-example.sh

diff --git a/.gitpod.Dockerfile b/.gitpod.Dockerfile
index d92154a0..afe36316 100644
--- a/.gitpod.Dockerfile
+++ b/.gitpod.Dockerfile
@@ -32,7 +32,7 @@ RUN sudo bash -c ". /tmp/update-composer.sh" && rm /tmp/update-composer.sh
 
 # gitpod trick to bypass the docker caching mechanism for all lines below this one
 # just increment the value each time you want to bypass the cache system
-ENV INVALIDATE_CACHE=183
+ENV INVALIDATE_CACHE=184
 
 COPY --chown=gitpod:gitpod .gp/conf/apache/apache2.conf /etc/apache2/apache2.conf
 COPY --chown=gitpod:gitpod .gp/conf/nginx/nginx.conf /etc/nginx/nginx.conf
diff --git a/.gp/bash/.bash_aliases b/.gp/bash/.bash_aliases
index f03186a4..82fca6b9 100644
--- a/.gp/bash/.bash_aliases
+++ b/.gp/bash/.bash_aliases
@@ -11,5 +11,5 @@ alias lint-starter='f(){ bash "$GITPOD_REPO_ROOT"/.gp/bash/lint-scripts.sh "$1";
 alias update-pma-pws='bash $GITPOD_REPO_ROOT/.gp/bash/change-passwords.sh phpmyadmin'
 # Shows help for update_pma_pws
 alias update-pma-pws-help='echo -e "$(cat "$GITPOD_REPO_ROOT/.gp/snippets/messages/update-pma-pws-help.txt")"'
-# opens or refreshes the preview browser to the web root
-alias op='f(){ bash "$GITPOD_REPO_ROOT"/.gp/bash/open-preview.sh "$1";  unset -f f; }; f'
\ No newline at end of file
+# opens or refreshes the preview browser. Try op --help
+alias op='f(){ bash "$GITPOD_REPO_ROOT"/.gp/bash/open-preview.sh "$@";  unset -f f; }; f'
\ No newline at end of file
diff --git a/.gp/bash/change-passwords.sh b/.gp/bash/change-passwords.sh
index 74ff667d..1d69215a 100644
--- a/.gp/bash/change-passwords.sh
+++ b/.gp/bash/change-passwords.sh
@@ -25,7 +25,7 @@ phpmyadmin() {
   local name="change-passwords.sh phpmyadmin"
   local err="$name ERROR:"
   local config_file="public/phpmyadmin/config.inc.php"
-  local all_zeros='^0$|^0*0$'
+  local all_zeros='^[0]+$'
   local exit_codes
   local values
 
diff --git a/.gp/bash/examples/change-passwords.sh b/.gp/bash/examples/change-passwords.sh
new file mode 100644
index 00000000..1d69215a
--- /dev/null
+++ b/.gp/bash/examples/change-passwords.sh
@@ -0,0 +1,110 @@
+#!/bin/bash
+#
+# SPDX-License-Identifier: MIT
+# Copyright © 2021 Apolo Pena
+#
+# change-passwords.sh
+# Description:
+# Changes passwords for phpmyadmin from the defaults in version control to the values set in .starter.env
+#
+# Notes:
+# This script should be always run at least once by the user as an mandatory additional layer of security
+# This script requires the file .starter.env to exist along will all the key value pairs set.
+#
+# See:
+# example.starter.ini
+
+# Load spinner
+. .gp/bash/spinner.sh
+
+phpmyadmin() {
+  [ ! -d public/phpmyadmin ] && echo "No installation of phpmyadmin was found. Process aborted. " && exit 1
+  # Keep keys in sequence. Add new keys to the end of the array
+  local keys=(PHPMYADMIN_SUPERUSER_PW PHPMYADMIN_CONTROLUSER_PW)
+
+  local name="change-passwords.sh phpmyadmin"
+  local err="$name ERROR:"
+  local config_file="public/phpmyadmin/config.inc.php"
+  local all_zeros='^[0]+$'
+  local exit_codes
+  local values
+
+  for key in "${keys[@]}"; do
+    local value
+    value="$(bash .gp/bash/helpers.sh get_starter_env_val "$key")"
+    values+=("$(bash .gp/bash/helpers.sh get_starter_env_val "$key")")
+    local code=$?
+    exit_codes+=$code
+    # show error message of called function
+    [ $code != 0 ] && echo "$value"
+  done
+
+  if [[ ! $(echo "${exit_codes[@]}" | tr -d '[:space:]') =~ $all_zeros ]]; then
+    echo "$err retrieving values, no passwords were changed."
+    exit 1
+  fi
+
+  # Values have been set and there are no errors so far so change passwords
+  i=0
+  for key in "${keys[@]}"; do
+    case $key in
+      "${keys[0]}")
+        msg="Changing password for phpmyadmin user 'pmasu' to the value found in .starter.env"
+        start_spinner "$msg"
+        mysql -e "ALTER USER 'pmasu'@'%' IDENTIFIED BY '${values[$i]}'; FLUSH PRIVILEGES;"
+        stop_spinner $?
+        ;;
+      "${keys[1]}")
+        msg="Changing password for phpmyadmin user 'pma' to the value found in .starter.env"
+        start_spinner "$msg"
+        mysql -e "ALTER USER 'pma'@'localhost' IDENTIFIED BY '${values[$i]}'; FLUSH PRIVILEGES;"
+        err_code=$?
+        stop_spinner $err_code
+        if [ $err_code == 0 ]; then
+          msg="Updating control user password in $config_file"
+          line="\$cfg['Servers'][\$i]['controlpass'] ="
+          _edit="\$cfg['Servers'][\$i]['controlpass'] = '${values[$i]}';"
+          start_spinner "$msg"
+          # The shellcheck SC2026 was not designed for awk so bypass it
+          # shellcheck disable=2026
+          # Match the line where the password for the controluser is set
+          line_num=$(awk '/^\$cfg.*'controlpass'.*=.*;$/ {print FNR}' $config_file)
+          if [ -z "$line_num" ]; then
+            stop_spinner 1
+            echo -e "ERROR: No line found beginning with: $line \n\tin the file: $config_file"
+            echo "You will need to manually update the control user password in $config_file"
+          else
+            sed -i "$line_num c\\$_edit" $config_file
+            err_code=$?
+            stop_spinner $err_code
+            unset _edit
+            [ $err_code == 0 ] &&
+            echo -e "\e[38;5;171mPROCESS COMPLETE\e[0m" &&
+            echo -e "\e[1;33mCheck the console output for any possible failures.\e[0m" &&
+            echo -en "\e[1;36m" &&
+            echo "If you are logged into phpmyadmin, log out and log back in." &&
+            echo "For additional security you can delete .starter.env" &&
+            echo "Just make sure you remember your passwords from that file." &&
+            echo "If you ever loose your passwords you may always set them again" &&
+            echo "using this script and new values set in .starter.env" &&
+            echo -e "\e[0m"
+          fi
+        fi
+        ;;
+      *)
+        echo "$err unidentified key $value"
+        ;;
+    esac
+    ((i++))
+  done
+}
+
+# Call functions from this script gracefully
+if declare -f "$1" > /dev/null
+then
+  # call arguments verbatim
+  "$@"
+else
+  echo "utils.sh: '$1' is not a known function name." >&2
+  exit 1
+fi
diff --git a/.gp/bash/examples/init-react-example.sh b/.gp/bash/examples/init-react-example.sh
index ee5f79a6..cd72c44f 100644
--- a/.gp/bash/examples/init-react-example.sh
+++ b/.gp/bash/examples/init-react-example.sh
@@ -11,21 +11,15 @@
 . .gp/bash/workspace-init-logger.sh
 
 declare -a exit_codes=()
-all_zeros='^0$|^0*0$'
+all_zeros='^[0]+$'
 task_msg="Setting up React example: Questions and Answers"
 
 log "$task_msg"
-curl -LJO https://github.com/apolopena/QnA-demo-skeleton/archive/refs/tags/1.0.0.tar.gz
+curl -LJO https://github.com/apolopena/qna-demo-skeleton/archive/refs/tags/1.1.0.tar.gz
 exit_codes+=($?)
-tar -xvzf QnA-demo-skeleton-1.0.0.tar.gz --strip-components=1
+tar --overwrite -xvzf qna-demo-skeleton-1.1.0.tar.gz --strip-components=1
 exit_codes+=($?)
-rm QnA-demo-skeleton-1.0.0.tar.gz
-exit_codes+=($?)
-php artisan migrate
-exit_codes+=($?)
-php artisan db:seed
-exit_codes+=($?)
-yarn run mix
+rm qna-demo-skeleton-1.1.0.tar.gz
 exit_codes+=($?)
 
 if [[ $(echo "${exit_codes[@]}" | tr -d '[:space:]') =~ $all_zeros ]]; then
diff --git a/.gp/bash/examples/init-react-typescript-example.sh b/.gp/bash/examples/init-react-typescript-example.sh
new file mode 100644
index 00000000..b9dd65e0
--- /dev/null
+++ b/.gp/bash/examples/init-react-typescript-example.sh
@@ -0,0 +1,33 @@
+#!/bin/bash
+#
+# SPDX-License-Identifier: MIT
+# Copyright © 2021 Apolo Pena
+#
+# init-react-typescript-example.sh
+# Description:
+# Initial setup for the gitpod-laravel-starter React Typescript example.
+
+# Load logger
+. .gp/bash/workspace-init-logger.sh
+
+declare -a exit_codes=()
+
+task_msg="Downloading React Typescript example: Questions and Answers"
+
+log "$task_msg"
+curl -LJO https://github.com/apolopena/qna-typescript-demo-skeleton/archive/refs/tags/1.1.0.tar.gz
+exit_codes+=($?)
+tar --overwrite -xvzf qna-typescript-demo-skeleton-1.1.0.tar.gz --strip-components=1
+exit_codes+=($?)
+rm qna-typescript-demo-skeleton-1.1.0.tar.gz
+exit_codes+=($?)
+
+if [[ $(echo "${exit_codes[@]}" | tr -d '[:space:]') =~ ^[0]+$ ]]; then
+  log "SUCCESS: $task_msg"
+else
+  log -e "ERROR: $task_msg"
+fi
+
+
+
+
diff --git a/.gp/bash/examples/init-vue-example.sh b/.gp/bash/examples/init-vue-example.sh
index 8bde38aa..fe75de60 100644
--- a/.gp/bash/examples/init-vue-example.sh
+++ b/.gp/bash/examples/init-vue-example.sh
@@ -3,39 +3,21 @@
 # SPDX-License-Identifier: MIT
 # Copyright © 2021 Apolo Pena
 #
-# init-react-example.sh
+# init-vue-example.sh
 # Description:
 # Initial setup for the gitpod-laravel-starter Vue example.
 
 # Load logger
 . .gp/bash/workspace-init-logger.sh
 
-lvm=$(bash .gp/bash/helpers.sh laravel_major_version)
-# Failsafe for unsupported versions
-(( lvm < 6 )) && exit 1
-
-declare -a exit_codes=()
-all_zeros='^0$|^0*0$'
-task_msg="Setting up Vue example: Material Dashboard"
-
-log "$task_msg"
-
-if (( lvm > 6 )); then
-  composer require laravel-frontend-presets/material-dashboard
-else
-  composer require laravel-frontend-presets/material-dashboard v1.0.9
-fi
-exit_codes+=($?)
-php artisan ui material
-exit_codes+=($?)
-composer dump-autoload
-exit_codes+=($?)
-php artisan migrate
-exit_codes+=($?)
-php artisan migrate --seed
-
-if [[ $(echo "${exit_codes[@]}" | tr -d '[:space:]') =~ $all_zeros ]]; then
-  log "SUCCESS: $task_msg"
-else
-  log -e "ERROR: $task_msg"
-fi
\ No newline at end of file
+main () {
+  local src="$GITPOD_REPO_ROOT"/.gp/snippets/projects/material-dashboard-example.sh
+  local dest="$GITPOD_REPO_ROOT"/.gp/bash/init-project.sh
+  if [[ -f $src ]]; then 
+    cp -f "$src" "$dest"
+  else
+    log -e "ERROR: Preparing EXAMPLE $EXAMPLE, missing $src"
+  fi
+}
+  
+main
\ No newline at end of file
diff --git a/.gp/bash/helpers.sh b/.gp/bash/helpers.sh
index 0e295391..68923b47 100644
--- a/.gp/bash/helpers.sh
+++ b/.gp/bash/helpers.sh
@@ -23,7 +23,7 @@
 #
 gls_version() {
   local hard version title file
-  hard="1.2.0"
+  hard="1.3.0"
   title="Gitpod Laravel Starter Framework"
   file="$GITPOD_REPO_ROOT"/.gp/CHANGELOG.md
   if [[ -f $file ]]; then
@@ -320,7 +320,7 @@ has_installs() {
 has_frontend_scaffolding_install() {
   local result scaff_installs
   result=$(get_installs | grep -oP '\d' | tr -d '[:space:]')
-  local all_zeros='^0$|^0*0$'
+  local all_zeros='^[0]+$'
   # Trim the first character from the string (this is the phpmyadmin value)
   local installs="${result:1}"
   # Trim the next three characters in the string (there are only three possible front end scaffolding)
diff --git a/.gp/bash/init-optional-scaffolding.sh b/.gp/bash/init-optional-scaffolding.sh
index 79eca34d..f07399ac 100644
--- a/.gp/bash/init-optional-scaffolding.sh
+++ b/.gp/bash/init-optional-scaffolding.sh
@@ -13,6 +13,21 @@
 # Load spinner
 . .gp/bash/spinner.sh
 
+# Workaround third party sass bug: https://github.com/apolopena/gitpod-laravel-starter/issues/140
+hotfix140 () {
+  local exit_code msg="Applying hotfix 140"
+  log_silent "$msg..." && start_spinner "$msg"
+  yes | npx add-dependencies sass@1.32.12 --dev 2> >(grep -v warning 1>&2) > /dev/null 2>&1
+  exit_code=$?
+  if [[ $exit_code == 0 ]]; then
+    stop_spinner 0
+    log_silent "SUCCESS: $msg"
+  else
+    stop_spinner 1
+    log_silent -e "ERROR: $msg"
+  fi
+}
+
 parse="bash .gp/bash/utils.sh parse_ini_value starter.ini"
 
 install_react=$(eval "$parse" react install)
@@ -49,6 +64,22 @@ if [[ -n $EXAMPLE ]]; then
         install_react_router_dom=1
         rrd_ver='^5.2.0'
         ;;
+      3)
+        example_title="React Typescript Example with phpMyAdmin - Questions and Answers"
+        init_react_typescript_example=".gp/bash/examples/init-react-typescript-example.sh"
+        install_react=1
+        install_phpmyadmin=1
+        install_react_router_dom=1
+        rrd_ver='^5.2.0'
+        ;;
+      4)
+        example_title="React Typescript Example without phpMyAdmin - Questions and Answers"
+        init_react_typescript_example=".gp/bash/examples/init-react-typescript-example.sh"
+        install_react=1
+        install_phpmyadmin=0
+        install_react_router_dom=1
+        rrd_ver='^5.2.0'
+        ;;
       10)
         example_title="Vue Example with phpMyAdmin and extras - Material Dashboard"
         init_vue_example=".gp/bash/examples/init-vue-example.sh"
@@ -118,6 +149,7 @@ fi # end check laravel/ui already in vcs but needs composer install
 # Cleanup (since we use yarn)
 [ -f package-lock.json ] && rm package-lock.json
 # END: Install Laravel ui if needed
+
 # BEGIN: Optional react, react-dom and react-router-dom installs
 if [ $install_react == 1 ]; then
   version=$(eval "$parse" react version)
@@ -154,6 +186,7 @@ if [ $install_react == 1 ]; then
           log -e "ERROR: $sub_msg"
         fi
       fi
+      hotfix140
       log "  --> Installing node modules and running Laravel Mix"
       yarn install && npm run dev
       npm run dev
@@ -187,6 +220,7 @@ if [[ $install_vue == 1 && $install_react != 1 ]]; then
     fi
     err_code=$?
     if [[ $err_code == 0 ]]; then
+      hotfix140
       log "SUCCESS: Vue$auth_msg has been installed"
       log "  --> Installing node modules and running Laravel Mix"
       yarn install && npm run dev
@@ -212,6 +246,7 @@ if [[ $install_bootstrap == 1 && $install_react != 1 && $install_vue != 1 ]]; th
   fi
   err_code=$?
   if [[ $err_code == 0 ]]; then
+    hotfix140
     log "SUCCESS: Bootstrap$version_msg$auth_msg has been installed"
     log "  --> Installing node modules and running Laravel Mix"
     yarn install && npm run dev
@@ -233,6 +268,7 @@ else
 fi
 # END: Optional bootstrap install
 # END: optional frontend scaffolding installations
+
 # BEGIN: optional example setup
 # Initialize optional react example project
 if [[ -n  $init_react_example ]];then
@@ -244,6 +280,16 @@ if [[ -n  $init_react_example ]];then
   . "$init_react_example" 2>/dev/null || log_silent -e "ERROR: $(. $init_react_example 2>&1 1>/dev/null)"
   exit
 fi
+# Initialize optional react typescript example project
+if [[ -n  $init_react_typescript_example ]];then
+  [[ $laravel_major_ver -ne 8 ]] \
+  && log -e "WARNING: React examples are only supported by Laravel version 8. Your Laravel version is $laravel_major_ver" \
+  && log -e "WARNING: Ignoring the example requested: $example_title" \
+  && exit
+  # shellcheck source=.gp/bash/examples/init-react-example.sh
+  . "$init_react_typescript_example" 2>/dev/null || log_silent -e "ERROR: $(. $init_react_typescript_example 2>&1 1>/dev/null)"
+  exit
+fi
 # Initialize optional vue example project
 if [[ -n  $init_vue_example ]];then
   # shellcheck source=.gp/bash/examples/init-vue-example.sh
diff --git a/.gp/bash/init-phpmyadmin.sh b/.gp/bash/init-phpmyadmin.sh
index 051ba613..a10af663 100644
--- a/.gp/bash/init-phpmyadmin.sh
+++ b/.gp/bash/init-phpmyadmin.sh
@@ -14,7 +14,7 @@
 . .gp/bash/spinner.sh
 
 # regexp pattern for checking an array of exit codes
-all_zeros_reg='^0$|^0*0$'
+all_zeros_reg='^[0]+$'
 
 # BEGIN: Boostrap phpMyAdmin
 # If the docker image has cached the directive to not install phpmyadmin, install it now.
diff --git a/.gp/bash/init-project.sh b/.gp/bash/init-project.sh
index e6abe836..bc54fee6 100644
--- a/.gp/bash/init-project.sh
+++ b/.gp/bash/init-project.sh
@@ -1,19 +1,14 @@
 #!/bin/bash
 #
-# SPDX-License-Identifier: MIT
-# Copyright © 2021 Apolo Pena
-#
-# init-gitpod.sh
+# init-project.sh
 # Description:
-# Initial configuration for an existing phpmyadmin installation.
-
+# Project specific initialization.
 
 # Load logger
 . .gp/bash/workspace-init-logger.sh
 
 # BEGIN example code block - migrate database
-# COMMENT: Load spinner
-# . .gp/bash/spinner.sh
+# . .gp/bash/spinner.sh # COMMENT: Load spinner
 # __migrate_msg="Migrating database"
 # log_silent "$__migrate_msg" && start_spinner "$__migrate_msg"
 # php artisan migrate
@@ -25,6 +20,5 @@
 #  stop_spinner $err_code
 #  log "SUCCESS: migrated database"
 # fi
-
-# BEGIN example code block - migrate database
+# END example code block - migrate database
 
diff --git a/.gp/bash/open-preview.sh b/.gp/bash/open-preview.sh
index 7368af3c..f04b3c64 100644
--- a/.gp/bash/open-preview.sh
+++ b/.gp/bash/open-preview.sh
@@ -8,23 +8,33 @@
 # Conditionally opens an integrated preview browser
 # either to the web root if no argument is passed in
 # or to the specified path segment if $1 is passed in
+# Can take a port option to open a specific port, for example op -3005
+# In the case of using the port option, the path segment to open will be $2
 
 [[ $(pwd) != "$GITPOD_REPO_ROOT" ]] &&
 echo -e "\e[1;31mThis command can only be run from the project root of a gitpod workspace:\e[0m $GITPOD_REPO_ROOT" &&
 exit 1
 
-. .gp/bash/spinner.sh
+function main() {
+  local path port
+  [[ $1 == '-h' || $1 == '--help' ]] && cat .gp/snippets/messages/op-help.txt && exit 0
+  if [[ $1 =~ ^-[1-9][0-9]+$ ]]; then
+    port="${1:1}"
+    path="/$2"
+  else
+    path="/$1"
+    port=$(bash .gp/bash/helpers.sh get_default_server_port)
+  fi
+  if [[ $(bash .gp/bash/helpers.sh is_inited) == 0 ]]; then
+    . .gp/bash/spinner.sh &&
+    start_spinner "Opening preview when system is ready..."
+    gp sync-await gitpod-inited &&
+    stop_spinner 0 &&
+    gp await-port "$port" &&
+    gp preview "$(gp url "$port")$path" > /dev/null 2>&1
+  else
+    gp preview "$(gp url "$port")$path" > /dev/null 2>&1
+  fi;
+}
 
-__path=/$1
-
-__port=$(bash .gp/bash/helpers.sh get_default_server_port)
-if [[ $(bash .gp/bash/helpers.sh is_inited) == 0 ]]; then
-  . .gp/bash/spinner.sh &&
-  start_spinner "Opening preview when system is ready..."
-  gp sync-await gitpod-inited &&
-  stop_spinner 0 &&
-  gp await-port "$__port" &&
-  gp preview "$(gp url "$__port")$__path" > /dev/null 2>&1
-else
-  gp preview "$(gp url "$__port")$__path" > /dev/null 2>&1
-fi;
+main "$@"
\ No newline at end of file
diff --git a/.gp/snippets/messages/op-help.txt b/.gp/snippets/messages/op-help.txt
new file mode 100644
index 00000000..450dbd61
--- /dev/null
+++ b/.gp/snippets/messages/op-help.txt
@@ -0,0 +1,20 @@
+Command line interface for opening the preview browser
+Usage:
+  op [-<port number> | -h | --help | path]
+
+Notes:
+All arguments are optional. Paths cannot contain a leading slash.
+The -<port number> option must be a dash followed by a valid port number.
+If -<port number> is omitted then the port for the default server will be used.
+The -h or --help option will show this help message
+If the path is omitted then the web root will be opened in the preview browser.
+If the path is given then that path segment will be opened in the preview browser.
+
+Example 1: Open the web root using the default server port.
+op
+Example 2: Open the web root on port 3005.
+op -3005
+Example 3: Open /answers/2 (relative to the web root) on the default server port
+op answers/2
+Example 4: Open /foo (relative to the web root) on port 8001
+op -8001 answers/3
\ No newline at end of file
diff --git a/.gp/snippets/projects/material-dashboard-example.sh b/.gp/snippets/projects/material-dashboard-example.sh
new file mode 100644
index 00000000..cb52fef6
--- /dev/null
+++ b/.gp/snippets/projects/material-dashboard-example.sh
@@ -0,0 +1,42 @@
+#!/bin/bash
+#
+# init-project.sh
+# Description:
+# Project specific initialization.
+
+# Load logger
+. .gp/bash/workspace-init-logger.sh
+
+lvm=$(bash .gp/bash/helpers.sh laravel_major_version)
+
+declare -a exit_codes=()
+task_msg="Setting up Vue example: Material Dashboard"
+
+log "$task_msg"
+
+# Hook: If this file is not in VCS then assume all required scaffolding for this project is in VCS
+if ! git ls-files --error-unmatch resources/views/dashboard.blade.php > /dev/null 2>&1; then
+  if (( lvm > 6 )); then
+    composer require laravel-frontend-presets/material-dashboard
+  else
+    composer require laravel-frontend-presets/material-dashboard v1.0.9
+  fi
+  exit_codes+=($?)
+  php artisan ui material
+  exit_codes+=($?)
+else
+  composer install
+  exit_codes+=($?)
+fi
+
+composer dump-autoload
+exit_codes+=($?)
+php artisan migrate
+exit_codes+=($?)
+php artisan migrate --seed
+
+if [[ $(echo "${exit_codes[@]}" | tr -d '[:space:]') =~ ^[0]+$ ]]; then
+  log "SUCCESS: $task_msg"
+else
+  log -e "ERROR: $task_msg"
+fi
\ No newline at end of file
diff --git a/README.md b/README.md
index 3683e1fc..e90db15b 100644
--- a/README.md
+++ b/README.md
@@ -150,14 +150,27 @@ The file [`starter.ini`](https://github.com/apolopena/gitpod-laravel-starter/blo
 *Please note that many of the configurations found in `starter.ini` should be made just once __prior__ to creating your workspace for the first time. Have a look at the comments in [`starter.ini`](https://github.com/apolopena/gitpod-laravel-starter/blob/main/starter.ini) for specifics.*
 
 ### Preset Examples
-`gitpod-laravel-starter` preset examples are auto-configured examples of React and Vue projects.
-You can activate a preset example as a starting point by adding `EXAMPLE=<id>` to the Gitpod URL right after the `#` and followed by a `/`.
-| id | Description | Sample URL |
+`gitpod-laravel-starter` preset examples are auto-configured examples of React and Vue projects that you can learn from or use as starting points for your own projects.
+
+You can initialize a preset example as a starting point by adding `EXAMPLE=<id>` to the Gitpod URL right after the `#` and followed by a `/`.
+
+To use a preset example as a starting point:
+1. [Setup a project repository](https://github.com/apolopena/gitpod-laravel-starter/wiki/Setup#create-a-new-project-repository-from-gitpod-laravel-starter)
+2. Initialize your workspace using the workspace URL for your corresponding EXAMPLE id but substitute https://github.com/apolopena/gitpod-laravel-starter with your project repository URL.
+3. Save the system generated project scaffolding files to your new repository and you can start your project from that point.
+    - Please that some directives in `starter.ini` such as `phpmyadmin` will not be supercded on subsequent initializations of your workspace. Edit your `starter.ini` as needed.
+
+| id | Description | Workspace URL |
 | :---:  | :--- | :--- |
 | 1 | React Example with phpMyAdmin - Questions and Answers | https://gitpod.io/#EXAMPLE=1/https://github.com/apolopena/gitpod-laravel-starter |
 | 2 | React Example without phpMyAdmin - Questions and Answers | https://gitpod.io/#EXAMPLE=2/https://github.com/apolopena/gitpod-laravel-starter |
-| 10 | Vue Example with phpMyAdmin - Material Dashboard | https://gitpod.io/#EXAMPLE=10/https://github.com/apolopena/gitpod-laravel-starter |
-| 11 | Vue Example without phpMyAdmin - Material Dashboard | https://gitpod.io/#EXAMPLE=11/https://github.com/apolopena/gitpod-laravel-starter |
+| 3 __*__ | React Typescript Example with phpMyAdmin - Questions and Answers | https://gitpod.io/#EXAMPLE=3/https://github.com/apolopena/gitpod-laravel-starter |
+| 4 __*__ | React Typescript Example without phpMyAdmin - Questions and Answers | https://gitpod.io/#EXAMPLE=4/https://github.com/apolopena/gitpod-laravel-starter |
+| 10 __**__ | Vue Example with phpMyAdmin - Material Dashboard | https://gitpod.io/#EXAMPLE=10/https://github.com/apolopena/gitpod-laravel-starter |
+| 11 __**__ | Vue Example without phpMyAdmin - Material Dashboard | https://gitpod.io/#EXAMPLE=11/https://github.com/apolopena/gitpod-laravel-starter |
+
+<br />__\*__ Comes with hot reload functionality
+<br />__\**__ Not designed to run in an iframe such as the preview browser in the IDE.
 
 ### Development Servers