Skip to content

Commit c6b0472

Browse files
authored
Merge pull request #7 from mongodb-developer/instruqt_updates
Update lab documentation to include Instruqt instructions
2 parents 873b79b + 01cec08 commit c6b0472

24 files changed

+80
-22
lines changed

docs/20-dev-env/2-dev-env-setup.mdx

Lines changed: 80 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import Tabs from '@theme/Tabs';
2+
import TabItem from '@theme/TabItem';
13
import Screenshot from "@site/src/components/Screenshot";
24

35
# 👐 Setup dev environment
@@ -6,59 +8,111 @@ import Screenshot from "@site/src/components/Screenshot";
68
In this lab, we will be using Jupyter Notebooks, which is an interactive Python environment. If you are new to Jupyter Notebooks, use <a href="./jupyter-notebooks">this</a> guide to familiarize yourself with the environment.
79
:::
810

9-
## Option 1: GitHub Codespaces
11+
You have a few different options to run this lab. **Our preferred platform is Instruqt**.
1012

11-
You will be working in GitHub Codespaces throughout this lab. A codespace is a cloud-hosted, containerized development environment that comes pre-configured with all the tools you need to run this lab.
13+
If for some reason, you are unable to access the lab through Instruqt, try GitHub Codespaces. If neither of these work, or if you really, really, really want a local installation, only then run the lab locally.
1214

