Challenge 01 - Configure Your Development Environment

< Previous Challenge - Home - Next Challenge >

Introduction

With a copy of the project obtained, it’s time to turn your attention to setting up your development environment. The shelter’s board is keen on ensuring developers are able to contribute to the project as seamlessly as possible, avoiding tedious setup. To meet this requirement, setting up the project on a developer’s box isn’t the best option. You will want to find a cloud based solution which allows for a centrally configured development environment.

Description

You will create a development environment which meets the needs listed above. You want to be able to begin writing code without having to install any resources locally on your machine.

During the development process, you will be creating various Azure resources and configuring your GitHub repository. As a result, you’ll need to have access to the Azure CLI and GitHub CLI.

The application uses an environment variable named MONBODB_URI to connect to the MongoDB database. When creating the cloud-based development environment, you will need to add this as an encrypted secret with the value mongodb://localhost.

Once the development environment is created, you will need to test the application by running the following commands:

npm install
npm run dev

Success Criteria

• You have created and configured a cloud-based development environment with the following resources installed:
  • GitHub CLI
  • Azure CLI
  • MongoDB
• You have created an encrypted secret for MONGODB_URI
• You are able to launch and view the application in the cloud-based development environment
• All changes are merged into main
• No resources were installed on your machine

Learning Resources

• GitHub Codespaces
• Introduction to dev containers
• Setting up a Node.js project
• Adding features to a devcontainer.json file
• Forwarding ports in your codespace
• Managing encrypted secrets for your codespaces
• Developing in a codespace
• Prebuilding your codespaces

Tips

• Ctl-` will display the terminal window in Codespaces
• Cmd-Shift-P (Mac) or Ctl-Shift-P (PC) will open the command palette