diff --git a/README.md b/README.md index 80425e806..9ecb8ac5f 100644 --- a/README.md +++ b/README.md @@ -47,10 +47,7 @@ You can navigate through the documentation using the table of contents below: - [DevOps](#devops) - [Developer tools](#developer-tools) - [Development environment](#development-environment) - - [Developer Guide (Website)](#developer-guide-website) - - [1 | Preview Website](#1--preview-website) - - [2 | Deploy Website](#2--deploy-website) - - [3 | Test Website](#3--test-website) + - [AI chatbot integration](#ai-chatbot-integration) - [Usage costs](#usage-costs) - [Project structure](#project-structure) - [Deploy to Azure](#deploy-to-azure) @@ -58,7 +55,7 @@ You can navigate through the documentation using the table of contents below: - [Deploy to Azure](#deploy-to-azure-1) - [Configure CI-CD](#configure-ci-cd) - [Clean up resources](#clean-up-resources) - - [AI chatbot integration](#ai-chatbot-integration) + - [Developer guidelines](#developer-guidelines) - [Want to help?](#want-to-help) ## Architecture Diagram @@ -193,59 +190,11 @@ This project is optimized for use with [GitHub Codespaces](https://github.com/fe > _Note: The URLs above are just examples. The URLs will be different for your fork. The ports however will be the same._ -## Developer Guide (Website) - -The project has a [Developer Guide](./packages/docs/website/README.md) defined under `packages/docs` and implemented as an interactive website using the [Docusaurus](https://docusaurus.io) platform. - -### 1 | Preview Website - -- Read the [website/README](./packages/docs/website/README.md) for more details on setting up and building this package. -- Use the following instructions for a quickstart. - -```bash -$ cd packages/docs/website # Set working directory -$ npm install # Install dependencies -$ npm run start # Run dev server, launch preview -.. -[INFO] Starting the development server... -[SUCCESS] Docusaurus website is running at: http://localhost:3000/ -``` - -This should launch the browser to the landing page of the guide as shown below: - -

- Contoso Real Estate Developer Guide: Preview -

- -### 2 | Deploy Website - -This repo is not configured for automated deployment of the website to a static site hosting service. However Docusaurus provides [Deployment guidance](https://docusaurus.io/docs/deployment) that works for most options - we've validated this for [Azure Static Web Apps](https://docusaurus.io/docs/deployment#deploying-to-azure-static-web-apps) and [GitHub Pages](https://docusaurus.io/docs/deployment#deploying-to-github-pages). - -If you want a hosted version of the guide, we recommend you maintain a personal fork and set it up for automated build-deploy with GitHub Actions. Then keep up-to-date with origin, for content. - -- See [this personal fork](https://github.com/30DaysOf/contoso-real-estate) for a working example for reference -- Visit [this GitHub Pages endpoint](https://30daysof.github.io/contoso-real-estate/) to see the associated live deployment. -- Note that this example may _not always reflect the latest repo changes_ in content. - -### 3 | Test Website - -The website comes with its own Playwright testing harness with a separate configuration and a base test specification. Use it for _test-driven documentation_ to validate the existence of routes and sections, and check content for accessibility compliance. _Note - this test suite is separate from e2e testing setup for Contoso Real Estate application (located in `packages/testing`_). - -- Learn more about test setup in [website/README.TESTING.md](./packages/docs/website/README.md). -- Use the following instructions for a quickstart. - -```bash -$ cd packages/docs/website # Set working directory -$ npm install # Install dependencies -$ npm run test # Run dev server => launches browser to preview -$ npm run report # View last HTML report => open browser to specified URL -``` +## AI chatbot integration -Want to understand what the test report provides? You can explore [this cached version of the report](https://30daysof.github.io/contoso-real-estate/playwright-trace/) interactively (screenshot below) to dive into detailed traces. Note that the cached version _will not reflect the latest codebase updates_ and is meant only as an example. +The Contoso Real Estate application can be integrated with an AI support chatbot built using [Azure OpenAI](https://azure.microsoft.com/products/ai-services/openai-service). -

- Contoso Real Estate Developer Guide: Test Report -

+For more details about enabling the chatbot integration, see [this section](./docs/chatbot-integration.md). ## Usage costs @@ -314,11 +263,9 @@ When you are done, you can delete all the Azure resources created with this temp azd down ``` -## AI chatbot integration +## Developer guidelines -The Contoso Real Estate application can be integrated with an AI support chatbot built using [Azure OpenAI](https://azure.microsoft.com/products/ai-services/openai-service). - -For more details about enabling the chatbot integration, see [this section](./docs/chatbot-integration.md). +The project has a standalone [Developer Guide](./packages/docs/website/README.md) defined under `packages/docs` and implemented as an interactive website using the [Docusaurus](https://docusaurus.io) platform. To learn more about it, [go here](./packages/docs/website/developer-guidelines.md). ## Want to help? diff --git a/docs/media/block-architecture.png b/assets/diagrams/block-architecture.png similarity index 100% rename from docs/media/block-architecture.png rename to assets/diagrams/block-architecture.png diff --git a/assets/diagrams/e2e-full-horizontal.drawio.png b/assets/diagrams/e2e-full-horizontal.drawio.png index 9ee0cabfb..77f37f8f7 100644 Binary files a/assets/diagrams/e2e-full-horizontal.drawio.png and b/assets/diagrams/e2e-full-horizontal.drawio.png differ diff --git a/docs/media/contoso-world-wide.png b/assets/miscs/contoso-world-wide.png similarity index 100% rename from docs/media/contoso-world-wide.png rename to assets/miscs/contoso-world-wide.png diff --git a/assets/scenarios/scenario1.png b/assets/scenarios/scenario1.png new file mode 100644 index 000000000..5d56be84f Binary files /dev/null and b/assets/scenarios/scenario1.png differ diff --git a/assets/scenarios/scenario2.png b/assets/scenarios/scenario2.png new file mode 100644 index 000000000..fa3c2aa5b Binary files /dev/null and b/assets/scenarios/scenario2.png differ diff --git a/assets/scenarios/scenario3.png b/assets/scenarios/scenario3.png new file mode 100644 index 000000000..6fa1ad801 Binary files /dev/null and b/assets/scenarios/scenario3.png differ diff --git a/assets/scenarios/scenario4.png b/assets/scenarios/scenario4.png new file mode 100644 index 000000000..ee0505632 Binary files /dev/null and b/assets/scenarios/scenario4.png differ diff --git a/assets/scenarios/scenario5.png b/assets/scenarios/scenario5.png new file mode 100644 index 000000000..b9cc2c8d8 Binary files /dev/null and b/assets/scenarios/scenario5.png differ diff --git a/assets/scenarios/scenario6.png b/assets/scenarios/scenario6.png new file mode 100644 index 000000000..5a385c5fa Binary files /dev/null and b/assets/scenarios/scenario6.png differ diff --git a/assets/scenarios/scenario7.png b/assets/scenarios/scenario7.png new file mode 100644 index 000000000..1616511d0 Binary files /dev/null and b/assets/scenarios/scenario7.png differ diff --git a/assets/scenarios/scenario8.png b/assets/scenarios/scenario8.png new file mode 100644 index 000000000..d98583de4 Binary files /dev/null and b/assets/scenarios/scenario8.png differ diff --git a/docs/scenario-series-overview.md b/docs/README.md similarity index 62% rename from docs/scenario-series-overview.md rename to docs/README.md index c041f0694..0379b7145 100644 --- a/docs/scenario-series-overview.md +++ b/docs/README.md @@ -8,7 +8,32 @@ ms.topic: overview #Required ms.date: #Required; mm/dd/yyyy format. --- -# Contoso rentals +# Enterprise-grade Reference Architecture for JavaScript + + +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. + +[Additional details about what the Contoso Real Estate app is and what it does from a high-level – possibly has some images from the running app]. + +### Supported App Scenarios + +The following scenarios are part of the application sample + +- [AI Chatbot integration (RAG Pattern)](./chatbot-integration-scenario.md) + +- [Payments integration with Stripe](./payments-service-scenario.md) + +- Real-time Notifications + +- Portal application, a main portal entry point, featuring listings, favorites, user authentication and profile + +- [Headless CMS and blog](./blog-scenario.md) + +## Developer guidelines + +The page you're reading and other documentation in this folder, are a summary guide. The project has a standalone [Developer Guide](./packages/docs/website/README.md) defined under `packages/docs` and implemented as an interactive website using the [Docusaurus](https://docusaurus.io) platform. To learn more about it, [go here](./packages/docs/website/developer-guidelines.md). + +# Contoso Rentals Overview Contoso Corporation is a fictional but representative global manufacturing conglomerate with its headquarters in Paris. The company deployed Microsoft 365 for enterprise and addressed major design decisions and implementation details for networking, identity, Windows 10 Enterprise, Microsoft 365 Apps for enterprise, mobile device management, information protection, and security. @@ -24,7 +49,7 @@ The Contoso HR App is part of the Contoso platform and designed to serve interna ## App architecture -To support this app functionality, the Contoso engineering team decided to build the app with the following: +To support this app functionality, the Contoso engineering team used the following structure: - Web app with a custom domain - UI for blog and portal front ends @@ -38,14 +63,12 @@ To support this app functionality, the Contoso engineering team decided to build - Monitoring - Payments -![](./media/block-architecture.png) +![](../assets/diagrams/block-architecture.png) ## Azure architecture To build, deploy, manage, test, and monitor this web app, Contoso selected Azure. With the help of Azure architects, the following architecture was selected. -![](./media/architecture-complete.png) +![](../assets/diagrams/e2e-full-horizontal.drawio.png) -## Next steps -- Build the first iteration of the web app diff --git a/docs/README-scenario-3.md b/docs/blog-scenario.md similarity index 97% rename from docs/README-scenario-3.md rename to docs/blog-scenario.md index 90ec6d0f6..5dfa6588e 100644 --- a/docs/README-scenario-3.md +++ b/docs/blog-scenario.md @@ -110,3 +110,8 @@ An alternative way to run the environment is using [GitHub Codespaces](https://g _Note: GitHub Codespaces is a paid component of GitHub. Review [the GitHub Codespaces billing](https://docs.github.com/en/billing/managing-billing-for-github-codespaces/about-billing-for-github-codespaces) before using it._ To run in GitHub Codespaces, the machine will need at least 4 CPUs and 8GB of memory, which is defined in the [`devcontainer.json`](./.devcontainer/devcontainer.json) file, to ensure all the services are started. + +### Blog scenario diagram + +This scenario is represented by the following diagram +![Contoso Real Estate Blog - Scenario 1](../assets/scenarios/scenario1.png) \ No newline at end of file diff --git a/docs/chatbot-integration.md b/docs/chatbot-integration-scenario.md similarity index 96% rename from docs/chatbot-integration.md rename to docs/chatbot-integration-scenario.md index ec0606b93..a6dc7fb41 100644 --- a/docs/chatbot-integration.md +++ b/docs/chatbot-integration-scenario.md @@ -100,3 +100,8 @@ To deploy the Contoso Real Estate application with the chatbot integration enabl ``` That's it! Now you can navigate to the Portal URL and test the chatbot integration. + +### Chat integration scenario diagram + +This scenario is represented by the following diagram +![Contoso Real Estate Chat Integration - Scenario 5](../assets/scenarios/scenario5.png) diff --git a/docs/developer-guidelines.md b/docs/developer-guidelines.md new file mode 100644 index 000000000..010c2454f --- /dev/null +++ b/docs/developer-guidelines.md @@ -0,0 +1,52 @@ + +The project has a [Developer Guide](./packages/docs/website/README.md) defined under `packages/docs` and implemented as an interactive website using the [Docusaurus](https://docusaurus.io) platform. + +### 1 | Preview Website + +- Read the [website/README](./packages/docs/website/README.md) for more details on setting up and building this package. +- Use the following instructions for a quickstart. + +```bash +$ cd packages/docs/website # Set working directory +$ npm install # Install dependencies +$ npm run start # Run dev server, launch preview +.. +[INFO] Starting the development server... +[SUCCESS] Docusaurus website is running at: http://localhost:3000/ +``` + +This should launch the browser to the landing page of the guide as shown below: + +

+ Contoso Real Estate Developer Guide: Preview +

+ +### 2 | Deploy Website + +This repo is not configured for automated deployment of the website to a static site hosting service. However Docusaurus provides [Deployment guidance](https://docusaurus.io/docs/deployment) that works for most options - we've validated this for [Azure Static Web Apps](https://docusaurus.io/docs/deployment#deploying-to-azure-static-web-apps) and [GitHub Pages](https://docusaurus.io/docs/deployment#deploying-to-github-pages). + +If you want a hosted version of the guide, we recommend you maintain a personal fork and set it up for automated build-deploy with GitHub Actions. Then keep up-to-date with origin, for content. + +- See [this personal fork](https://github.com/30DaysOf/contoso-real-estate) for a working example for reference +- Visit [this GitHub Pages endpoint](https://30daysof.github.io/contoso-real-estate/) to see the associated live deployment. +- Note that this example may _not always reflect the latest repo changes_ in content. + +### 3 | Test Website + +The website comes with its own Playwright testing harness with a separate configuration and a base test specification. Use it for _test-driven documentation_ to validate the existence of routes and sections, and check content for accessibility compliance. _Note - this test suite is separate from e2e testing setup for Contoso Real Estate application (located in `packages/testing`_). + +- Learn more about test setup in [website/README.TESTING.md](./packages/docs/website/README.md). +- Use the following instructions for a quickstart. + +```bash +$ cd packages/docs/website # Set working directory +$ npm install # Install dependencies +$ npm run test # Run dev server => launches browser to preview +$ npm run report # View last HTML report => open browser to specified URL +``` + +Want to understand what the test report provides? You can explore [this cached version of the report](https://30daysof.github.io/contoso-real-estate/playwright-trace/) interactively (screenshot below) to dive into detailed traces. Note that the cached version _will not reflect the latest codebase updates_ and is meant only as an example. + +

+ Contoso Real Estate Developer Guide: Test Report +

\ No newline at end of file diff --git a/docs/media/architecture-complete.png b/docs/media/architecture-complete.png deleted file mode 100644 index deec8afd1..000000000 Binary files a/docs/media/architecture-complete.png and /dev/null differ diff --git a/docs/media/scenario-1-architecture.png b/docs/media/scenario-1-architecture.png deleted file mode 100644 index 1503586da..000000000 Binary files a/docs/media/scenario-1-architecture.png and /dev/null differ diff --git a/docs/README-scenario-4.md b/docs/payments-service-scenario.md similarity index 97% rename from docs/README-scenario-4.md rename to docs/payments-service-scenario.md index 26ea1dcaf..43362c98f 100644 --- a/docs/README-scenario-4.md +++ b/docs/payments-service-scenario.md @@ -144,3 +144,8 @@ stripe trigger checkout.session.completed ``` You should see the event being processed by your Stripe backend, and you can use it to debug your integration. + +### Payment service scenario diagram + +This scenario is represented by the following diagram +![Contoso Real Estate Payment Service - Scenario 4](../assets/scenarios/scenario4.png) \ No newline at end of file diff --git a/docs/portal-scenario.md b/docs/portal-scenario.md new file mode 100644 index 000000000..54d3feaac --- /dev/null +++ b/docs/portal-scenario.md @@ -0,0 +1,114 @@ +# Contoso Real Estate App: Portal Package + +**IMPORTANT: THIS REPOSITORY IS OPTIMIZED FOR CODESPACES AND TO WORK AS A SET OF COMPOSABLE APPS AND APIS. STANDALONE PACKAGE FUNCTIONALITY IS LIMITED AND MAY REQUIRE ADDITIONAL CONFIGURATION OR DEVELOPMENT** + +This document will guide you through the prerequisites and commands necessary to setup and preview the portal project, locally on your computer. This document will guide you through the prerequisites and commands necessary to setup and preview the portal project, locally on your computer. + +It will also instruct you how to deploy it to [Azure Static Web Apps](https://learn.microsoft.com/azure/static-web-apps/overview), to publish it to the cloud, independently, using the [Azure Static Web Apps CLI](https://azure.github.io/static-web-apps-cli/). + +## Prerequisites + +**IMPORTANT: THIS SCENARIO IS TIGHTLY COUPLED WITH SCENARIO 1. SOME PARTS OF THIS APP MAY NOT WORK AS EXPECTED IF YOU DON'T FOLLOW THE INSTRUCTIONS IN SCENARIO 1.** + +In order to start the development server for local development or locally browsing the portal site, the following technologies must be installed in your computer: + +- [Node.js LTS](https://nodejs.org) +- [Azure Core Tools](https://learn.microsoft.com/azure/azure-functions/functions-run-local) +- [Azure Static Web Apps CLI](https://azure.github.io/static-web-apps-cli/) + +### Angular CLI + +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.3. + +## Steps to start the portal + +1. fork or clone the repository locally +2. assuming you are in the folder containing `contoso-real-estate/packages/portal`, go to the terminal and run + +```bash +npm run clean:install +``` + +at the root level of the repository. This will install all dependencies for all scenarios. + +This operation will also install the [Azure Static Web Apps CLI](https://azure.github.io/static-web-apps-cli/docs/intro). This tool includes a local dev server and emulator, to test the application and the corresponding API together, locally. + +3. assuming you are now in the `contoso-real-estate`, go to the terminal and run + +```bash +npm start +``` + +Follow the [Azure Static Web Apps CLI](https://azure.github.io/static-web-apps-cli/docs/cli/swa) prompts to complete the configuration. + +Your default browser should open a new window with the application running. If you did not pass a port option, it should be running at [http://localhost:4280](http://localhost:4280) + +5. Go to `http://localhost:4280`. The application and the API should be running and functional. You should be able to see the homepage and the cards or teasers for the listings. You should be able to navigate to any of the listings detail page by clicking in any of the cards. + +## Troubleshooting the local setup + +- Q: The application server starts up but I can't see the listings +- A: Go to `http://localhost:7071/api/listings` and make sure you see a JSON printed in the browser. + +- Q: The application server starts up but I can't navigate to any of the listings detail pages +- A: Go to `http://localhost:7071/api/listings` and make sure you see a JSON printed in the browser + +- Q: The application server starts up but I can't navigate to any of the listings detail pages +- A: Make sure you are accessing the portal served by the SWA CLI `http://localhost:4280` (and not the Angular CLI). + +## Deploying to Azure with the Azure Static Web Apps CLI + +If you want to deploy to Azure using this tool, you will need an active subscription to [Azure](https://azure.microsoft.com/en-us/free/), to use any of the available regions listed [here](https://azure.github.io/static-web-apps-cli/docs/cli/env-vars) + +1. Assuming you are in the folder `contoso-real-estate/packages/portal` go to the terminal and run + +```bash +swa deploy +``` + +2. Follow prompt instructions. + +## Troubleshooting the deployment + +If the deployment fails + +- **Check** if you exceeded the maximum quota for free apps. Check the limits and quotas for the free tier [here](https://learn.microsoft.com/en-us/azure/static-web-apps/quotas) +- **Check** that your subscription id and tenant id are correctly configured under `contoso-real-estate/packages/portal/.env` for variables + +```js +AZURE_SUBSCRIPTION_ID= +AZURE_TENANT_ID= +``` + +- **Change** the region target to an alternative region, if it's unavailable or saturated - select from regions listed [here](https://azure.github.io/static-web-apps-cli/docs/cli/env-vars) + +```js +AZURE_REGION_LOCATION= +``` + +- **Check** for a configuration file called `staticwebapp.config.json`, under `contoso-real-estate/packages/portal/src/assets/`. Make sure to add the following snippet: + +```json +{ + // other config: { + // ... config + // }, + "platform": { + "apiRuntime": "node:16" + } +} +``` + +- **Run** If your deployment still fails, run + +```bash +swa deploy verbose=silly +``` + +Copy the log and open an issue in our open-source [Azure Static Web Apps CLI repository](https://github.com/Azure/static-web-apps-cli). We will love to hear from you! + +### Portal scenario diagram + +This scenario is represented by the following diagram +![Contoso Real Estate Portal - Scenario 2](../assets/scenarios/scenario2.png) + diff --git a/docs/real-time-notifications-scenario.md b/docs/real-time-notifications-scenario.md new file mode 100644 index 000000000..116e24580 --- /dev/null +++ b/docs/real-time-notifications-scenario.md @@ -0,0 +1,27 @@ +# Contoso Real Estate App: Portal Package + +**IMPORTANT: THIS REPOSITORY IS OPTIMIZED FOR CODESPACES AND TO WORK AS A SET OF COMPOSABLE APPS AND APIS. STANDALONE PACKAGE FUNCTIONALITY IS LIMITED AND MAY REQUIRE ADDITIONAL CONFIGURATION OR DEVELOPMENT** + +This document will guide you through the prerequisites and commands necessary to setup and preview the real time notifications service. + +## Prerequisites + +**IMPORTANT: THIS SCENARIO IS TIGHTLY COUPLED WITH SCENARIOS 1 and 2. SOME PARTS OF THIS APP MAY NOT WORK AS EXPECTED IF YOU DON'T FOLLOW THE INSTRUCTIONS IN SCENARIOS 1 and 2, corresponding to the Headless CMS and Blog features, and the portal app.** + + +## Steps to enable the service + +1 - Create a Web PubSub For Socket.IO resource. +Click key tab in resource portal, copy connection string. + +2 - Rename .env.example under packages/realtime/ to .env. Then fill in copied connection string to variable WebPubSubConnectionString + +3 - Copy the endpoint part in connection string (e.g. https://.webpubsub.azure.com). And use it replace the default endpoint in packages/portal/src/app/shared/realtime.service.ts:L14 +Follow original README to go on. + + +### Real-time notification service scenario diagram + +This scenario is represented by the following diagram +![Contoso Real Estate Portal - Scenario 6](../assets/scenarios/scenario6.png) + diff --git a/packages/api-v4/README.md b/packages/api-v4/README.md index 52d070048..eadbf35f4 100644 --- a/packages/api-v4/README.md +++ b/packages/api-v4/README.md @@ -6,7 +6,7 @@ This package deploys an Azure Functions API that is used by the Contoso Real Est ## Pre-requisites -**IMPORTANT: THIS SCENARIO IS TIGHTLY COUPLED WITH SCENARIO 3. SOME PARTS OF THIS FUNCTION APP MAY NOT WORK AS EXPECTED IF YOU DON'T FOLLOW THE INSTRUCTIONS IN SCENARIO 3. THIS FUNCTION APP QUERIES TWO DATABASES. THEY MAY NEED TO BE IN PLACE IN ORDER FOR THE ENDPOINTS TO WORK** +**IMPORTANT: THIS SCENARIO IS TIGHTLY COUPLED WITH SCENARIO 1. SOME PARTS OF THIS FUNCTION APP MAY NOT WORK AS EXPECTED IF YOU DON'T FOLLOW THE INSTRUCTIONS IN SCENARIO 1. THIS FUNCTION APP QUERIES TWO DATABASES. THEY MAY NEED TO BE IN PLACE IN ORDER FOR THE ENDPOINTS TO WORK** If you want to run the API independently and locally, the following technologies must be in place: diff --git a/packages/api/README.md b/packages/api/README.md index 5aadf1570..15b8ceced 100644 --- a/packages/api/README.md +++ b/packages/api/README.md @@ -6,7 +6,7 @@ This package deploys an Azure Functions API that is used by the Contoso Real Est ## Pre-requisites -**IMPORTANT: THIS SCENARIO IS TIGHTLY COUPLED WITH SCENARIO 3. SOME PARTS OF THIS FUNCTION APP MAY NOT WORK AS EXPECTED IF YOU DON'T FOLLOW THE INSTRUCTIONS IN SCENARIO 3. THIS FUNCTION APP QUERIES TWO DATABASES. THEY MAY NEED TO BE IN PLACE IN ORDER FOR THE ENDPOINTS TO WORK** +**IMPORTANT: THIS SCENARIO IS TIGHTLY COUPLED WITH SCENARIO 1. SOME PARTS OF THIS FUNCTION APP MAY NOT WORK AS EXPECTED IF YOU DON'T FOLLOW THE INSTRUCTIONS IN SCENARIO 1. THIS FUNCTION APP QUERIES TWO DATABASES. THEY MAY NEED TO BE IN PLACE IN ORDER FOR THE ENDPOINTS TO WORK** If you want to run the API independently and locally, the following technologies must be in place: diff --git a/packages/docs/website/docs/02-develop/scenario-1/0-intro.md b/packages/docs/website/docs/02-develop/scenario-1/0-intro.md index 655474822..53a34d42d 100644 --- a/packages/docs/website/docs/02-develop/scenario-1/0-intro.md +++ b/packages/docs/website/docs/02-develop/scenario-1/0-intro.md @@ -6,7 +6,7 @@ description: Kickoff implementation with Scenario 1 - Headless CMS and Blog App ## 1. Architecture -![Scenario Architecture Diagram](./../../../static/docs/png/contoso-architecture.png) +![Scenario Architecture Diagram](./../../../static/docs/png/contoso-scenario-1.png) This is the most important scenario of the application, providing data authoring and storing capabilities for both vertical micro-frontend applications, that compose it. We enable this capabilities, via the implementation of a Headless CMS, powered by Strapi. diff --git a/packages/docs/website/static/docs/png/contoso-architecture.png b/packages/docs/website/static/docs/png/contoso-architecture.png index 7150366af..77f37f8f7 100644 Binary files a/packages/docs/website/static/docs/png/contoso-architecture.png and b/packages/docs/website/static/docs/png/contoso-architecture.png differ diff --git a/packages/docs/website/static/docs/png/contoso-devtools.png b/packages/docs/website/static/docs/png/contoso-devtools.png index b026b9d6e..4818976f1 100644 Binary files a/packages/docs/website/static/docs/png/contoso-devtools.png and b/packages/docs/website/static/docs/png/contoso-devtools.png differ diff --git a/packages/docs/website/static/docs/png/contoso-scenario-1.png b/packages/docs/website/static/docs/png/contoso-scenario-1.png index fdac3cc7c..5d56be84f 100644 Binary files a/packages/docs/website/static/docs/png/contoso-scenario-1.png and b/packages/docs/website/static/docs/png/contoso-scenario-1.png differ diff --git a/packages/docs/website/static/docs/png/contoso-scenario-2.png b/packages/docs/website/static/docs/png/contoso-scenario-2.png index f154e1fc7..fa3c2aa5b 100644 Binary files a/packages/docs/website/static/docs/png/contoso-scenario-2.png and b/packages/docs/website/static/docs/png/contoso-scenario-2.png differ diff --git a/packages/docs/website/static/docs/png/contoso-scenario-3.png b/packages/docs/website/static/docs/png/contoso-scenario-3.png index f81a6dceb..6fa1ad801 100644 Binary files a/packages/docs/website/static/docs/png/contoso-scenario-3.png and b/packages/docs/website/static/docs/png/contoso-scenario-3.png differ diff --git a/packages/docs/website/static/docs/png/contoso-scenario-4.png b/packages/docs/website/static/docs/png/contoso-scenario-4.png index 273dac89f..ee0505632 100644 Binary files a/packages/docs/website/static/docs/png/contoso-scenario-4.png and b/packages/docs/website/static/docs/png/contoso-scenario-4.png differ diff --git a/packages/docs/website/static/docs/png/contoso-scenario-5.png b/packages/docs/website/static/docs/png/contoso-scenario-5.png index a1f9cf671..b9cc2c8d8 100644 Binary files a/packages/docs/website/static/docs/png/contoso-scenario-5.png and b/packages/docs/website/static/docs/png/contoso-scenario-5.png differ diff --git a/packages/docs/website/static/docs/png/contoso-scenario-6.png b/packages/docs/website/static/docs/png/contoso-scenario-6.png index 9010a3b7d..5a385c5fa 100644 Binary files a/packages/docs/website/static/docs/png/contoso-scenario-6.png and b/packages/docs/website/static/docs/png/contoso-scenario-6.png differ diff --git a/packages/docs/website/static/docs/png/contoso-scenario-7.png b/packages/docs/website/static/docs/png/contoso-scenario-7.png index e2ab66df8..1616511d0 100644 Binary files a/packages/docs/website/static/docs/png/contoso-scenario-7.png and b/packages/docs/website/static/docs/png/contoso-scenario-7.png differ diff --git a/packages/docs/website/static/docs/png/contoso-scenario-8.png b/packages/docs/website/static/docs/png/contoso-scenario-8.png index 554347763..d98583de4 100644 Binary files a/packages/docs/website/static/docs/png/contoso-scenario-8.png and b/packages/docs/website/static/docs/png/contoso-scenario-8.png differ diff --git a/packages/portal/README.md b/packages/portal/README.md index e6df0ab1c..e894267bf 100644 --- a/packages/portal/README.md +++ b/packages/portal/README.md @@ -8,7 +8,7 @@ It will also instruct you how to deploy it to [Azure Static Web Apps](https://le ## Prerequisites -**IMPORTANT: THIS SCENARIO IS TIGHTLY COUPLED WITH SCENARIO 3. SOME PARTS OF THIS APP MAY NOT WORK AS EXPECTED IF YOU DON'T FOLLOW THE INSTRUCTIONS IN SCENARIO 3.** +**IMPORTANT: THIS SCENARIO IS TIGHTLY COUPLED WITH SCENARIO 1. SOME PARTS OF THIS APP MAY NOT WORK AS EXPECTED IF YOU DON'T FOLLOW THE INSTRUCTIONS IN SCENARIO 1.** In order to start the development server for local development or locally browsing the portal site, the following technologies must be installed in your computer: