> For the complete documentation index, see [llms.txt](https://burkeholland.gitbook.io/vs-code-can-do-that/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://burkeholland.gitbook.io/vs-code-can-do-that/exercise-7-working-with-data/working-with-mongodb.md).

# 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

![](/files/-Lm6xj0pbt83WDvy5oWq)

* Select "Attach Database Account"

![](/files/-Lm6xvKYc8gj17jsdvai)

* Select MongoDB from the prompt

![](/files/-Lm6y6_O_oxv0Ddk-rHs)

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

![](/files/-Lm6yDS8c1m619gZZzNL)

* Expand the newly attached local Mongo DB database

![](/files/-Lm6yOE4LA0VKAROaIHX)

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

![](/files/-Lm6yYcIAfuqyEBsJADG)

* Name the database "lamp" in the prompt

![](/files/-Lm6yg09-XvyaOv7IRBS)

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

![](/files/-Lm6ymjRJy26sYdywots)

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

![](/files/-Lm6zBm2_KhcFzjTbu4v)

* 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

![](/files/-Lm73XItEFLeKS-yKxMw)

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

![](/files/-Lm73dLCXImLPQnf4ukH)

* 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

![](/files/-Lm73sWF_KVCKAhS9CNb)

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

![](/files/-Lm73yMq29qEaCRnrPgg)

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

![](/files/-Lm745TklkT5LOpCjaJS)

* 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.

![](/files/-Lm74LgBCrq2e00SB_DC)

* 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

![](/files/-Lm74gnMmDr66FePFqpd)

* 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

![](/files/-Lm74qTdKBN47BSS9Dz0)

{% endtab %}
{% endtabs %}