mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-10 13:08:20 +00:00
Add parameterized ejs
This commit is contained in:
Sung-Hyun Kang
179
src/quickstart-sql.template.ejs
Normal file
179
src/quickstart-sql.template.ejs
Normal file
@@ -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>
|
||||||
@@ -122,6 +122,23 @@ module.exports = function (_env = {}, argv = {}) {
|
|||||||
...(mode !== "production" && { testExplorer: "./test/testExplorer/TestExplorer.ts" }),
|
...(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 = [
|
const htmlWebpackPlugins = [
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
filename: "explorer.html",
|
filename: "explorer.html",
|
||||||
@@ -134,17 +151,16 @@ module.exports = function (_env = {}, argv = {}) {
|
|||||||
chunks: ["terminal"],
|
chunks: ["terminal"],
|
||||||
}),
|
}),
|
||||||
//todo - dynamically include apis
|
//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({
|
new HtmlWebpackPlugin({
|
||||||
filename: "index.html",
|
filename: "index.html",
|
||||||
template: "src/index.html",
|
template: "src/index.html",
|
||||||
@@ -220,6 +236,7 @@ module.exports = function (_env = {}, argv = {}) {
|
|||||||
{ from: "DataExplorer.proj" },
|
{ from: "DataExplorer.proj" },
|
||||||
{ from: "web.config" },
|
{ from: "web.config" },
|
||||||
{ from: "quickstart/*.zip" },
|
{ from: "quickstart/*.zip" },
|
||||||
|
{ from: "images", to: "images" },
|
||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
new EnvironmentPlugin(envVars),
|
new EnvironmentPlugin(envVars),
|
||||||
|
|||||||
Reference in New Issue
Block a user