VS Code Can Do That - Workshop
Main
Main
  • VS Code Can Do That Workshop
  • Essential Keyboard Shortcuts
  • Exercise 1 - Customizing The Editor
    • Customizing The Editor
    • Switch themes
    • Install a new icon theme
    • Switch fonts
    • Editor tweaks
    • Change default Settings view
    • Easily identify editor instances
  • Exercise 2 - Productivity Tricks
    • Productivity Tricks
    • Essential navigation shortcuts
    • Creating HTML with Emmet
    • Styling with Emmet
    • Update image sizes
  • Exercise 3 - Navigation And Refactoring
    • Navigation And Refactoring
    • Moving, Duplicating and Deleting
    • Folding sections
    • Multiple cursors
    • Rename refactor
    • Finding things
    • Extract refactor
  • Exercise 4 - Debugging
    • Debugging
    • Simple debugging
    • Simple launch config
    • Auto attach
    • Debugging browser apps
    • Compound debug configurations
  • Exercise 5 - Docker
    • Docker
    • Dockerizing an application
    • Running and inspecting images
    • Docker compose
    • Debugging Docker containers
  • Exercise 6 - Remote Development
    • Remote Development
    • Create a remote container
    • Create a new function in the container
    • Handling extensions
  • Exercise 7 - Working With Data
    • Working with data
    • Working with MongoDB
    • Working with SQLite
    • Working with MySQL
  • Exercise 8 - Git and Source Control
    • Git and source control
    • Cloning repos with VS Code
    • Common Git workflows
    • Branching and merge conflicts
Powered by GitBook
On this page

Was this helpful?

  1. Exercise 7 - Working With Data

Working with MongoDB

PreviousWorking with dataNextWorking with SQLite

Last updated 5 years ago

Was this helpful?

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.

  • 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

  • Open the Cosmos DB extension by clicking on the Azure icon in the Activity Bar

  • Expand the "Attached Database Accounts" node

  • Select "Attach Database Account"

  • Select MongoDB from the prompt

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

  • Expand the newly attached local Mongo DB database

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

  • Name the database "lamp" in the prompt

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

  • Open the Integrated Terminal (Cmd/Ctrl + `)

  • Run the application with npm start

  • Browse to "localhost:3000"

  • 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

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

  • 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

  • Select "Upload"

  • The document is saved back to Mongo DB

  • Open the Command Palette (Cmd/Ctrl + Shift + P)

  • Select "Cosmos DB: New Mongo Scrapbook"

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

  • 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

  • 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