ENDOC-549 Add React context params tutorial #577

nshaw · 2022-09-22T00:52:36Z

No description provided.

Lyd1aCla1r3 · 2022-09-22T01:39:27Z

vuepress/docs/next/tutorials/create/mfe/context-params.md

@@ -0,0 +1,74 @@
+# Entando MFE Context Parameters
+
+Entando MFEs can be made more powerful using one or more configuration techniques.


replace the period with a colon

Lyd1aCla1r3 · 2022-09-22T01:41:04Z

vuepress/docs/next/tutorials/create/mfe/context-params.md

+# Entando MFE Context Parameters
+
+Entando MFEs can be made more powerful using one or more configuration techniques.
+1. Provide a configuration MFE. See the [Widget configuration tutorial](./widget-configuration.md).


"Provide a configuration MFE" flows a little better

Lyd1aCla1r3 · 2022-09-22T01:42:39Z

vuepress/docs/next/tutorials/create/mfe/context-params.md

+Entando MFEs can be made more powerful using one or more configuration techniques.
+1. Provide a configuration MFE. See the [Widget configuration tutorial](./widget-configuration.md).
+2. Access context parameters from the Entando Application.
+3. Setup API Claims so MFEs are automatically connected to microservices in the same bundle or namespace.


Set up

i believe API claims uses a lowercase "c"

Lyd1aCla1r3 · 2022-09-22T01:43:42Z

vuepress/docs/next/tutorials/create/mfe/context-params.md

@@ -0,0 +1,74 @@
+# Entando MFE Context Parameters
+
+Entando MFEs can be made more powerful using one or more configuration techniques.


Would remove periods from the entries in this list (minor but matches our current formatting preference)

Lyd1aCla1r3 · 2022-09-22T01:55:27Z

vuepress/docs/next/tutorials/create/mfe/context-params.md

+This tutorial will demonstrate the second technique by making use of context parameters drawn from the Entando Application. 
+
+::: tip
+Context params are provided via the `@wp.page` and `wp.info` custom tags on the server side. `wp.info` provides values by key for the info context, and also provides system parameters where the key is `systemParam`. See the [Core Tag Library](../../../docs/reference/freemarker-tags/freemarker-core-tags.md) for more information on these tags. 


last sentence: given the link/ref name, "on these tags" is kind of redundant/repetitive

slightly more linear to reverse the order of the first sentence: "Context params are provided on the server side via the @wp.page and wp.info custom tags."

a bit awkward to begin a sentence with a backticked & lowercase term

"...context, and also provides system..." -> "...context and system..."

is there another word just as fitting as "provides" to eliminate repetition?

what does @wp.page do? odd to elaborate on one tag and not the other

Lyd1aCla1r3 · 2022-09-22T02:00:01Z

vuepress/docs/next/tutorials/create/mfe/context-params.md

+    </>
+)}
+```
+3. Provide sample data in the `simple-mfe/public/mfe-config.json` so you can test this locally.


punctuate with :

Lyd1aCla1r3 · 2022-09-22T02:00:30Z

vuepress/docs/next/tutorials/create/mfe/context-params.md

+    "systemParam_applicationBaseURL": "https://my-production-url/entando-de-app"
+}
+```
+4. Startup your MFE and you should see the values displayed.


Start up; use :

Lyd1aCla1r3 · 2022-09-22T02:01:10Z

vuepress/docs/next/tutorials/create/mfe/context-params.md

+
+## Configure and publish the bundle
+
+1. Edit the `entando.json` and add the following block to the `simple-mfe` microfrontend definition:


omit "the" in front of entando.json

micro frontend

Lyd1aCla1r3 · 2022-09-22T02:01:27Z

vuepress/docs/next/tutorials/create/mfe/context-params.md

