Merge pull request #823 from entando/ENDOC-798

ENDOC-798 edit EPC tuto

vuepress/docs/next/tutorials/create/mfe/epc.md

@@ -4,26 +4,24 @@ sidebarDepth: 2
 
 # Create an Entando Platform Capability 
 
-An Entando Platform Capability, or EPC, is a packaged capability in the form of a bundle that adds functionality to the platform with additional UX controls. An EPC simplifies the addition of menu options, an API management page, or WCMS integration like Strapi, all from the App Builder. This tutorial demonstrates how to build a simple EPC from a React micro frontend bundle.
+An Entando Platform Capability, or EPC, is a packaged component bundle that adds functionality and UX controls to the Platform. An EPC simplifies the addition of menu options, an API management page, or WCMS integration like Strapi, all from the App Builder. This tutorial demonstrates how to build a simple EPC from a React micro frontend (MFE) bundle.
 
 ## Prerequisites
 * A working instance of Entando
 * An existing [React MFE](react.md)
 
-
 ## Create a Simple EPC
 Working with the [React MFE Tutorial](react.md), the following steps convert the React bundle into an EPC by modifying the bundle descriptor and customizing the public path to serve static assets. 
 
 ### Configure the Bundle Descriptor
-Edit the bundle descriptor `entando.json` in the root bundle directory. 
+Edit the `simple-mfe` micro frontend in the bundle descriptor `entando.json` in the root bundle directory. 
 1. Change the `type` to `app-builder`:
-```
+``` json
   "type": "app-builder" 
 ```
 2) Remove the `titles` attribute
 
-
-3) Add the fields in the code snippet below:
+3) Add the following attributes:
 
 ``` json
 "slot": "content",
@@ -37,31 +35,30 @@ Edit the bundle descriptor `entando.json` in the root bundle directory.
         "target": "internal", 
         "url": "/YOUR-MFE-NAME"
     }
-],    
+]    
 ```
-* `type`: Use `app-builder` for an EPC
+* `type`: EPCs require `app-builder` type MFE
 * `slot`: Placement of the EPC on a page
 * `paths`: The URL path to the EPC in the App Builder. An external URL can be entered 
-* `nav`: The visible label for the navigation item in the App Builder Menu
+* `nav`: The visible label for the navigation name in the App Builder Menu
+4) Save the entando.json
 
 For more details on attributes, see the [Bundle Details](../../../docs/curate/bundle-details.md#micro-frontends-specifications) page.  
 
-**Note**: To continue with the same name as the React bundle, update the version number in the bundle descriptor `entando.json`. Otherwise, change the bundle name to avoid name conflicts in your Local Hub.
-
 ### Optional: Configure the Custom Element Paths
-If you have static assets such as images or PDFs in your MFE, modify the `public-path.js` file in the `microfrontends/YOUR-MFE-NAME/src/custom-elements` directory.
-1. Retrieve the bundle ID using your information for the fields in all-caps:
+If you have static assets such as images or style sheets in your MFE, modify `microfrontends/YOUR-MFE-NAME/src/custom-elements/public-path.js`.
+1. Retrieve the bundle ID using your bundle name and Docker information:
      ``` sh
      ent ecr get-bundle-id https://registry.hub.docker.com/YOUR-DOCKER-ORGANIZATION/YOUR-BUNDLE-NAME
      ```
      `YOUR-BUNDLE-ID` will be an 8-digit string of numbers and letters.  
 
-2. Determine the bundle and widget codes. The CODE is simply the name followed by a dash and `YOUR-BUNDLE-ID`. 
-
+2. Determine the bundle and widget codes. The CODE is simply the concatenation of the bundle name, a dash, and `YOUR-BUNDLE-ID`. 
+ 
      YOUR-BUNDLE-CODE: `YOUR-BUNDLE-NAME`-`YOUR-BUNDLE-ID`  
      YOUR-WIDGET-CODE: `YOUR-WIDGET-NAME`-`YOUR-BUNDLE-ID`
 
-     e.g. With a bundle named `bundleOne`, a widget named `mfeTwo`, and bundle ID of `4986eb9c`:
+     e.g. With a bundle named `bundleOne`, a widget named `mfeTwo`, and a bundle ID of `4986eb9c`:
      YOUR-BUNDLE-CODE: `bundleOne-4986eb9c`  
      YOUR-WIDGET-CODE: `mfeTwo-4986eb9c`
 
@@ -78,7 +75,7 @@ e.g. for the example from Step 2:
 `publicpath = '/entando-de-app/cmsresources/bundles/bundleOne-4986eb9c/widgets/mfeTwo-4986eb9c/'`
 
 ### Build and Install the EPC
-1. From the root directory, [build and install](../pb/publish-project-bundle.md) the bundle:
+1. From the bundle root directory, [build and install](../pb/publish-project-bundle.md) the bundle:
    <EntandoInstallBundle/>
 
 2. Log in to your App Builder to see the new EPC:

vuepress/docs/v7.3/tutorials/create/mfe/epc.md

@@ -4,26 +4,24 @@ sidebarDepth: 2
 
 # Create an Entando Platform Capability 
 
-An Entando Platform Capability, or EPC, is a packaged capability in the form of a bundle that adds functionality to the platform with additional UX controls. An EPC simplifies the addition of menu options, an API management page, or WCMS integration like Strapi, all from the App Builder. This tutorial demonstrates how to build a simple EPC from a React micro frontend bundle.
+An Entando Platform Capability, or EPC, is a packaged component bundle that adds functionality and UX controls to the Platform. An EPC simplifies the addition of menu options, an API management page, or WCMS integration like Strapi, all from the App Builder. This tutorial demonstrates how to build a simple EPC from a React micro frontend (MFE) bundle.
 
 ## Prerequisites
 * A working instance of Entando
 * An existing [React MFE](react.md)
 
-
 ## Create a Simple EPC
 Working with the [React MFE Tutorial](react.md), the following steps convert the React bundle into an EPC by modifying the bundle descriptor and customizing the public path to serve static assets. 
 
 ### Configure the Bundle Descriptor
-Edit the bundle descriptor `entando.json` in the root bundle directory. 
+Edit the `simple-mfe` micro frontend in the bundle descriptor `entando.json` in the root bundle directory. 
 1. Change the `type` to `app-builder`:
-```
+``` json
   "type": "app-builder" 
 ```
 2) Remove the `titles` attribute
 
