README

Author: snabela

README.md

@@ -36,6 +36,13 @@ Note the "No active client found" message, telling us that no client application
 
 ### Start the local React application
 
+> [!WARNING] 
+> Local testing is not allowed when using the productive ShapeDiver platform.
+> However, you can use a service like https://ngrok.com/ to provide a public URL for your localhost.
+> Your public URL will need to be whitelisted by ShapeDiver. Write to us at contact@shapediver.com
+> and ask us about it. 
+> As an alternative, you can test a deployed version of this example [here](https://appbuilder.shapediver.com/stargate/v1/main/development/). 
+
 As a prerequisite install [Node.js 20](https://nodejs.org/en/about/previous-releases) and [pnpm](https://pnpm.io/). 
 
 Run `pnpm i` to install the required dependencies. 

deploy-test.sh

@@ -0,0 +1,92 @@
+#!/bin/bash
+MAIN_TARGET="main"
+
+# Function to build and deploy a test page for the Stargate Web Client example
+# $1: prefix - the prefix for the deployment, "stargate/v1/$MAIN_TARGET" 
+# $2: version - the version of the deployment (branch name or npm version)
+# $3: deploying_branch - 1 if we are deploying a branch, 0 if we are deploying a version
+build_and_deploy() {
+    prefix=$1
+    version=$2
+    deploying_branch=$3
+
+    echo "Building Stargate Web Client example version $version with prefix $prefix"
+    vite build --base=$prefix/$version/
+    if [ $? -ne 0 ]; then
+        echo "Build failed."
+        exit 1
+    fi
+
+    if [ -z "$APPBUILDER_BUCKET" ]; then
+        echo "APPBUILDER_BUCKET environment variable is not set."
+        exit 1
+    fi
+
+    cachecontrol="public, max-age=31536000, immutable"
+    # if we are deploying a branch, we need to change the cache control, compared to a version
+    if [ $deploying_branch -eq 1 ]; then
+        cachecontrol="public, max-age=0, s-maxage=86400"
+    fi
+
+    echo "Deploying to version $version with prefix $prefix to bucket $APPBUILDER_BUCKET"
+
+    # depending on the prefix, we need to deploy to different locations
+    if [ $prefix == "stargate/v1/$MAIN_TARGET" ]; then
+        aws s3 sync ./dist s3://$APPBUILDER_BUCKET/appbuilder/$prefix/$version/ --region us-east-1 --cache-control "$cachecontrol"
+        touch empty
+        aws s3 cp empty s3://$APPBUILDER_BUCKET/appbuilder/$prefix/$version --region us-east-1 \
+            --website-redirect https://appbuilder.shapediver.com/$prefix/$version/ --cache-control "$cachecontrol"
+        aws s3 cp empty s3://$APPBUILDER_BUCKET/appbuilder/$prefix/.invalidate --region us-east-1 \
+            --cache-control "$cachecontrol"
+        rm empty
+    else
+        echo "Unsupported prefix for deployment."
+        exit 1
+    fi
+}
+
+# load environment variables from .env file
+if [ -f .env ]; then
+  export $(grep -v '^#' .env | sed 's/#.*//' | sed 's/^ *//;s/ *$//' | xargs)
+fi
+
+# where should we deploy?
+prefix=$1
+if [ -z "$prefix" ]; then
+    echo "Please specify a prefix."
+    exit 1
+fi
+
+# check for git changes
+if [[ -n $(git status --porcelain) ]]; then
+    echo "There are uncommitted changes."
+    exit 1
+fi
+
+# Get the current branch
+branch=$(git rev-parse --abbrev-ref HEAD)
+
+# npm version
+npm_version=$(node -p "require('./package.json').version")
+echo "Current npm version: $npm_version"
+
+deploying_branch=1
+
+# If the branch is "development", "staging" or starts with "task/", we use the branch name as the version
+if [ "$branch" == "development" ] || [ "$branch" == "staging" ]; then
+    deploying_branch=1
+    version=$branch
+    
+    # And we create a new tag with the name "WordPressPlugin@branch"
+    git tag -fa "StargateWebClient@$branch" -m "Release of branch $branch"
+    git push origin "StargateWebClient@$branch" --force
+elif [[ $branch == task/* ]]; then
+    deploying_branch=1
+    # In this case we have to remove the "task/" prefix
+    version=${branch#task/}
+else 
+    echo "Unsupported branch name."
+    exit 1
+fi
+
+build_and_deploy $prefix $version $deploying_branch

package.json

@@ -20,6 +20,7 @@
 		"build": "tsc && vite build",
 		"optimize": "tsc && vite optimize --force",
 		"preview": "vite preview",
+		"deploy-test": "./deploy-test.sh stargate/v1/main",
 		"eslint": "eslint .",
 		"prettier": "prettier --write ./src/ ./*.ts ./eslint.config.mjs ./vite.config.ts ./tsconfig.json ./package.json",
 		"test": "jest"

src/hooks/useShapeDiverAuth.ts

@@ -10,7 +10,13 @@ import {useCallback, useEffect, useState} from "react";
 const refreshTokenKey = "shapediver_refresh_token";
 const codeVerifierKey = "shapediver_code_verifier";
 const oauthStateKey = "shapediver_oauth_state";
-const authBaseUrl = "https://staging-wwwcdn.us-east-1.shapediver.com";
+// Note: Local testing is not allowed when using the productive ShapeDiver platform.
+// However, you can use a service like https://ngrok.com/ to provide a public URL for your localhost.
+// Your public URL will need to be whitelisted by ShapeDiver. Write to us at contact@shapediver.com
+const authBaseUrl =
+	window.location.hostname === "localhost"
+		? "https://staging-wwwcdn.us-east-1.shapediver.com"
+		: "https://www.shapediver.com";
 const authEndPoint = `${authBaseUrl}/oauth/authorize`;
 const clientId = "A085FCC5-6EEB-46A6-A381-ADCEDB6E59D6"; // "660310c8-50f4-4f47-bd78-9c7ede8e659b";
 
@@ -51,7 +57,7 @@ function clearBrowserStorage() {
 
 /** Get the URL to which the ShapeDiver Platform should redirect back after authentication */
 function getRedirectUri() {
-	return window.location.origin + "/";
+	return window.location.origin + window.location.pathname;
 }
 
 interface Props {