cosmos-explorer/src/quickstart.html
Nishtha Ahuja 6db2536a61
fixed quickstart tab in emulator (#2115)
Co-authored-by: nishthaAhujaa <nishtha17354@iiittd.ac.in>
2025-04-28 21:11:27 +05:30

212 lines
8.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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</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="readonly" value="https://localhost:8081" />
<p class="Introline2">Primary Key</p>
<input
type="text"
class="codeblock"
readonly="readonly"
value="C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw=="
/>
<p class="Introline2">Primary Connection String</p>
<input
type="text"
class="codeblock"
readonly="readonly"
value="AccountEndpoint=https://localhost:8081/;AccountKey=C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw=="
/>
<p class="Introline2">Mongo Connection String</p>
<input
type="text"
class="codeblock"
readonly="readonly"
value="mongodb://localhost:C2y6yDjf5%2FR%2Bob0N8A7Cgv30VRDJIWEHLM%2B4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw%2FJw%3D%3D@localhost:10255/admin?ssl=true"
/>
</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" /> Springboot
</a>
</li>
</ul>
<div class="tab-content tab-content-override">
<div id="net" class="tab-pane fade in active">
<div class="netApp">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Open and run a sample .NET app
<p>
We created a sample .NET app connected to your Azure Cosmos DB Emulator instance. Download, extract,
build and run the app.
</p>
<a href="quickstart/DocumentDB-Quickstart-DotNet.zip"
><button class="btncreatecoll">Download</button></a
>
</div>
</div>
<div class="learn-more"></div>
</div>
<div id="java" class="tab-pane fade">
<div class="step1">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Open and run a sample Java app
<p>
We created a sample Java app connected to your Azure Cosmos DB Emulator instance. Download, extract,
build and run the app.
</p>
<a href="quickstart/DocumentDB-Quickstart-Java.zip"><button class="btncreatecoll">Download</button></a>
<p>
Follow instructions in the readme.md to setup prerequisites needed to run Java web apps, if you
havent already.
</p>
</div>
</div>
<div class="learn-more"></div>
</div>
<div id="nodejs" class="tab-pane fade">
<div class="step1">
<div class="numbersize numbersizePadding">1</div>
<div class="numberheading">
Open and run a sample Node.js app
<p>
We created a sample Node.js app connected to your Azure Cosmos DB Emulator instance. Download,
extract, build and run the app.
</p>
<a href="quickstart/DocumentDB-Quickstart-NodeJs.zip"
><button class="btncreatecoll">Download</button></a
>
<p>
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>
<div id="python" class="tab-pane fade">
<div class="pythonApp">
<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>
<!-- Go -->
<div id="go" class="tab-pane fade">
<div class="pythonApp">
<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="pythonApp">
<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>