# Working with MongoDB

MongoDB is a popular document database that is commonly used in JavaScript applications. The project in the "start" folder has been modified to write values to a MongoDB database. That database doesn't exist. You'll need to create it, run the application a few times, and then query it to ensure that there are records being saved.

{% tabs %}
{% tab title="Exercise" %}

* Open the Cosmos DB extension
* Connect to "mongodb://mongo"
* Create a new database called "lamp"
* Create a new collection called "colors"
* Run the application with `npm start`
* Change the colors a few times
* Open a new Mongo DB scrapbook
* Query the "colors" collection to see the records
  {% endtab %}

{% tab title="Answer" %}

* Open the Cosmos DB extension by clicking on the Azure icon in the Activity Bar
* Expand the "Attached Database Accounts" node

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm6xj0pbt83WDvy5oWq%2Fimage.png?alt=media\&token=25021315-59db-4fb3-81a8-2082ea522982)

* Select "Attach Database Account"

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm6xvKYc8gj17jsdvai%2Fimage.png?alt=media\&token=ce7b9f13-d05a-4785-a43e-2ebdad28365a)

* Select MongoDB from the prompt

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm6y6_O_oxv0Ddk-rHs%2Fimage.png?alt=media\&token=8d332b04-a3bf-4dea-9ea6-47adb9e96d97)

* In the prompt, enter "mongodb://mongo"

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm6yDS8c1m619gZZzNL%2Fimage.png?alt=media\&token=91f5c95f-9587-47ca-805e-42cd5d937407)

* Expand the newly attached local Mongo DB database

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm6yOE4LA0VKAROaIHX%2Fimage.png?alt=media\&token=2e9937b0-c478-48b3-8565-d1a52a712992)

* Right-click the newly attached MongoDB database and select "Create Database"

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm6yYcIAfuqyEBsJADG%2Fimage.png?alt=media\&token=6b261a49-26b5-4e66-ade7-a1d9f16ce4c2)

* Name the database "lamp" in the prompt

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm6yg09-XvyaOv7IRBS%2Fimage.png?alt=media\&token=5edfe54d-2211-49dc-a6e2-0db6907c7e65)

* Enter "colors" for the collection name in the prompt

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm6ymjRJy26sYdywots%2Fimage.png?alt=media\&token=9049c300-8797-4722-a6a3-07bfd602f082)

* Open the Integrated Terminal (**Cmd/Ctrl + \`**)
* Run the application with `npm start`
* Browse to "localhost:3000"

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm6zBm2_KhcFzjTbu4v%2Fimage.png?alt=media\&token=f9cd2199-c263-469d-a2da-90d84632d5de)

* Change the color a few times and click the "Go" button
* Make sure you repeat this process a few times
* Return to VS Code and look in the Cosmos DB extension
* Expand the "lamp" database and "colors" collection
* Each document listed inside is one of the colors that was saved from the app

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm73XItEFLeKS-yKxMw%2Fimage.png?alt=media\&token=bcdb4990-896e-4b2d-90d4-b3a3e24a11a7)

* Click on one of the documents to open it in the editor

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm73dLCXImLPQnf4ukH%2Fimage.png?alt=media\&token=f2698fcf-07c6-4c0f-b51e-8b0cf969b91c)

* Change the "color" value and save the document with (**Cmd/Ctrl + S**)
* VS Code will prompt you that it's going to save this record back to the database

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm73sWF_KVCKAhS9CNb%2Fimage.png?alt=media\&token=95a118a4-042c-4bb2-9151-63188766dc00)

* Select "Upload"
* The document is saved back to Mongo DB

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm73yMq29qEaCRnrPgg%2Fimage.png?alt=media\&token=3e0f5ca7-1329-4f05-b93f-b6c4482dac3c)

* Open the Command Palette (**Cmd/Ctrl + Shift + P**)
* Select "Cosmos DB: New Mongo Scrapbook"

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm745TklkT5LOpCjaJS%2Fimage.png?alt=media\&token=1afedde9-06cd-46f8-8ea1-5f52fb81af44)

* Begin writing a new query by typing "db" and then hitting the period. Notice that VS Code has intellisense for any collections or methods available.

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm74LgBCrq2e00SB_DC%2Fimage.png?alt=media\&token=717dde5c-fe3f-4286-ad89-df7972880c1e)

* Select "colors" from the list
* Type a find query for the colors collection

```
db.colors.find()
```

* Execute the query with **Cmd/Ctrl + Shift + '**
* View the query results in split pane mode

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm74gnMmDr66FePFqpd%2Fimage.png?alt=media\&token=74394713-f00f-4e7e-b0f9-749f90de71ce)

* Change the color in the first record
* Save the document with **Cmd/Ctrl + S**
* Select "Upload" from the prompt
* The changes are persisted to Mongo DB

![](https://1151923643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm6wtOREb06-9RN3v91%2F-Lm74qTdKBN47BSS9Dz0%2Fimage.png?alt=media\&token=e7160ecc-a135-44e9-9b86-1c3da4ce9693)

{% endtab %}
{% endtabs %}