+        "systemParam_applicationBaseURL"
+    ]
+```
+2. You can now build and install the bundle. See [the Build and Publish tutorial](../pb/publish-project-bundle.md) for more details on these steps.  


Lyd1aCla1r3 · 2022-09-22T02:02:45Z

vuepress/docs/next/tutorials/create/mfe/context-params.md

+ent bundle deploy
+ent bundle install
+```
+3. Add the widget to a page in your Entando Application to confirm the live context parameters are shown as expected. For example, if you modify a page URL to select a different language (e.g. change `YOUR-BASE-URL/entando-de-app/en/demo.page` to `YOUR-BASE-URL/entando-de-app/it/demo.page`, the current language parameter (`info_currentLang`) should change from `en` to `it`.


"are shown as" hits a little off; appear or display

missing parenthesis after e.g.

jyunmitch · 2022-09-23T20:52:32Z

vuepress/docs/next/tutorials/create/mfe/widget-configuration.md

@@ -17,12 +17,12 @@ Start by adding a configuration option to an existing MFE. If you don't already

 ### Add an Attribute to the Custom Element

-1. Replace the contents of `src/WidgetElement.js` with the following code to add attribute handling to the custom element and re-render the app when an attribute changes. This enables the Entando-provided `config` attribute of the custom element to be passed as a property to the React root component (`App`).
+1. Replace the contents of `src/custom-elements/WidgetElement.js` with the following code to add attribute handling to the custom element and re-render the app when an attribute changes. This enables the Entando-provided `config` attribute of the custom element to be passed as a property to the React root component (`App`).


This enables the Entando-provided config attribute of the custom element to be passed as a property to the React root component (App). << this sentence was always really hard to understand. Can we simplify to >> This enables the Entando-provided config attribute to be passed as a property to the React root component (App).

jyunmitch · 2022-09-23T20:57:39Z

vuepress/docs/next/tutorials/create/mfe/context-params.md

+* `systemParam_applicationBaseURL`: the full base URL of the Entando Application
+
+::: tip
+Context params are provided on the server side via the `@wp.page` and `wp.info` custom tags. Note that the `wp.info` tag retrieves values by key for the info context as well as system parameters when the key is `systemParam`. See the [Core Tag Library](../../../docs/reference/freemarker-tags/freemarker-core-tags.md) for more information. 


does this mean wp.info key retrieves values for both info context and system parameters only when the key is systemParam? complex sentence so making sure it reads correctly

Yep. Might be too much detail even for a tip but best I could come up with.

jyunmitch · 2022-09-23T21:03:31Z

vuepress/docs/next/tutorials/create/mfe/context-params.md

+1. Edit the `simple-mfe/src/App.js`. Start by mapping the `contextParams` from the `config` structure:
+```js
+const { contextParams, params} = config || {};
+```


This is the only section that gave me trouble doing the tutorial. I added this line and did not remove the other params line. I'm guessing programmers would understand what the 'config' structure hints at but just wanted to let you know.

I'm guessing you had to delete the other params line to get it to build correctly? It shouldn't have allowed the original line with this addition. I'll reword it.

jyunmitch · 2022-09-23T21:05:33Z

vuepress/docs/next/tutorials/create/mfe/context-params.md

+- [A working instance of Entando](../../../docs/getting-started/)
+- [A configurable React MFE](./widget-configuration.md)
+
+## Configure the MFE to accept and display context parameters


should the second level headers be capitalized since it shows up in the nav bar

ENDOC-549 Add React context params tutorial

fdc883c

nshaw requested review from jyunmitch and Lyd1aCla1r3 September 22, 2022 00:52

Lyd1aCla1r3 reviewed Sep 22, 2022

View reviewed changes

ENDOC-549 Refine language based on PR feedback

bc92c14

jyunmitch reviewed Sep 23, 2022

View reviewed changes

Lyd1aCla1r3 approved these changes Sep 24, 2022

View reviewed changes

ENDOC-549 Refine params and config tutorials a bit

2ee100d

jyunmitch approved these changes Sep 26, 2022

View reviewed changes

nshaw merged commit 33ed52e into main Sep 26, 2022

nshaw deleted the ENDOC-549-mfe-params branch September 26, 2022 20:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ENDOC-549 Add React context params tutorial #577

ENDOC-549 Add React context params tutorial #577

nshaw commented Sep 22, 2022

Lyd1aCla1r3 Sep 22, 2022

Lyd1aCla1r3 Sep 22, 2022

Lyd1aCla1r3 Sep 22, 2022

Lyd1aCla1r3 Sep 22, 2022

Lyd1aCla1r3 Sep 22, 2022

Lyd1aCla1r3 Sep 22, 2022

Lyd1aCla1r3 Sep 22, 2022

Lyd1aCla1r3 Sep 22, 2022

Lyd1aCla1r3 Sep 22, 2022

Lyd1aCla1r3 Sep 22, 2022

jyunmitch Sep 23, 2022

jyunmitch Sep 23, 2022

nshaw Sep 25, 2022

jyunmitch Sep 23, 2022

nshaw Sep 25, 2022 •

edited

Loading

jyunmitch Sep 23, 2022

		@@ -0,0 +1,74 @@
		# Entando MFE Context Parameters

		Entando MFEs can be made more powerful using one or more configuration techniques.


		## Configure and publish the bundle

		1. Edit the `entando.json` and add the following block to the `simple-mfe` microfrontend definition:

ENDOC-549 Add React context params tutorial #577

ENDOC-549 Add React context params tutorial #577

Conversation

nshaw commented Sep 22, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nshaw Sep 25, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nshaw Sep 25, 2022 •

edited

Loading