13-
Navigate to [this](https://github.com/codespaces/new/mongodb-developer/genai-devday-notebooks?quickstart=1) link. You will be prompted to sign into GitHub if you haven't already. Once signed in, click the **Create new codespace** button to create a new codespace.
15+
<Tabs groupId="setup options">
16+
<TabItem value="Instruqt" label="Instruqt">
1417

15-
<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/1-create-codespace.png" alt="Start a codespace" />
18+
Instruqt is a lab platform that provides cloud-based sandboxes which come pre-configured with all the tools you need to run this lab.
1619

17-
Let it run for a few seconds as it prepares a Docker container with all the required libraries and a MongoDB cluster.
20+
**Navigate to the Instruqt lab using [this](http://mdb.link/instruqt-ai) link.** Fill out the form that appears and click **Submit and access**.
21+
22+
<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/2-dev-env-setup/instruqt/1-submit-form.png" alt="Submit Instruqt form" />
23+
24+
Click **Start** to launch the lab environment.
25+
26+
<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/2-dev-env-setup/instruqt/2-start-sandbox-setup.png" alt="Start Instruqt sandbox" />
27+
28+
You should see a screen with a purple progress bar indicating that Instruqt is preparing a sandbox with all the required libraries for this lab and a MongoDB cluster.
29+
30+
Once this is done, you should see a Start button at the bottom right of the screen. Click this to enter the lab.
31+
32+
<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/2-dev-env-setup/instruqt/3-start-lab.png" alt="Start Instruqt lab" />
1833

1934
### Connect to the MongoDB cluster
2035

21-
Once the environment is built, you will be prompted to connect to the MongoDB cluster via MongoDB's VSCode extension. This will allow you to visualize the data that we will import into the cluster later in the lab, directly from the VSCode IDE.
36+
Let's first connect to the MongoDB cluster that was created for you. This will allow you to view data we import into the cluster later in the lab, directly from the VSCode IDE.
2237

23-
To connect to the cluster, click the leaf icon in the left navigation bar of the IDE.
38+
To do this, click the leaf icon in the left navigation bar of the IDE. This is MongoDB's VSCode extension.
2439

25-
<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/2-click-leaf.png" alt="Click leaf icon" />
40+
<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/2-dev-env-setup/instruqt/4-click-leaf.png" alt="Click leaf icon" />
2641

27-
Under **Connections**, click the _mongodb:27017_ connection. This should automatically establish a connection to the local MongoDB cluster running on port 27017.
42+
Under **Connections**, click the _Local MongoDB Atlas_ connection. This should automatically establish a connection to the local MongoDB cluster running on port 27017.
2843

29-
<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/3-connect-cluster.png" alt="Connect to the cluster" />
44+
<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/2-dev-env-setup/instruqt/5-connect-cluster.png" alt="Connect to the cluster" />
3045

31-
If the connection was successful, you should see the message **Connected to: mongodb:27017** with a green indicator.
46+
If the connection was successful, you should see a green leaf and a "connected" message appear around the _Local MongoDB Atlas_ connection.
3247

3348
You will also see the default databases in the cluster appear under **Connections**. Any additional databases we create during the lab will also appear here.
3449

35-
<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/4-connection-successful.png" alt="Connection successful" />
50+
<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/2-dev-env-setup/instruqt/6-connection-successful.png" alt="Connection successful" />
3651

3752
### Jupyter Notebook setup
3853

3954
You will be filling code in a Jupyter Notebook during this lab, so let's get set up with that next!
4055

41-
Within the codespace, click on the files icon in the left navigation bar of the IDE. In the Explorer menu, under `notebooks`, click on the file named `vector-search-lab.ipynb` to open the Jupyter Notebook for this lab.
56+
Within the codespace, click on the files icon in the left navigation bar of the IDE. In the Explorer menu, navigate to `genai-devday-notebooks` > `notebooks` > `vector-search-lab.ipynb` to open the Jupyter Notebook for this lab.
4257

43-
<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/5-nav-notebook.png" alt="Navigate to the notebook" />
58+
<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/2-dev-env-setup/instruqt/7-nav-notebook.png" alt="Navigate to the notebook" />
4459

4560
Next, select the Python interpreter by clicking **Select Kernel** at the top right of the IDE.
4661

47-
<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/6-select-kernel.png" alt="Select kernel" />
62+
<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/2-dev-env-setup/instruqt/8-select-kernel.png" alt="Select kernel" />
4863

4964
In the modal that appears, click **Python environments...** and select the interpreter that is marked as **Recommended** or **Global Env**.
5065

51-
<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/7-python-env-modal.png" alt="Select Python Environments" />
66+
<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/2-dev-env-setup/instruqt/9-python-env-modal.png" alt="Select Python Environments" />
5267

53-
<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/8-select-recommended.png" alt="Select recommended interpreter" />
68+
<Screenshot url="https://play.instruqt.com" src="img/screenshots/20-dev-env/2-dev-env-setup/instruqt/10-select-recommended.png" alt="Select recommended interpreter" />
5469

5570
That's it! You're ready for the lab!
5671

57-
## Option 2: Run locally
5872

59-
:::caution
60-
During the lab, we will use GitHub Codespaces. These instructions are here just in case you can't use Codespaces or if you really, really, really want a local installation.
61-
:::
73+
</TabItem>
74+
75+
<TabItem value="GitHub Codespaces" label="GitHub Codespaces">
76+
77+
A codespace is a cloud-hosted development environment from GitHub, that comes pre-configured with all the tools you need to run this lab.
78+
79+
**To create a codespace, navigate to [this](https://github.com/codespaces/new/mongodb-developer/genai-devday-notebooks?quickstart=1) link.** You will be prompted to sign into GitHub if you haven't already. Once signed in, click the **Create new codespace** button to create a new codespace.
80+
81+
<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/codespaces/1-create-codespace.png" alt="Start a codespace" />
82+
83+
Let it run for a few seconds as it prepares a Docker container with all the required libraries and a MongoDB cluster.
84+
85+
### Connect to the MongoDB cluster
86+
87+
Let's first connect to the MongoDB cluster that was created for you. This will allow you to view data we import into the cluster later in the lab, directly from the VSCode IDE.
88+
89+
To do this, click the leaf icon in the left navigation bar of the IDE. This is MongoDB's VSCode extension.
90+
91+
<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/codespaces/2-click-leaf.png" alt="Click leaf icon" />
92+
93+
Under **Connections**, click the _Local MongoDB Atlas_ connection. This should automatically establish a connection to the local MongoDB cluster running on port 27017.
94+
95+
<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/codespaces/3-connect-cluster.png" alt="Connect to the cluster" />
96+
97+
If the connection was successful, you should see a green leaf and a "connected" message appear around the _Local MongoDB Atlas_ connection.
98+
99+
You will also see the default databases in the cluster appear under **Connections**. Any additional databases we create during the lab will also appear here.
100+
101+
<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/codespaces/4-connection-successful.png" alt="Connection successful" />
102+
103+
### Jupyter Notebook setup
104+
105+
You will be filling code in a Jupyter Notebook during this lab, so let's get set up with that next!
106+
107+
Within the codespace, click on the files icon in the left navigation bar of the IDE. In the Explorer menu, under `notebooks`, click on the file named `vector-search-lab.ipynb` to open the Jupyter Notebook for this lab.
108+
109+
<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/2-dev-env-setup/codespaces/5-nav-notebook.png" alt="Navigate to the notebook" />
110+
111+
That's it! You're ready for the lab!
112+
113+
</TabItem>
114+
115+
<TabItem value="Run locally" label="Run locally">
62116

63117
To run the lab locally, follow the steps below:
64118

@@ -96,4 +150,8 @@ jupyter notebook
96150

97151
* In the browser tab that pops up, open the file named `vector-search-lab.ipynb`.
98152

99-
<Screenshot url="localhost:8888/tree" src="img/screenshots/20-dev-env/2-dev-env-setup/9-jupyter-notebook.png" alt="Jupyter Notebook" />
153+
<Screenshot url="localhost:8888/tree" src="img/screenshots/20-dev-env/2-dev-env-setup/local/1-jupyter-notebook.png" alt="Jupyter Notebook" />
154+
155+
</TabItem>
156+
157+
</Tabs>
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
162 KB
Loading

0 commit comments

Comments
 (0)