mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-29 14:44:22 +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" }),
|
||||
};
|
||||
|
||||
// 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({
|
||||
filename: "quickstart.html",
|
||||
template: "src/quickstart-sql-only.html",
|
||||
chunks: ["quickstart"],
|
||||
})
|
||||
: new HtmlWebpackPlugin({
|
||||
filename: "quickstart.html",
|
||||
template: "src/quickstart-sql-only-http.html",
|
||||
chunks: ["quickstart"],
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
filename: "quickstart.html",
|
||||
template: "src/quickstart-sql.template.ejs",
|
||||
chunks: ["quickstart"],
|
||||
templateParameters: {
|
||||
endpointUri,
|
||||
primaryKey: primaryKeyConst,
|
||||
primaryConnString,
|
||||
},
|
||||
}),
|
||||
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),
|
||||
|
||||
Reference in New Issue
Block a user