-
-3) Add the fields in the code snippet below:
+3) Add the following attributes:
 
 ``` json
 "slot": "content",
@@ -37,31 +35,30 @@ Edit the bundle descriptor `entando.json` in the root bundle directory.
         "target": "internal", 
         "url": "/YOUR-MFE-NAME"
     }
-],    
+]    
 ```
-* `type`: Use `app-builder` for an EPC
+* `type`: EPCs require `app-builder` type MFE
 * `slot`: Placement of the EPC on a page
 * `paths`: The URL path to the EPC in the App Builder. An external URL can be entered 
-* `nav`: The visible label for the navigation item in the App Builder Menu
+* `nav`: The visible label for the navigation name in the App Builder Menu
+4) Save the entando.json
 
 For more details on attributes, see the [Bundle Details](../../../docs/curate/bundle-details.md#micro-frontends-specifications) page.  
 
-**Note**: To continue with the same name as the React bundle, update the version number in the bundle descriptor `entando.json`. Otherwise, change the bundle name to avoid name conflicts in your Local Hub.
-
 ### Optional: Configure the Custom Element Paths
-If you have static assets such as images or PDFs in your MFE, modify the `public-path.js` file in the `microfrontends/YOUR-MFE-NAME/src/custom-elements` directory.
-1. Retrieve the bundle ID using your information for the fields in all-caps:
+If you have static assets such as images or style sheets in your MFE, modify `microfrontends/YOUR-MFE-NAME/src/custom-elements/public-path.js`.
+1. Retrieve the bundle ID using your bundle name and Docker information:
      ``` sh
      ent ecr get-bundle-id https://registry.hub.docker.com/YOUR-DOCKER-ORGANIZATION/YOUR-BUNDLE-NAME
      ```
      `YOUR-BUNDLE-ID` will be an 8-digit string of numbers and letters.  
 
-2. Determine the bundle and widget codes. The CODE is simply the name followed by a dash and `YOUR-BUNDLE-ID`. 
-
+2. Determine the bundle and widget codes. The CODE is simply the concatenation of the bundle name, a dash, and `YOUR-BUNDLE-ID`. 
+ 
      YOUR-BUNDLE-CODE: `YOUR-BUNDLE-NAME`-`YOUR-BUNDLE-ID`  
      YOUR-WIDGET-CODE: `YOUR-WIDGET-NAME`-`YOUR-BUNDLE-ID`
 
-     e.g. With a bundle named `bundleOne`, a widget named `mfeTwo`, and bundle ID of `4986eb9c`:
+     e.g. With a bundle named `bundleOne`, a widget named `mfeTwo`, and a bundle ID of `4986eb9c`:
      YOUR-BUNDLE-CODE: `bundleOne-4986eb9c`  
      YOUR-WIDGET-CODE: `mfeTwo-4986eb9c`
 
@@ -78,7 +75,7 @@ e.g. for the example from Step 2:
 `publicpath = '/entando-de-app/cmsresources/bundles/bundleOne-4986eb9c/widgets/mfeTwo-4986eb9c/'`
 
 ### Build and Install the EPC
-1. From the root directory, [build and install](../pb/publish-project-bundle.md) the bundle:
+1. From the bundle root directory, [build and install](../pb/publish-project-bundle.md) the bundle:
    <EntandoInstallBundle/>
 
 2. Log in to your App Builder to see the new EPC: