From 220aca1cb39c7a0fa2c835a99542b4666e673059 Mon Sep 17 00:00:00 2001 From: Oleksandr Ufimtsev <73936497+oufimtse@users.noreply.github.com> Date: Mon, 2 Dec 2024 09:41:01 -0500 Subject: [PATCH] Minor corrections caused by internal review (#105) * Minor corrections caused by internal review * Switched to single-quotes in JS to conform with template-generated code and general code style --- .../creating-project-in-dev-console/index.md | 6 +++--- src/pages/guides/development-flow/index.md | 2 +- .../guides/preview-extension-locally/index.md | 4 ++-- .../aem-assets-view/api/commons/index.md | 10 +++++----- .../aem-assets-view/api/details-view/index.md | 2 +- .../aem-assets-view/code-generation/index.md | 12 +++++------ .../services/aem-assets-view/debug/index.md | 16 +++++++-------- .../extension-development/index.md | 20 +++++++++---------- .../code-generation/index.md | 12 +++++------ .../aem-cf-console-admin/debug/index.md | 10 +++++----- .../extension-development/index.md | 16 +++++++-------- .../aem-cf-editor/code-generation/index.md | 4 ++-- 12 files changed, 57 insertions(+), 57 deletions(-) diff --git a/src/pages/guides/creating-project-in-dev-console/index.md b/src/pages/guides/creating-project-in-dev-console/index.md index 92872e0b..654d2043 100644 --- a/src/pages/guides/creating-project-in-dev-console/index.md +++ b/src/pages/guides/creating-project-in-dev-console/index.md @@ -7,7 +7,7 @@ contributors: # Create a project in Adobe Developer Console -UI Extensions, as any App Builder application, are represented as projects in [Adobe Developer Console](https://developer.adobe.com/developer-console/docs/guides/). +UI Extensions, as with any App Builder application, are represented as projects in [Adobe Developer Console](https://developer.adobe.com/developer-console/docs/guides/). @@ -27,7 +27,7 @@ To begin, we need to create a new Project that will provide us with the necessar ![Choose your profile](create-project-3.png) -3. Make sure you are in a proper organization (a switcher in the right top corner). +3. Make sure you are in a proper organization (a switcher is in the right top corner). ![Check organization](create-project-4.png) @@ -39,7 +39,7 @@ And choose "App Builder": ![Choose "App Builder"](create-project-6.png) -5. Fill the project data. +5. Fill in the project data. ![Fill the project data](create-project-7.png) diff --git a/src/pages/guides/development-flow/index.md b/src/pages/guides/development-flow/index.md index 3c7e31ca..fcd83e35 100644 --- a/src/pages/guides/development-flow/index.md +++ b/src/pages/guides/development-flow/index.md @@ -23,7 +23,7 @@ For more details, please refer to [How to Get Access](../get-access/). ## Create a new project in Adobe Developer Console -UI Extensions, as any App Builder application, are represented as projects in [Adobe Developer Console](https://developer.adobe.com/developer-console/docs/guides/). +UI Extensions, as with any App Builder application, are represented as projects in [Adobe Developer Console](https://developer.adobe.com/developer-console/docs/guides/). Adobe Developer Console gives you access to APIs, SDKs and developer tools to integrate, and extend Adobe products. diff --git a/src/pages/guides/preview-extension-locally/index.md b/src/pages/guides/preview-extension-locally/index.md index 571dfc18..9d256d28 100644 --- a/src/pages/guides/preview-extension-locally/index.md +++ b/src/pages/guides/preview-extension-locally/index.md @@ -19,7 +19,7 @@ From the extension project directory, begin by running the following command: aio app run ``` -This will deploy the actions to Adobe I/O Runtime, while running the UI part on the local machine. +This will deploy the actions to Adobe I/O Runtime while running the UI part on the local machine. ```shell ➜ demo-extension-project % aio app run @@ -44,7 +44,7 @@ A self signed development certificate has been generated, you will need to accep Waiting for the certificate to be accepted.... timed out ``` -This message pops up because we use a development SSL certificate for secure communication. Understand more about the purpose of this certificate [here](https://letsencrypt.org/docs/certificates-for-localhost/). +This message pops up because we use a development SSL certificate for secure communication. Learn more about the purpose of this certificate [here](https://letsencrypt.org/docs/certificates-for-localhost/). If you see this message, please navigate to `https://localhost:9080`, you should see a screen similar to this. diff --git a/src/pages/services/aem-assets-view/api/commons/index.md b/src/pages/services/aem-assets-view/api/commons/index.md index a0b0e584..edc0ddd6 100644 --- a/src/pages/services/aem-assets-view/api/commons/index.md +++ b/src/pages/services/aem-assets-view/api/commons/index.md @@ -55,12 +55,12 @@ Currently, only the following **namespace** is available: More **namespaces** may be added in future releases to add more extensibility features within the Details View. ```js -import { register } from "@adobe/uix-guest"; +import { register } from '@adobe/uix-guest'; // ... const guestConnection = await register({ - id: "extension-id", + id: 'extension-id', methods: { detailSidePanel: { getPanels() { @@ -85,9 +85,9 @@ In this example, the interface page establishes a connection with the AEM Assets the AEM host URL: ```js -import { attach } from "@adobe/uix-guest"; +import { attach } from '@adobe/uix-guest'; -const guestConnection = await attach({ id: "extension-id" }); +const guestConnection = await attach({ id: 'extension-id' }); const aemHost = await guestConnection.discovery.getAemHost(); ``` @@ -162,7 +162,7 @@ This API provides methods to show toast messages in the AEM Assets View. **Example:** ```js -guestConnection.host.toast.display({ variant: "positive", message: "Asset saved successfully" }); +guestConnection.host.toast.display({ variant: 'positive', message: 'Asset saved successfully' }); ``` ### Router API diff --git a/src/pages/services/aem-assets-view/api/details-view/index.md b/src/pages/services/aem-assets-view/api/details-view/index.md index f92f5285..d8391c09 100644 --- a/src/pages/services/aem-assets-view/api/details-view/index.md +++ b/src/pages/services/aem-assets-view/api/details-view/index.md @@ -97,7 +97,7 @@ function App() { function fallbackComponent({ componentStack, error }) { return ( -

+

Extension rendering error 

{componentStack + '\n' + error.message}
diff --git a/src/pages/services/aem-assets-view/code-generation/index.md b/src/pages/services/aem-assets-view/code-generation/index.md index 8dfe8318..acc167fa 100644 --- a/src/pages/services/aem-assets-view/code-generation/index.md +++ b/src/pages/services/aem-assets-view/code-generation/index.md @@ -27,7 +27,7 @@ You may access code generation functionality during project initialization. Create a directory and run the following commands from that directory: -1. First, select the appropriate organization. +1. Select the appropriate organization. ```shell ➜ demo-extension-project % aio app init @@ -62,7 +62,7 @@ Create a directory and run the following commands from that directory: Only Templates Supported By My Org ``` -4. Select the template named `@adobe/aem-assets-details-ext-tpl` (Template for an AIO CLI App Builder plugin that generates code for a UI extension in the Asset Details section of the AEM Assets View) +4. Select the template named `@adobe/aem-assets-details-ext-tpl` (Template for an AIO CLI App Builder plugin that generates code for a UI extension in the Asset Details section of the AEM Assets View). ```shell ➜ demo-extension-project % aio app init @@ -92,12 +92,12 @@ Create a directory and run the following commands from that directory: * An App Builder project will be created with Node.js packages pre-configured. ``` -> If you are experienced user you may also simplify process of template selection by running command +> If you are experienced user you may also simplify process of template selection by running the command > ```shell aio app init --template=@adobe/aem-assets-details-ext-tpl -> At this point Asset Details extension Template for the AEM Assets View is added to yor project and ready to use +> At this point Asset Details extension Template for the AEM Assets View is added to your project and ready to use. ## Provide basic information about extension @@ -125,7 +125,7 @@ aio app init --template=@adobe/aem-assets-details-ext-tpl ### Novice, explore what is possible -> 6.1. If you are only starting with exploring UI Extensibility feel no hesitation to choose `I don't know` +> 6.1. If you are only starting with exploring UI Extensibility feel no hesitation to choose `I don't know`. > ```shell ? What would you like to do next? I don't know @@ -139,7 +139,7 @@ aio app init --template=@adobe/aem-assets-details-ext-tpl ### Seasoned developer, choose what you need -> 6.2. If you already know what you want to do start add features to you extensions by selecting items from the main part of the menu. Each part correspond to single Extension Point in AEM Assets View. +> 6.2. If you already know what you want to do, start add features to you extensions by selecting items from the main part of the menu. Each part correspond to single Extension Point in AEM Assets View. > ```shell ? What would you like to do next? Add a side panel to the Details View diff --git a/src/pages/services/aem-assets-view/debug/index.md b/src/pages/services/aem-assets-view/debug/index.md index 53d8bac3..2f69b4ea 100644 --- a/src/pages/services/aem-assets-view/debug/index.md +++ b/src/pages/services/aem-assets-view/debug/index.md @@ -6,18 +6,18 @@ contributors: --- # Troubleshooting - AEM Assets View Extensibility -The ability to get fast feedback and see if the code works as expected or not is crucial for rapid development. A developer +The ability to get fast feedback and see if the code works as expected is crucial for rapid development. A developer may connect locally running UI Extension to production AEM Assets View, link it to the correct AEM backend, and verify all changes before deployment and extension publication. -## Run local environment +## Running in local environment There are two options to run an extension locally: 1. Complete local environment isolation. In this case, both the front-end code of your extension and the serverless actions -run locally. This mode is enabled with `aio app dev` command. -2. Partial isolation using `aio app run` command, when the extension still uses Adobe I/O Runtime and deploys server-side functions in Adobe cloud. +run locally. This mode is enabled with the `aio app dev` command. +2. Partial isolation using the `aio app run` command, where the extension still uses Adobe I/O Runtime and deploys server-side functions in Adobe cloud. -For both options, the local development server with file change monitoring will be started to serve UI Extension front-end part. +For both options, the local development server with file change monitoring will be started to serve as the UI Extension front-end part. Regardless of where the server-side handlers are running, in local containers or on I/O Runtime, the developer will be able to connect a debugger to trace script execution. @@ -50,7 +50,7 @@ press CTRL+C to terminate the dev environment ➜ demo-extension-project % aio app run ``` -This will deploy the actions to [Adobe I/O Runtime](/apis/experienceplatform/runtime), while running the UI part on the local machine. +This will deploy the actions to [Adobe I/O Runtime](/apis/experienceplatform/runtime) while running the UI part on the local machine. ```shell ➜ demo-extension-project % aio app run @@ -72,7 +72,7 @@ Now your UI extension is reachable via the URL shown in the Terminal. ### UI Extension endpoint Once local runtime is started extension endpoint is returned as URL in `To view your local application`. -You will need this URL to embed locally running extension into AEM Assets View. +You will need this URL to embed the locally running extension into AEM Assets View. ### Accept the Certificate @@ -84,7 +84,7 @@ A self signed development certificate has been generated, you will need to accep Waiting for the certificate to be accepted.... timed out ``` -This message pops up because we use a development SSL certificate for secure communication. Understand more about the purpose of this certificate [here](https://letsencrypt.org/docs/certificates-for-localhost/). +This message pops up because we use a development SSL certificate for secure communication. Learn more about the purpose of this certificate [here](https://letsencrypt.org/docs/certificates-for-localhost/). If you see this message, please navigate to `https://localhost:9080`. In Google Chrome you should see a screen similar to this. diff --git a/src/pages/services/aem-assets-view/extension-development/index.md b/src/pages/services/aem-assets-view/extension-development/index.md index 8239f962..3512ae1f 100644 --- a/src/pages/services/aem-assets-view/extension-development/index.md +++ b/src/pages/services/aem-assets-view/extension-development/index.md @@ -12,20 +12,20 @@ The document helps you understand how to set up local environment and start deve ## About application This example application will use the [Details View extension point](../api/details-view). It will render -a custom icon in the side panel rail only if the selected asset has "jpeg" extension. When the user clicks on the icon, +a custom icon in the side panel rail only if the selected asset has the "jpeg" extension. When the user clicks on the icon, the extension will display a custom panel with a button. Clicking the button will display a toast message with the asset's path. More information about AEM Assets View extension points can be found at [AEM Assets View Extension Points](../api). ## Create a project in Adobe Developer Console -UI Extensions, as any App Builder application, are represented as projects in [Adobe Developer Console](https://developer.adobe.com/developer-console/docs/guides/). +UI Extensions, as with any App Builder application, are represented as projects in [Adobe Developer Console](https://developer.adobe.com/developer-console/docs/guides/). If you don't have access to the Adobe Developer Console, refer to the [How to Get Access](../get-access) guide for instructions. -To begin, we need to create a new Project which will supply us with configuration and resources. +To begin, we need to create a new Project which will supply us with the configuration and resources. 1. Sign in to [Adobe Developer Console](https://developer.adobe.com/console) with your Adobe ID. @@ -39,7 +39,7 @@ To begin, we need to create a new Project which will supply us with configuratio ![Choose your profile](../../../guides/creating-project-in-dev-console/create-project-3.png) -3. Make sure you are in a proper organization (a switcher in the right top corner). +3. Make sure you are in a proper organization (a switcher is in the right top corner). ![Check organization](../../../guides/creating-project-in-dev-console/create-project-4.png) @@ -51,7 +51,7 @@ And choose "App Builder": ![Choose "App Builder"](../../../guides/creating-project-in-dev-console/create-project-6.png) -5. Fill the project data. +5. Fill in the project data. ![Fill the project data](../../../guides/creating-project-in-dev-console/create-project-7.png) @@ -101,9 +101,9 @@ npm install -g @adobe/aio-cli More details are described in [Local environment set up](../../../guides/local-environment). -## Initialize our extension using the AIO CLI and generate a base structure from the template +## Initialize your extension using the AIO CLI and generate a base structure from the template -Firstly, we need to [sign in from CLI](https://developer.adobe.com/app-builder/docs/getting_started/first_app/#3-signing-in-from-cli) and bootstrap our project. +First, we need to [sign in from CLI](https://developer.adobe.com/app-builder/docs/getting_started/first_app/#3-signing-in-from-cli) and bootstrap our project. Please complete all the steps described in [Code Generation for the Details View Extension in AEM Assets View](../code-generation). For the purposes of this guide, we will use @@ -196,7 +196,7 @@ function App() { function fallbackComponent({ componentStack, error }) { return ( -

+

Extension rendering error 

{componentStack + '\n' + error.message}
@@ -347,7 +347,7 @@ From the extension project directory, run the following command: aio app run ``` -This will deploy the actions to Adobe I/O Runtime, while running the UI part on the local machine. +This will deploy the actions to Adobe I/O Runtime while running the UI part on the local machine. ```shell ➜ demo-extension-project % aio app run @@ -416,7 +416,7 @@ and [Deployment Overview](https://developer.adobe.com/app-builder/docs/guides/de ## Deploy on Production and create approval request -After the application has been completed, tested locally and on `Stage`, we are ready to deploy it to `Production`. +After the application has been completed, tested locally, and on `Stage`: we are ready to deploy it to `Production`. Refer to the [UI Extensions Development Flow](../../../guides/development-flow#deploy-on-production) to learn how to do this. Also in this document you can find the whole development flow of a UI Extensions. diff --git a/src/pages/services/aem-cf-console-admin/code-generation/index.md b/src/pages/services/aem-cf-console-admin/code-generation/index.md index b5737e0f..a1849237 100644 --- a/src/pages/services/aem-cf-console-admin/code-generation/index.md +++ b/src/pages/services/aem-cf-console-admin/code-generation/index.md @@ -25,7 +25,7 @@ You may access code generation functionality during project initialization. Create a directory and run the following commands from that directory: -1. First, select the appropriate organization. +1. Select the appropriate organization. ```shell ➜ demo-extension-project % aio app init @@ -60,7 +60,7 @@ Create a directory and run the following commands from that directory: Only Templates Supported By My Org ``` -4. Select the template named @adobe/aem-cf-admin-ui-ext-tpl (Extensibility template for AEM Content Fragment Admin Console) +4. Select the template named @adobe/aem-cf-admin-ui-ext-tpl (Extensibility template for AEM Content Fragment Admin Console). ```shell ➜ demo-extension-project % aio app init @@ -105,12 +105,12 @@ Create a directory and run the following commands from that directory: * An App Builder project will be created with Node.js packages pre-configured. ``` -> If you are experienced user you may also simplify process of template selection by running command +> If you are experienced user you may also simplify process of template selection by running the command > ```shell aio app init --template=@adobe/aem-cf-admin-ui-ext-tpl -> At this point AEM Content Fragment Console Extensions Template is added to yor project and ready to use +> At this point AEM Content Fragment Console Extensions Template is added to your project and ready to use. ## Provide basic information about extension @@ -139,7 +139,7 @@ aio app init --template=@adobe/aem-cf-admin-ui-ext-tpl ### Novice, explore what is possible -> 6.1. If you only starting with exploring UI Extensibility feel no hesitation to choose `I don't know` +> 6.1. If you only starting with exploring UI Extensibility feel no hesitation to choose `I don't know`. > ```shell ? What would you like to do next? I don't know @@ -156,7 +156,7 @@ aio app init --template=@adobe/aem-cf-admin-ui-ext-tpl ### Seasoned developer, choose what you need -> 6.2. If you already know what you want to do start add features to you extensions by selecting items from the main part of the menu. Each part correspond to single Extension Point in AEM Content Fragments Console. +> 6.2. If you already know what you want to do, start add features to you extensions by selecting items from the main part of the menu. Each part correspond to single Extension Point in AEM Content Fragments Console. > ```shell ? What would you like to do next? Add a custom button to Action Bar diff --git a/src/pages/services/aem-cf-console-admin/debug/index.md b/src/pages/services/aem-cf-console-admin/debug/index.md index 6e1081f5..8d6de559 100644 --- a/src/pages/services/aem-cf-console-admin/debug/index.md +++ b/src/pages/services/aem-cf-console-admin/debug/index.md @@ -6,9 +6,9 @@ contributors: --- # Debug Contents Fragment Console Extension -The ability to get fast feedback and see if the code works as expected or not is crucial for rapid development. A developer may connect locally running UI Extension to production AEM Content Fragments Console, link it to the correct AEM backend, and verify all changes before deployment and extension publication. +The ability to get fast feedback and see if the code works as expected is crucial for rapid development. A developer may connect locally running UI Extension to production AEM Content Fragments Console, link it to the correct AEM backend, and verify all changes before deployment and extension publication. -## Run local environment +## Running in local environment When the developer runs UI Extension locally and if it has server-side handlers 2 options available: 1. Complete local environment isolation. In this case, the local environment requires JVM and Docker installed and will run server-side handlers locally inside Docker containers. This mode is enabled by adding `--local` option to `run` command. 2. By default `run` command will use Adobe I/O Runtime and deploy server-side functions in Adobe cloud. @@ -69,7 +69,7 @@ This will deploy the actions to a local [OpenWhisk](https://openwhisk.apache.org ➜ demo-extension-project % aio app run ``` -This will deploy the actions to [Adobe I/O Runtime](/apis/experienceplatform/runtime), while running the UI part on the local machine. +This will deploy the actions to [Adobe I/O Runtime](/apis/experienceplatform/runtime) while running the UI part on the local machine. ```shell ➜ demo-extension-project % aio app run @@ -88,7 +88,7 @@ Now your UI extension is reachable by the displayed URL on the Terminal. ### UI Extension endpoint -Once local runtime is started extension endpoint is returned as URL in `To view your local application`. You will need this URL to embed locally running extension into AEM Content Fragments Console. +Once local runtime is started extension endpoint is returned as URL in `To view your local application`. You will need this URL to embed the locally running extension into AEM Content Fragments Console. ### Accept the Certificate If you are using this application for the first time, you will see a message similar to @@ -99,7 +99,7 @@ A self signed development certificate has been generated, you will need to accep Waiting for the certificate to be accepted.... timed out ``` -This message pops up because we use a development SSL certificate for secure communication. Understand more about the purpose of this certificate [here](https://letsencrypt.org/docs/certificates-for-localhost/). +This message pops up because we use a development SSL certificate for secure communication. Learn more about the purpose of this certificate [here](https://letsencrypt.org/docs/certificates-for-localhost/). If you see this message, please navigate to `https://localhost:9080`. In Google Chrome you should see a screen similar to this. diff --git a/src/pages/services/aem-cf-console-admin/extension-development/index.md b/src/pages/services/aem-cf-console-admin/extension-development/index.md index 18b48d59..f82bd279 100644 --- a/src/pages/services/aem-cf-console-admin/extension-development/index.md +++ b/src/pages/services/aem-cf-console-admin/extension-development/index.md @@ -28,13 +28,13 @@ More information about [AEM](https://experienceleague.adobe.com/docs/experience- ## Create a project in Adobe Developer Console -UI Extensions, as any App Builder application, are represented as projects in [Adobe Developer Console](https://developer.adobe.com/developer-console/docs/guides/). +UI Extensions, as with any App Builder application, are represented as projects in [Adobe Developer Console](https://developer.adobe.com/developer-console/docs/guides/). If you don't have access to the Adobe Developer Console, refer to the [How to Get Access](../get-access) guide for instructions. -To begin, we need to create a new Project which will supply us with configuration and resources. +To begin, we need to create a new Project which will supply us with the configuration and resources. 1. Sign in to [Adobe Developer Console](https://developer.adobe.com/console) with your Adobe ID. @@ -48,7 +48,7 @@ To begin, we need to create a new Project which will supply us with configuratio ![Choose your profile](../../../guides/creating-project-in-dev-console/create-project-3.png) -3. Make sure you are in a proper organization (a switcher in the right top corner). +3. Make sure you are in a proper organization (a switcher is in the right top corner). ![Check organization](../../../guides/creating-project-in-dev-console/create-project-4.png) @@ -60,7 +60,7 @@ And choose "App Builder": ![Choose "App Builder"](../../../guides/creating-project-in-dev-console/create-project-6.png) -5. Fill the project data. +5. Fill in the project data. ![Fill the project data](../../../guides/creating-project-in-dev-console/create-project-7.png) @@ -112,7 +112,7 @@ More details are described in [Local environment set up](../../../guides/local-e ## Initialize our application using the CLI and generate a base structure from template -Firstly, we need to [Signing in from CLI](https://developer.adobe.com/app-builder/docs/getting_started/first_app/#3-signing-in-from-cli) and bootstrap our project. +First, we need to [Signing in from CLI](https://developer.adobe.com/app-builder/docs/getting_started/first_app/#3-signing-in-from-cli) and bootstrap our project. Please complete all the steps described in [Initialize our Application using the CLI](../index.md#initialize-the-ui-extension-project-using-aio-cli). After this step, we will have a generated project structure with necessary npm dependencies are getting installed. @@ -371,7 +371,7 @@ From the extension project directory, begin by running the following command: aio app run ``` -This will deploy the actions to Adobe I/O Runtime, while running the UI part on the local machine. +This will deploy the actions to Adobe I/O Runtime while running the UI part on the local machine. ```shell ➜ demo-extension-project % aio app run @@ -404,7 +404,7 @@ A self signed development certificate has been generated, you will need to accep Waiting for the certificate to be accepted.... timed out ``` -This message pops up because we use a development SSL certificate for secure communication. Understand more about the purpose of this certificate [here](https://letsencrypt.org/docs/certificates-for-localhost/). +This message pops up because we use a development SSL certificate for secure communication. Learn more about the purpose of this certificate [here](https://letsencrypt.org/docs/certificates-for-localhost/). If you see this message, please navigate to `https://localhost:9080`, you should see a screen similar to this. @@ -466,7 +466,7 @@ and [Deployment Overview](https://developer.adobe.com/app-builder/docs/guides/de ## Deploy on Production and create approval request -After the application has been completed, tested locally and on `Stage`, we are ready to deploy it to `Production`. +After the application has been completed, tested locally, and on `Stage`: we are ready to deploy it to `Production`. Refer to the [UI Extensions Development Flow](../../../guides/development-flow#deploy-on-production) to learn how to do this. Also in this document you can find the whole development flow of a UI Extensions. diff --git a/src/pages/services/aem-cf-editor/code-generation/index.md b/src/pages/services/aem-cf-editor/code-generation/index.md index f47526f5..1cbf15c9 100644 --- a/src/pages/services/aem-cf-editor/code-generation/index.md +++ b/src/pages/services/aem-cf-editor/code-generation/index.md @@ -317,7 +317,7 @@ From the extension project directory, begin by running the following command: aio app run ``` -This will deploy the actions to Adobe I/O Runtime, while running the UI part on the local machine. +This will deploy the actions to Adobe I/O Runtime while running the UI part on the local machine. ```shell ➜ demo-extension-project % aio app run @@ -342,7 +342,7 @@ A self signed development certificate has been generated, you will need to accep Waiting for the certificate to be accepted.... timed out ``` -This message pops up because we use a development SSL certificate for secure communication. Understand more about the purpose of this certificate [here](https://letsencrypt.org/docs/certificates-for-localhost/). +This message pops up because we use a development SSL certificate for secure communication. Learn more about the purpose of this certificate [here](https://letsencrypt.org/docs/certificates-for-localhost/). If you see this message, please navigate to `https://localhost:9080`, you should see a screen similar to this.