Add unique keys feature back

* Added feature flags to the components

* Remove config.json

package-lock.json

@@ -443,15 +443,9 @@
       "license": "0BSD"
     },
     "node_modules/@azure/cosmos": {
-<<<<<<< HEAD
-      "version": "4.2.0-beta.1",
-      "resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-4.2.0-beta.1.tgz",
-      "integrity": "sha512-mREONehm1DxjEKXGaNU6Wmpf9Ckb9IrhKFXhDFVs45pxmoEb3y2s/Ub0owuFmqlphpcS1zgtYQn5exn+lwnJuQ==",
-=======
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-4.5.0.tgz",
       "integrity": "sha512-JsTh4twb6FcwP7rJwxQiNZQ/LGtuF6gmciaxY9Rnp6/A325Lhsw/SH4R2ArpT0yCvozbZpweIwdPfUkXVBtp5w==",
->>>>>>> master
       "license": "MIT",
       "dependencies": {
         "@azure/abort-controller": "^2.1.2",
@@ -499,12 +493,7 @@
     "node_modules/@azure/cosmos/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-<<<<<<< HEAD
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
-=======
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
->>>>>>> master
     },
     "node_modules/@azure/identity": {
       "version": "4.5.0",

src/Common/CosmosClient.ts

@@ -36,7 +36,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
     return authorizationToken;
   }
 
-  if (configContext.platform === Platform.Emulator) {
+  if (configContext.platform === Platform.Emulator || configContext.platform === Platform.VNextEmulator) {
     // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
     await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
     return decodeURIComponent(headers.authorization);
@@ -119,7 +119,7 @@ export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, diagnost
 };
 
 export const endpoint = () => {
-  if (configContext.platform === Platform.Emulator) {
+  if (configContext.platform === Platform.Emulator || configContext.platform === Platform.VNextEmulator) {
     // In worker scope, _global(self).parent does not exist
     const location = _global.parent ? _global.parent.location : _global.location;
     return configContext.EMULATOR_ENDPOINT || location.origin;

src/ConfigContext.ts

@@ -216,7 +216,7 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
       const AAD_ENDPOINT = params.get("aadEndpoint") || "";
       updateConfigContext({ AAD_ENDPOINT });
     }
-    if (params.has("platform")) {
+    if (params.has("platform") && configContext.platform !== Platform.VNextEmulator) {
       const platform = params.get("platform");
       switch (platform) {
         default:
@@ -226,7 +226,6 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
         case Platform.Fabric:
         case Platform.Hosted:
         case Platform.Emulator:
-        case Platform.VNextEmulator:
           updateConfigContext({ platform });
       }
     }

src/Explorer/ContextMenuButtonFactory.tsx

@@ -10,6 +10,7 @@ import { useDatabases } from "Explorer/useDatabases";
 import { isFabric, isFabricNative } from "Platform/Fabric/FabricUtil";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
+import { areAdvancedScriptsSupported } from "Utils/PlatformFeatureUtils";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import React from "react";
 import AddCollectionIcon from "../../images/AddCollection.svg";
@@ -130,6 +131,7 @@ export const createCollectionContextMenuButton = (
   }
 
   if (
+    areAdvancedScriptsSupported(configContext.platform) &&
     configContext.platform !== Platform.Fabric &&
     (userContext.apiType === "SQL" || userContext.apiType === "Gremlin")
   ) {

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1336,7 +1336,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       });
     }
 
-    if (this.shouldShowComputedPropertiesEditor) {
+    if (isFeatureSupported(PlatformFeature.ComputedProperties) && this.shouldShowComputedPropertiesEditor) {
       tabs.push({
         tab: SettingsV2TabTypes.ComputedPropertiesTab,
         content: <ComputedPropertiesComponent {...computedPropertiesComponentProps} />,

src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx

@@ -45,7 +45,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
 
   constructor(props: ScaleComponentProps) {
     super(props);
-    this.isEmulator = configContext.platform === Platform.Emulator;
+    this.isEmulator = configContext.platform === Platform.Emulator || configContext.platform === Platform.VNextEmulator;
     this.offer = this.props.database?.offer() || this.props.collection?.offer();
     this.databaseId = this.props.database?.id() || this.props.collection.databaseId;
     this.collectionId = this.props.collection?.id();

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -53,6 +53,7 @@ export function createStaticCommandBarButtons(
   };
 
   if (
+    isFeatureSupported(PlatformFeature.SynapseLink) &&
     configContext.platform !== Platform.Fabric &&
     userContext.apiType !== "Tables" &&
     userContext.apiType !== "Cassandra"

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx

@@ -728,7 +728,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             />
           )}
 
-          {!isFabricNative() && userContext.apiType === "SQL" && (
+          {isFeatureSupported(PlatformFeature.UniqueKeys) && !isFabricNative() && userContext.apiType === "SQL" && (
             <Stack style={{ marginTop: -2, marginBottom: -4 }}>
               {UniqueKeysHeader()}
               {this.state.uniqueKeys.map((uniqueKey: string, i: number): JSX.Element => {
@@ -901,78 +901,86 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               </CollapsibleSectionComponent>
             </Stack>
           )}
-          {!isFabricNative() && userContext.apiType !== "Tables" && (
+          {isFeatureSupported(PlatformFeature.AdvancedContainerSettings) &&
-            <CollapsibleSectionComponent
+            !isFabricNative() &&
-              title="Advanced"
+            userContext.apiType !== "Tables" && (
-              isExpandedByDefault={false}
+              <CollapsibleSectionComponent
-              onExpand={() => {
+                title="Advanced"
-                TelemetryProcessor.traceOpen(Action.ExpandAddCollectionPaneAdvancedSection);
+                isExpandedByDefault={false}
-                scrollToSection("collapsibleAdvancedSectionContent");
+                onExpand={() => {
-              }}
+                  TelemetryProcessor.traceOpen(Action.ExpandAddCollectionPaneAdvancedSection);
-            >
+                  scrollToSection("collapsibleAdvancedSectionContent");
-              <Stack className="panelGroupSpacing" id="collapsibleAdvancedSectionContent">
+                }}
-                {isCapabilityEnabled("EnableMongo") && !isCapabilityEnabled("EnableMongo16MBDocumentSupport") && (
+              >
-                  <Stack className="panelGroupSpacing">
+                <Stack className="panelGroupSpacing" id="collapsibleAdvancedSectionContent">
-                    <Stack horizontal>
+                  {isCapabilityEnabled("EnableMongo") && !isCapabilityEnabled("EnableMongo16MBDocumentSupport") && (
-                      <span className="mandatoryStar">*&nbsp;</span>
+                    <Stack className="panelGroupSpacing">
-                      <Text className="panelTextBold" variant="small">
+                      <Stack horizontal>
-                        Indexing
+                        <span className="mandatoryStar">*&nbsp;</span>
-                      </Text>
+                        <Text className="panelTextBold" variant="small">
-                      <TooltipHost
+                          Indexing
-                        directionalHint={DirectionalHint.bottomLeftEdge}
+                        </Text>
-                        content="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
+                        <TooltipHost
-                      >
+                          directionalHint={DirectionalHint.bottomLeftEdge}
-                        <Icon
+                          content="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
-                          iconName="Info"
+                        >
-                          className="panelInfoIcon"
+                          <Icon
-                          tabIndex={0}
+                            iconName="Info"
-                          ariaLabel="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
+                            className="panelInfoIcon"
-                        />
+                            tabIndex={0}
-                      </TooltipHost>
+                            ariaLabel="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
+                          />
+                        </TooltipHost>
+                      </Stack>
+
+                      <Checkbox
+                        label="Create a Wildcard Index on all fields"
+                        checked={this.state.createMongoWildCardIndex}
+                        styles={{
+                          text: { fontSize: 12 },
+                          checkbox: { width: 12, height: 12 },
+                          label: { padding: 0, alignItems: "center" },
+                        }}
+                        onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                          this.setState({ createMongoWildCardIndex: isChecked })
+                        }
+                      />
                     </Stack>
+                  )}
 
-                    <Checkbox
+                  {userContext.apiType === "SQL" && (
-                      label="Create a Wildcard Index on all fields"
+                    <Stack className="panelGroupSpacing">
-                      checked={this.state.createMongoWildCardIndex}
+                      <Checkbox
-                      styles={{
+                        label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
-                        text: { fontSize: 12 },
+                        checked={this.state.useHashV1}
-                        checkbox: { width: 12, height: 12 },
+                        styles={{
-                        label: { padding: 0, alignItems: "center" },
+                          text: { fontSize: 12 },
-                      }}
+                          checkbox: { width: 12, height: 12 },
-                      onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                          label: {
-                        this.setState({ createMongoWildCardIndex: isChecked })
+                            padding: 0,
-                      }
+                            alignItems: "center",
-                    />
+                            wordWrap: "break-word",
-                  </Stack>
+                            whiteSpace: "break-spaces",
-                )}
+                          },
-
+                        }}
-                {userContext.apiType === "SQL" && (
+                        onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
-                  <Stack className="panelGroupSpacing">
+                          this.setState({ useHashV1: isChecked, subPartitionKeys: [] })
-                    <Checkbox
+                        }
-                      label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
+                      />
-                      checked={this.state.useHashV1}
+                      <Text variant="small">
-                      styles={{
+                        <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs,
-                        text: { fontSize: 12 },
+                        the created container will use a legacy partitioning scheme that supports partition key values
-                        checkbox: { width: 12, height: 12 },
+                        of size only up to 101 bytes. If this is enabled, you will not be able to use hierarchical
-                        label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
+                        partition keys.{" "}
-                      }}
+                        <Link href="https://aka.ms/cosmos-large-pk" target="_blank">
-                      onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                          Learn more
-                        this.setState({ useHashV1: isChecked, subPartitionKeys: [] })
+                        </Link>
-                      }
+                      </Text>
-                    />
+                    </Stack>
-                    <Text variant="small">
+                  )}
-                      <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the
+                </Stack>
-                      created container will use a legacy partitioning scheme that supports partition key values of size
+              </CollapsibleSectionComponent>
-                      only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}
+            )}
-                      <Link href="https://aka.ms/cosmos-large-pk" target="_blank">
-                        Learn more
-                      </Link>
-                    </Text>
-                  </Stack>
-                )}
-              </Stack>
-            </CollapsibleSectionComponent>
-          )}
         </div>
 
         <PanelFooterComponent buttonLabel="OK" isButtonDisabled={this.state.isThroughputCapExceeded} />
@@ -1135,6 +1143,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   // }
 
   private shouldShowCollectionThroughputInput(): boolean {
+    if (!isFeatureSupported(PlatformFeature.ContainerThroughput)) {
+      return false;
+    }
+
     if (isServerlessAccount()) {
       return false;
     }

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -202,7 +202,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const styles = useStyles();
 
   const explorerVersion = configContext.gitSha;
-  const isEmulator = configContext.platform === Platform.Emulator;
+  const isEmulator = configContext.platform === Platform.Emulator || configContext.platform === Platform.VNextEmulator;
   const shouldShowQueryPageOptions = userContext.apiType === "SQL";
   const showRetrySettings =
     (userContext.apiType === "SQL" || userContext.apiType === "Tables" || userContext.apiType === "Gremlin") &&

src/Explorer/Tree/treeNodeUtil.tsx

@@ -21,7 +21,12 @@ import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { useSelectedNode } from "../useSelectedNode";
 
 export const shouldShowScriptNodes = (): boolean => {
-  return !isFabric() && configContext.platform !== Platform.Emulator && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin");
+  return (
+    !isFabric() &&
+    configContext.platform !== Platform.Emulator &&
+    configContext.platform !== Platform.VNextEmulator &&
+    (userContext.apiType === "SQL" || userContext.apiType === "Gremlin")
+  );
 };
 
 const TreeDatabaseIcon = <DatabaseRegular fontSize={16} />;

src/Utils/PlatformFeatureUtils.ts

@@ -29,6 +29,9 @@ export enum PlatformFeature {
   ThroughputBucketing = "ThroughputBucketing",
   ComputedProperties = "ComputedProperties",
   AnalyticalStore = "AnalyticalStore",
+  UniqueKeys = "UniqueKeys",
+  ContainerThroughput = "ContainerThroughput",
+  AdvancedContainerSettings = "AdvancedContainerSettings",
 
   // CRUD Operations - Database
   CreateDatabase = "CreateDatabase",
@@ -63,6 +66,7 @@ const FEATURE_MATRIX: ReadonlyMap<Platform, ReadonlySet<PlatformFeature>> = new
     Platform.VNextEmulator,
     new Set<PlatformFeature>([
       PlatformFeature.Queries,
+      PlatformFeature.UniqueKeys,
 
       PlatformFeature.CreateDatabase,
       PlatformFeature.ReadDatabase,

src/Utils/QueryUtils.ts

@@ -1,4 +1,5 @@
 import { PartitionKey, PartitionKeyDefinition } from "@azure/cosmos";
+import { configContext, Platform } from "ConfigContext";
 import { getRUThreshold, ruThresholdEnabled } from "Shared/StorageUtility";
 import { userContext } from "UserContext";
 import { logConsoleWarning } from "Utils/NotificationConsoleUtils";
@@ -66,7 +67,11 @@ export function buildDocumentsQueryPartitionProjections(
       }
     });
     const fullAccess = `${collectionAlias}${projectedProperty}`;
-    if (!isSystemPartitionKey) {
+    if (
+      !isSystemPartitionKey &&
+      configContext.platform !== Platform.Emulator &&
+      configContext.platform !== Platform.VNextEmulator
+    ) {
       const wrappedProjection = `IIF(IS_DEFINED(${fullAccess}), ${fullAccess}, {})`;
       projections.push(wrappedProjection);
     } else {

src/quickstart-sql-only-http.html

@@ -35,214 +35,92 @@
       <div class="container-fluid">
         <ul class="nav nav-tabs qslevel">
           <li class="active">
-            <a data-toggle="tab" href="#net"
+            <a data-toggle="tab" href="#net">
-              ><img class="qsmenuicons" src="../images/dotnet.png" alt=".NET platform" />.NET</a
+              <img class="qsmenuicons" src="../images/dotnet.png" alt=".NET" /> .NET
-            >
+            </a>
           </li>
           <li>
-            <a data-toggle="tab" href="#corenet"
+            <a data-toggle="tab" href="#java"> <img class="qsmenuicons" src="../images/java.png" alt="Java" /> Java </a>
-              ><img class="qsmenuicons" src="../images/dotnet.png" alt=".NET Core platform" />.NET Core</a
-            >
           </li>
           <li>
-            <a data-toggle="tab" href="#Java"
+            <a data-toggle="tab" href="#nodejs">
-              ><img class="qsmenuicons" src="../images/java.png" alt="Java platform" />Java</a
+              <img class="qsmenuicons" src="../images/nodejs.png" alt="Node.js" /> Node.js
-            >
+            </a>
           </li>
           <li>
-            <a data-toggle="tab" href="#NodeJs"
+            <a data-toggle="tab" href="#python">
-              ><img class="qsmenuicons" src="../images/nodejs.png" alt="Node.js platform" />Node.js</a
+              <img class="qsmenuicons" src="../images/python.png" alt="Python" /> Python
-            >
+            </a>
           </li>
           <li>
-            <a data-toggle="tab" href="#Python"
+            <a data-toggle="tab" href="#go"> <img class="qsmenuicons" src="../images/golang.svg" alt="Go" /> Go </a>
-              ><img class="qsmenuicons" src="../images/python.png" alt="Python platform" />Python</a
+          </li>
-            >
+          <li>
+            <a data-toggle="tab" href="#springboot">
+              <img class="qsmenuicons" src="../images/springboot.svg" alt="Spring Boot" /> Spring Boot
+            </a>
           </li>
         </ul>
-        <div class="tab-content tab-content-override">
+
+        <div class="tab-content">
           <div id="net" class="tab-pane fade in active">
-            <div class="netApp">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Open and run a sample .NET app
+                Create a new .NET app
                 <p>
-                  We created a sample .NET app connected to your Azure Cosmos DB Emulator instance. Download, extract,
+                  Follow this
-                  build and run the app.
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-dotnet" target="_blank"
+                    >tutorial
+                  </a>
+                  to create a new .NET app connected to Azure Cosmos DB.
                 </p>
-                <a href="quickstart/DocumentDB-Quickstart-DotNet.zip"
-                  ><button class="btncreatecoll">Download</button></a
-                >
-              </div>
-            </div>
-
-            <div class="netApp">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB
-                <ul>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/dotnet"
-                      >Code Samples</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-          <div id="corenet" class="tab-pane fade">
-            <div class="netApp">
-              <div class="numbersize numbersizePadding">1</div>
-              <div class="numberheading">
-                Open and run a sample .NET Core app
-                <p>
-                  We created a sample .NET Core app connected to your Azure Cosmos DB Emulator instance. Download,
-                  extract, build and run the app.
-                </p>
-                <a href="quickstart/DocumentDB-Quickstart-DotNetCore.zip"
-                  ><button class="btncreatecoll">Download</button></a
-                >
-              </div>
-            </div>
-
-            <div class="netApp">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB.
-                <ul>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/dotnet"
-                      >Code Samples</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
               </div>
             </div>
+            <div class="learn-more"></div>
           </div>
 
-          <div id="Java" class="tab-pane fade">
+          <div id="java" class="tab-pane fade">
-            <div class="step1">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Open and run a sample Java app
+                Create a new Java app
                 <p>
-                  We created a sample Java app connected to your Azure Cosmos DB Emulator instance. Download, extract,
+                  Follow this
-                  build and run the app.
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-java" target="_blank"
-                </p>
+                    >tutorial
-                <a href="quickstart/DocumentDB-Quickstart-Java.zip"><button class="btncreatecoll">Download</button></a>
+                  </a>
-                <p>
+                  to create a new Java app connected to Azure Cosmos DB.
-                  Follow instructions in the readme.md to setup prerequisites needed to run Java web apps, if you
-                  haven’t already.
                 </p>
               </div>
             </div>
-
+            <div class="learn-more"></div>
-            <div class="step1">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB.
-                <ul>
-                  <!--<li><a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/java">Code Samples</a></li>-->
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
           </div>
 
-          <div id="NodeJs" class="tab-pane fade">
+          <div id="nodejs" class="tab-pane fade">
-            <div class="step1">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Open and run a sample Node.js app
+                Create a new Node.js app
                 <p>
-                  We created a sample Node.js app connected to your Azure Cosmos DB Emulator instance. Download,
+                  Follow this
-                  extract, build and run the app.
+                  <a
-                </p>
+                    href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-nodejs?pivots=programming-language-ts"
-                <a href="quickstart/DocumentDB-Quickstart-NodeJs.zip"
+                    target="_blank"
-                  ><button class="btncreatecoll">Download</button></a
+                    >tutorial
-                >
+                  </a>
-                <p>
+                  to create a new Node.js app connected to Azure Cosmos DB.
-                  Run <strong>npm install</strong> and <strong>npm start</strong>, and navigate to
-                  <a href="http://localhost:3000" _targe="blank">http://localhost:3000</a>.
                 </p>
               </div>
             </div>
-
+            <div class="learn-more"></div>
-            <div class="step1">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB.
-                <ul>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/nodejs"
-                      >Code Samples</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
           </div>
 
-          <div id="Python" class="tab-pane fade">
+          <div id="python" class="tab-pane fade">
-            <div class="pythonApp">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Create a new Python app.
+                Create a new Python app
                 <p>
                   Follow this
                   <a href="https://aka.ms/cosmos-db-emulator/tutorial/python" target="_blank">tutorial</a>
@@ -250,42 +128,73 @@
                 </p>
               </div>
             </div>
+            <div class="learn-more"></div>
+          </div>
 
-            <div class="pythonApp">
+          <div id="go" class="tab-pane fade">
-              <div class="numbersize">2</div>
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Learn more about Azure Cosmos DB.
+                Create a new Go app
-                <ul>
+                <p>
-                  <li>
+                  Follow this
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/python"
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-go" target="_blank">tutorial</a>
-                      >Code Samples</a
+                  to create a new Go app connected to Azure Cosmos DB.
-                    >
+                </p>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity planner</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      target="_blank"
-                      class="atags"
-                      href="https://social.msdn.microsoft.com/forums/azure/home?forum=AzureDocumentDB"
-                      >Forum</a
-                    >
-                  </li>
-                </ul>
               </div>
             </div>
+            <div class="learn-more"></div>
+          </div>
+
+          <div id="springboot" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new Spring Boot app
+                <p>
+                  Follow this
+                  <a
+                    href="https://learn.microsoft.com/azure/cosmos-db/nosql/tutorial-springboot-azure-kubernetes-service"
+                    target="_blank"
+                    >tutorial</a
+                  >
+                  to create a new Spring Boot app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
           </div>
         </div>
       </div>
     </div>
+
+    <template id="learnMoreTpl">
+      <div class="app-block">
+        <div class="numbersize">2</div>
+        <div class="numberheading">
+          Learn more about Azure Cosmos DB
+          <ul>
+            <li>
+              <a href="https://azurecosmosdb.github.io/gallery/?tags=example" target="_blank" class="atags"
+                >Code Samples</a
+              >
+            </li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/docs" target="_blank" class="atags">Documentation</a></li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/pricing" target="_blank" class="atags">Pricing</a></li>
+            <li>
+              <a href="https://cosmos.azure.com/capacitycalculator/" target="_blank" class="atags">Capacity planner</a>
+            </li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/stackoverflow" target="_blank" class="atags">Forum</a></li>
+          </ul>
+        </div>
+      </div>
+    </template>
+
+    <script>
+      document.querySelectorAll(".learn-more").forEach((slot) => {
+        const node = document.getElementById("learnMoreTpl").content.cloneNode(true);
+        slot.appendChild(node);
+      });
+    </script>
   </body>
 </html>

src/quickstart-sql-only.html

@@ -35,214 +35,92 @@
       <div class="container-fluid">
         <ul class="nav nav-tabs qslevel">
           <li class="active">
-            <a data-toggle="tab" href="#net"
+            <a data-toggle="tab" href="#net">
-              ><img class="qsmenuicons" src="../images/dotnet.png" alt=".NET platform" />.NET</a
+              <img class="qsmenuicons" src="../images/dotnet.png" alt=".NET" /> .NET
-            >
+            </a>
           </li>
           <li>
-            <a data-toggle="tab" href="#corenet"
+            <a data-toggle="tab" href="#java"> <img class="qsmenuicons" src="../images/java.png" alt="Java" /> Java </a>
-              ><img class="qsmenuicons" src="../images/dotnet.png" alt=".NET Core platform" />.NET Core</a
-            >
           </li>
           <li>
-            <a data-toggle="tab" href="#Java"
+            <a data-toggle="tab" href="#nodejs">
-              ><img class="qsmenuicons" src="../images/java.png" alt="Java platform" />Java</a
+              <img class="qsmenuicons" src="../images/nodejs.png" alt="Node.js" /> Node.js
-            >
+            </a>
           </li>
           <li>
-            <a data-toggle="tab" href="#NodeJs"
+            <a data-toggle="tab" href="#python">
-              ><img class="qsmenuicons" src="../images/nodejs.png" alt="Node.js platform" />Node.js</a
+              <img class="qsmenuicons" src="../images/python.png" alt="Python" /> Python
-            >
+            </a>
           </li>
           <li>
-            <a data-toggle="tab" href="#Python"
+            <a data-toggle="tab" href="#go"> <img class="qsmenuicons" src="../images/golang.svg" alt="Go" /> Go </a>
-              ><img class="qsmenuicons" src="../images/python.png" alt="Python platform" />Python</a
+          </li>
-            >
+          <li>
+            <a data-toggle="tab" href="#springboot">
+              <img class="qsmenuicons" src="../images/springboot.svg" alt="Spring Boot" /> Spring Boot
+            </a>
           </li>
         </ul>
-        <div class="tab-content tab-content-override">
+
+        <div class="tab-content">
           <div id="net" class="tab-pane fade in active">
-            <div class="netApp">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Open and run a sample .NET app
+                Create a new .NET app
                 <p>
-                  We created a sample .NET app connected to your Azure Cosmos DB Emulator instance. Download, extract,
+                  Follow this
-                  build and run the app.
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-dotnet" target="_blank"
+                    >tutorial
+                  </a>
+                  to create a new .NET app connected to Azure Cosmos DB.
                 </p>
-                <a href="quickstart/DocumentDB-Quickstart-DotNet.zip"
-                  ><button class="btncreatecoll">Download</button></a
-                >
-              </div>
-            </div>
-
-            <div class="netApp">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB
-                <ul>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/dotnet"
-                      >Code Samples</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-          <div id="corenet" class="tab-pane fade">
-            <div class="netApp">
-              <div class="numbersize numbersizePadding">1</div>
-              <div class="numberheading">
-                Open and run a sample .NET Core app
-                <p>
-                  We created a sample .NET Core app connected to your Azure Cosmos DB Emulator instance. Download,
-                  extract, build and run the app.
-                </p>
-                <a href="quickstart/DocumentDB-Quickstart-DotNetCore.zip"
-                  ><button class="btncreatecoll">Download</button></a
-                >
-              </div>
-            </div>
-
-            <div class="netApp">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB.
-                <ul>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/dotnet"
-                      >Code Samples</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
               </div>
             </div>
+            <div class="learn-more"></div>
           </div>
 
-          <div id="Java" class="tab-pane fade">
+          <div id="java" class="tab-pane fade">
-            <div class="step1">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Open and run a sample Java app
+                Create a new Java app
                 <p>
-                  We created a sample Java app connected to your Azure Cosmos DB Emulator instance. Download, extract,
+                  Follow this
-                  build and run the app.
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-java" target="_blank"
-                </p>
+                    >tutorial
-                <a href="quickstart/DocumentDB-Quickstart-Java.zip"><button class="btncreatecoll">Download</button></a>
+                  </a>
-                <p>
+                  to create a new Java app connected to Azure Cosmos DB.
-                  Follow instructions in the readme.md to setup prerequisites needed to run Java web apps, if you
-                  haven’t already.
                 </p>
               </div>
             </div>
-
+            <div class="learn-more"></div>
-            <div class="step1">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB.
-                <ul>
-                  <!--<li><a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/java">Code Samples</a></li>-->
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
           </div>
 
-          <div id="NodeJs" class="tab-pane fade">
+          <div id="nodejs" class="tab-pane fade">
-            <div class="step1">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Open and run a sample Node.js app
+                Create a new Node.js app
                 <p>
-                  We created a sample Node.js app connected to your Azure Cosmos DB Emulator instance. Download,
+                  Follow this
-                  extract, build and run the app.
+                  <a
-                </p>
+                    href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-nodejs?pivots=programming-language-ts"
-                <a href="quickstart/DocumentDB-Quickstart-NodeJs.zip"
+                    target="_blank"
-                  ><button class="btncreatecoll">Download</button></a
+                    >tutorial
-                >
+                  </a>
-                <p>
+                  to create a new Node.js app connected to Azure Cosmos DB.
-                  Run <strong>npm install</strong> and <strong>npm start</strong>, and navigate to
-                  <a href="http://localhost:3000" _targe="blank">http://localhost:3000</a>.
                 </p>
               </div>
             </div>
-
+            <div class="learn-more"></div>
-            <div class="step1">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB.
-                <ul>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/nodejs"
-                      >Code Samples</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
           </div>
 
-          <div id="Python" class="tab-pane fade">
+          <div id="python" class="tab-pane fade">
-            <div class="pythonApp">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Create a new Python app.
+                Create a new Python app
                 <p>
                   Follow this
                   <a href="https://aka.ms/cosmos-db-emulator/tutorial/python" target="_blank">tutorial</a>
@@ -250,42 +128,73 @@
                 </p>
               </div>
             </div>
+            <div class="learn-more"></div>
+          </div>
 
-            <div class="pythonApp">
+          <div id="go" class="tab-pane fade">
-              <div class="numbersize">2</div>
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Learn more about Azure Cosmos DB.
+                Create a new Go app
-                <ul>
+                <p>
-                  <li>
+                  Follow this
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/python"
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-go" target="_blank">tutorial</a>
-                      >Code Samples</a
+                  to create a new Go app connected to Azure Cosmos DB.
-                    >
+                </p>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity planner</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      target="_blank"
-                      class="atags"
-                      href="https://social.msdn.microsoft.com/forums/azure/home?forum=AzureDocumentDB"
-                      >Forum</a
-                    >
-                  </li>
-                </ul>
               </div>
             </div>
+            <div class="learn-more"></div>
+          </div>
+
+          <div id="springboot" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new Spring Boot app
+                <p>
+                  Follow this
+                  <a
+                    href="https://learn.microsoft.com/azure/cosmos-db/nosql/tutorial-springboot-azure-kubernetes-service"
+                    target="_blank"
+                    >tutorial</a
+                  >
+                  to create a new Spring Boot app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
           </div>
         </div>
       </div>
     </div>
+
+    <template id="learnMoreTpl">
+      <div class="app-block">
+        <div class="numbersize">2</div>
+        <div class="numberheading">
+          Learn more about Azure Cosmos DB
+          <ul>
+            <li>
+              <a href="https://azurecosmosdb.github.io/gallery/?tags=example" target="_blank" class="atags"
+                >Code Samples</a
+              >
+            </li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/docs" target="_blank" class="atags">Documentation</a></li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/pricing" target="_blank" class="atags">Pricing</a></li>
+            <li>
+              <a href="https://cosmos.azure.com/capacitycalculator/" target="_blank" class="atags">Capacity planner</a>
+            </li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/stackoverflow" target="_blank" class="atags">Forum</a></li>
+          </ul>
+        </div>
+      </div>
+    </template>
+
+    <script>
+      document.querySelectorAll(".learn-more").forEach((slot) => {
+        const node = document.getElementById("learnMoreTpl").content.cloneNode(true);
+        slot.appendChild(node);
+      });
+    </script>
   </body>
 </html>

src/quickstart-sql.template.ejs

@@ -0,0 +1,179 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
+    <title>Azure Cosmos DB Emulator (SQL)</title>
+  </head>
+  <body>
+    <div id="divQuickStart">
+      <div class="Introlines">
+        <p class="Introline1">Congratulations! Your Azure Cosmos DB emulator is running.</p>
+        <p class="Introline2">Now, let's connect a sample app to it.</p>
+        <div id="divQuickStartConnections">
+          <p class="Introline2">URI</p>
+          <input type="text" class="codeblock" readonly value="<%= endpointUri %>" />
+          <p class="Introline2">Primary Key</p>
+          <input type="text" class="codeblock" readonly value="<%= primaryKey %>" />
+          <p class="Introline2">Primary Connection String</p>
+          <input type="text" class="codeblock" readonly value="<%= primaryConnString %>" />
+        </div>
+        <p class="Introline3"><b>Choose a platform</b></p>
+      </div>
+      <div class="container-fluid">
+        <ul class="nav nav-tabs qslevel">
+          <li class="active">
+            <a data-toggle="tab" href="#net"> <img class="qsmenuicons" src="images/dotnet.png" alt=".NET" /> .NET </a>
+          </li>
+          <li>
+            <a data-toggle="tab" href="#java"><img class="qsmenuicons" src="images/java.png" alt="Java" /> Java</a>
+          </li>
+          <li>
+            <a data-toggle="tab" href="#nodejs"
+              ><img class="qsmenuicons" src="images/nodejs.png" alt="Node.js" /> Node.js</a
+            >
+          </li>
+          <li>
+            <a data-toggle="tab" href="#python"
+              ><img class="qsmenuicons" src="images/python.png" alt="Python" /> Python</a
+            >
+          </li>
+          <li>
+            <a data-toggle="tab" href="#go"><img class="qsmenuicons" src="images/golang.svg" alt="Go" /> Go</a>
+          </li>
+          <li>
+            <a data-toggle="tab" href="#springboot"
+              ><img class="qsmenuicons" src="images/springboot.svg" alt="Spring Boot" /> Spring Boot</a
+            >
+          </li>
+        </ul>
+        <div class="tab-content">
+          <div id="net" class="tab-pane fade in active">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new .NET app
+                <p>
+                  Follow this
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-dotnet" target="_blank"
+                    >tutorial</a
+                  >
+                  to create a new .NET app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
+          </div>
+          <div id="java" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new Java app
+                <p>
+                  Follow this
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-java" target="_blank"
+                    >tutorial</a
+                  >
+                  to create a new Java app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
+          </div>
+          <div id="nodejs" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new Node.js app
+                <p>
+                  Follow this
+                  <a
+                    href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-nodejs?pivots=programming-language-ts"
+                    target="_blank"
+                    >tutorial</a
+                  >
+                  to create a new Node.js app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
+          </div>
+          <div id="python" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new Python app
+                <p>
+                  Follow this <a href="https://aka.ms/cosmos-db-emulator/tutorial/python" target="_blank">tutorial</a>
+                  to create a new Python app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
+          </div>
+          <div id="go" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new Go app
+                <p>
+                  Follow this
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-go" target="_blank">tutorial</a>
+                  to create a new Go app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
+          </div>
+          <div id="springboot" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new Spring Boot app
+                <p>
+                  Follow this
+                  <a
+                    href="https://learn.microsoft.com/azure/cosmos-db/nosql/tutorial-springboot-azure-kubernetes-service"
+                    target="_blank"
+                    >tutorial</a
+                  >
+                  to create a new Spring Boot app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template id="learnMoreTpl">
+      <div class="app-block">
+        <div class="numbersize">2</div>
+        <div class="numberheading">
+          Learn more about Azure Cosmos DB
+          <ul>
+            <li>
+              <a href="https://azurecosmosdb.github.io/gallery/?tags=example" target="_blank" class="atags"
+                >Code Samples</a
+              >
+            </li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/docs" target="_blank" class="atags">Documentation</a></li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/pricing" target="_blank" class="atags">Pricing</a></li>
+            <li>
+              <a href="https://cosmos.azure.com/capacitycalculator/" target="_blank" class="atags">Capacity planner</a>
+            </li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/stackoverflow" target="_blank" class="atags">Forum</a></li>
+          </ul>
+        </div>
+      </div>
+    </template>
+
+    <script>
+      document.querySelectorAll(".learn-more").forEach((slot) => {
+        const node = document.getElementById("learnMoreTpl").content.cloneNode(true);
+        slot.appendChild(node);
+      });
+    </script>
+  </body>
+</html>

webpack.config.js

@@ -122,6 +122,23 @@ module.exports = function (_env = {}, argv = {}) {
     ...(mode !== "production" && { testExplorer: "./test/testExplorer/TestExplorer.ts" }),
   };
 
+  // Derive emulator endpoint components from EMULATOR_ENDPOINT (fallback to localhost defaults)
+  const rawEndpoint = process.env.EMULATOR_ENDPOINT || (ishttps ? "https://localhost:8081/" : "http://localhost:8081/");
+  let endpointProtocol = ishttps ? "https" : "http";
+  let endpointHost = "localhost";
+  let endpointPort = "8081";
+  try {
+    const u = new URL(rawEndpoint);
+    endpointProtocol = u.protocol.replace(":", "");
+    endpointHost = u.hostname;
+    endpointPort = u.port || (endpointProtocol === "https" ? "443" : "80");
+  } catch (e) {
+    // Ignore parse errors and keep defaults
+  }
+  const endpointUri = `${endpointProtocol}://${endpointHost}:${endpointPort}`;
+  const primaryKeyConst = "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
+  const primaryConnString = `AccountEndpoint=${endpointUri}/;AccountKey=${primaryKeyConst}`;
+
   const htmlWebpackPlugins = [
     new HtmlWebpackPlugin({
       filename: "explorer.html",
@@ -134,17 +151,16 @@ module.exports = function (_env = {}, argv = {}) {
       chunks: ["terminal"],
     }),
     //todo - dynamically include apis
-    ishttps
+    new HtmlWebpackPlugin({
-      ? new HtmlWebpackPlugin({
+      filename: "quickstart.html",
-          filename: "quickstart.html",
+      template: "src/quickstart-sql.template.ejs",
-          template: "src/quickstart-sql-only.html",
+      chunks: ["quickstart"],
-          chunks: ["quickstart"],
+      templateParameters: {
-        })
+        endpointUri,
-      : new HtmlWebpackPlugin({
+        primaryKey: primaryKeyConst,
-          filename: "quickstart.html",
+        primaryConnString,
-          template: "src/quickstart-sql-only-http.html",
+      },
-          chunks: ["quickstart"],
+    }),
-        }),
     new HtmlWebpackPlugin({
       filename: "index.html",
       template: "src/index.html",
@@ -220,6 +236,7 @@ module.exports = function (_env = {}, argv = {}) {
         { from: "DataExplorer.proj" },
         { from: "web.config" },
         { from: "quickstart/*.zip" },
+        { from: "images", to: "images" },
       ],
     }),
     new EnvironmentPlugin(envVars),