page_type: sample languages:
This repository 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.
[!IMPORTANT] The application code is meant to serve as a reference. Please incorporate your security governance, audits and conventions before productionizing.
The following scenarios are part of the application sample
Portal application, a main portal entry point, featuring listings, favorites, user authentication and profile
You can navigate through the documentation using the table of contents below:
flowchart TD
%%
subgraph Internet
Portal[https://portal.contoso.com]
Blog[https://blog.contoso.com]
CMS[https://cms.contoso.com]
Stripe[https://stripe.contoso.com]
API[https://api.contoso.com]
end
subgraph Azure API Management
APIM(API Gateway)
end
subgraph Azure Static Web Apps
SWA_Angular([Angular])
end
subgraph Azure Functions
Functions([Node.js])
end
subgraph Azure Container Apps
ACA_Next([Next.js])
ACA_Strapi([Strapi])
ACA_Stripe([Stripe])
end
subgraph Database/Storage
DB_PostresSQL[(PostgreSQL - Strapi)]
DB_Mongo[(MongoDB - Portal)]
Storage([Azure Blob Storage - CMS])
end
Portal --> SWA_Angular -- "portal.contoso.com/api/**" --> APIM -- "portal.contoso.com/api/**" --> Functions
Blog -- "blog.contoso.com" --> ACA_Next -. "Strapi API" .-> ACA_Strapi
CMS -- "cms.contoso.com" --> ACA_Strapi
ACA_Strapi -- "read/write" ----> DB_PostresSQL -- "read only" --> Functions
ACA_Strapi -- "upload" --> Storage
API --> APIM -- "api.contoso.com" --> Functions <-- "read/write" --> DB_Mongo
Stripe ---> APIM -- "stripe.contoso.com" --> ACA_Stripe <-. "validate payment (through APIM)" .-> Functions
%% Portal
linkStyle 0 stroke:pink
linkStyle 1 stroke:pink
linkStyle 2 stroke:pink
%% Blog
linkStyle 3 stroke:blue
linkStyle 4 stroke:blue
linkStyle 5 stroke:blue
%% CMS
linkStyle 5 stroke:red
linkStyle 6 stroke:red
linkStyle 8 stroke:red
linkStyle 7 stroke:lime
linkStyle 9 stroke:lime
linkStyle 10 stroke:lime
linkStyle 11 stroke:lime
In order use API Management, please set the boolean flag useAPIM
on the main bicep file to true. This will provision the API Management instance and configure the APIs to use it. Please note that this will incur additional costs and the provisioning process may take up to 40 minutes.
This project is optimized for use with GitHub Codespaces, a development environment hosted in the GitHub cloud. Here is how to get started:
npm install && npm start
to start the development servers.
Note: Codespaces will show a series of windows on the right side of the screen while starting all servers. This is normal and expected.Application | URL | Port |
---|---|---|
Portal | https://YOUR-REPO-4280.preview.app.github.dev:4280 | 4280 |
Blog | https://YOUR-REPO-3000.preview.app.github.dev:3000 | 3000 |
Strapi CMS | https://YOUR-REPO-1337.preview.app.github.dev:1337/admin | 1337 |
Serverless API | https://YOUR-REPO-7071.preview.app.github.dev:7071/api/ | 7071 |
Stripe API | https://YOUR-REPO-4242.preview.app.github.dev:4242 | 4242 |
Note: The URLs above are just examples. The URLs will be different for your fork. The ports however will be the same.
The Contoso Real Estate application can be integrated with an AI support chatbot built using Azure OpenAI.
For more details about enabling the chatbot integration, see this section.
Github Codespaces usage is billed either to an organization or to the user creating it. There are limits to the number of concurrent codespaces you can create or run, so here are a few things to keep in mind:
The project is using npm
workspaces. The project structure is as follows:
packages/
- contains all the packages
This project uses GitHub Codespaces as the main development environment. The following steps assume you are using GitHub Codespaces. If you are not using GitHub Codespaces, you can open the project in a Dev Container locally following the instructions here.
This project uses Azure Developer CLI (azd
) to provision infrastructure, package, and deploy the application to Azure. Running the following commands will get you started with deployment.
# Login to azd. Only required once per install.
# If the command fails, try using the --use-device-code flag
azd auth login
# Provision infrastructure and the azd development environment
azd provision
# Package the app using the environment variables in .azure/env + deploy the code on Azure
azd deploy
The
--use-device-code
is used to log in by using a device code instead of a browser, this may resolve any browser issues while logging in. For more information on when & why to use flags, check hereIf you encounter issues with the Azure Developer CLI, please open an issue here.
Important: It is mandatory to run these azd
commands in this order. Provisioning first will create the azd
development environment and outputs the .env
file with the required environment variables. Packaging will package the application using some of the environment variables from the .env
file.
Deployment region: Your deployment may fail if the region you selected is unavailable for provisioning specific resources. We recommend using westeurope
as your target region since that has been currently validated for all services.
Use the following command to configure the CI-CD pipelines:
azd pipeline config --auth-type client-credentials
When you are done, you can delete all the Azure resources created with this template by running the following command:
azd down
The project has a standalone Developer Guide defined under packages/docs
and implemented as an interactive website using the Docusaurus platform. To learn more about it, go here.
Want to file a bug, contribute some code, or improve the documentation? Excellent! Read up on our guidelines for contributing and then check out one of our issues in the list: community-help.