Modern cloud development with Contoso real estate

Article
11/15/2023

The Contoso Real Estate application contains the reference architecture and components for building enterprise-grade modern composable frontends (or micro-frontends) and cloud-native applications. It is a collection of best practices, architecture patterns, and functional components that can be used to build and deploy modern JavaScript applications to Azure.

Modern cloud development used in the Contoso Real Estate solution includes tools to enable you to develop, debug, build, deploy, and test your application.

Developer Environment

An effective and efficient development team decides on and consistently maintains a development environment.

Development Containers

The development environment must be the same for every developer on your team. That environment also needs to mirror the production environment as much as possible. Development Containers is the industry standard with community support, a specification, tools, guides and templates. The dev container should be maintained for operating system, languages, and other tools necessary for team efficiency.

Visual Studio Code provides a quick step-by-step dev container creation process to wrap around your source code, allowing you to write code instead of writing containers. If you want to develop your container, you can bring an existing container, or alter the provided dev container file.

Contoso Dev Container - devcontainer.json

IDEs

An integrated developer environment (IDE) is a software application that provides comprehensive tools and features to developers for writing, testing, and debugging code more efficiently. It's designed to streamline the development process by consolidating various aspects of software development into a single environment. In an integrated development environment IDE, when combined with a development container, allows you to quickly onboard new team members while still supporting the rest of the team. Any modifications to the IDE including settings, extensions and other integrations can be specified in the dev container so all team members have the same environment without having to rely on manual steps.

For cross-platform developer teams, use Visual Studio Code:

Environment settings for Visual Studio Code - ./vscode
Visual Studio Extensions installed in the devcontainer.json

Code quality tooling

Code quality tooling is applied during development to apply formatting and style guidelines and catch potential runtime issues by enforcing code standards. Code quality tools are unique the programming language and supported with a community to ensure support and progression. Visual Studio Code provides integration with the common code quality tools.

Contoso uses the following code quality tools:

TypeScript settings in the package tsconfig.json file.
Prettier settings in the root package.json.
ESLint in the root .eslintrc.js

Automated testing

The development environment should allow the developer to quickly write code and test the impact it has on the project without having to push the changes to the build and test pipeline. Visual Studio Code provides integration with the automated testing tools. Use PlayWright for end-to-end testing including browser and API testing.

Contoso uses:

Jest for unit tests
Playwright for end to end testing

CLIs

Command line interfaces allow developers to work quickly in their development environment and add the CLI to any automation tools for build and deploy pipelines.

Contoso uses the following CLIs:

Developer Compute

A developer's workstation can be located in the cloud or as a physical machine. Regardless of where the compute resource is, is easily integrates the components needed by a modern cloud developer.

Codespaces

Codespaces is a developer container available with your GitHub repository. Open your repository in Codespaces, either in a browser, or your local IDE. Begin working immediately, in your typical developer flow, writing, debugging, testing, and pushing PRs back to the GitHub repository. Codespaces retains any specific changes to the environment such as environment variables, dependency installs, and CLIs.

You can open the project from GitHub in a web browser, or you can open the container from a local version of Visual Studio Code. Both use the same dev container.

Cloud resources for developers

Developers need access to cloud resources while developing. Depending on the resource, the development team may choose to use a local emulator (if available), or use the same infrastructure as code files to provide developer resources.

Infrastructure as code, with tools such as Azure Dev CLI (AZD) allows you to create and tear down cloud resources quickly.

This project has a root level file, azure.yml, defining the logical services, which can be independently deployed. The resources supporting each service are defined in the infra folder.

The infra/app folder defines how the Azure services are configured and stitched together.
The infra/core folder has the Bicep files used to create each Azure service.

Azure Developer CLI (AZD) provides resource creation, for all resources or just a logical service, through the azd provision command.

Source control, continuous integration and deployment

Source control provides the ability to track changes during the development cycle. Contoso uses git to manage version control and GitHub to store source code.

Continuous integration allows for changes to source code to be verified before merging into the main branch. Contoso uses the .github/workflows file for continuous integration.

Deployment is the process of moving source code and related files to the cloud. Azure Developer CLI (AZD) provides that deployment through the azd deploy command.

Share via