Merge pull request #129 from episerver/feature/AFORM-4109_create_an_e…

…xample_of_using_js_sdk_to_make_frontend

Add example of using jssdk to render form

samples/musicfestival-frontend-react-js-sdk/.env

@@ -0,0 +1,5 @@
+REACT_APP_CG_PREVIEW_URL=
+REACT_APP_CONTENT_GRAPH_GATEWAY_URL=
+
+REACT_APP_LOGIN_AUTHORITY=
+REACT_APP_LOGIN_CLIENT_ID=frontend

samples/musicfestival-frontend-react-js-sdk/README.md

@@ -0,0 +1,109 @@
+# Optimizely Content Graph - Decoupled site using ReactJs with create-react-app script
+
+This sample site demonstrates one approach to render Optimizely content in a client side framework that is using client side routing for navigation with a working On-Page Edit (OPE) mode in the Optimizely UI, where the frontend and backend are hosted as separate apps.
+
+The frontend app uses [React Js](https://reactjs.org/) to create and generate Graphql queries. Most of the techniques are framework agnostic and can be used with any other framework, such as Vue or Angular.
+
+Content is fetched from Optimizely using the Content Graph: https://docs.developers.optimizely.com/digital-experience-platform/v1.4.0-content-graph/docs  
+
+## Features demonstrated in this sample code
+
+- On page editing (OPE) feature, with OIDC integration using Optimizely OpenIDConnect server hosted in the same host as the CMS site.  
+- Search feature using ContentGraph.
+    - Full text search of contents.
+    - Filter by content type (artist or others).
+    - Pagination.
+    - Sorting.
+    - Boosting.
+
+## Prerequisites
+
+This project uses:
+* Node.js 16.8.1
+
+## Setup and Run
+
+1. Follow the README file to setup the Music Festival backend site and run the site on port 8082.  
+2. Config the Content Graph key:   
+    * ./.env
+
+3. In the backend site, configure the React site as another host on port 3000 if you have not done so.
+        ```
+            Name: MusicFestival.Backend
+            URL: http://localhost:8082
+            Start page: Root > Start
+            Host names
+                localhost:8082 - Edit
+                localhost:3000 - Primary
+        ```
+    * Run the job `Content Graph content synchronization job` to index whole contents into the Content Graph for the first time if you have not done so.  
+
+4. Open terminal for `./samples/musicfestival-frontend-react`.
+    * Run `npm install` or `yarn` (only needed in first run) to install dependencies.  
+    * Run `npm run generate:local` or `yarn generate:local` to generate typescript code from GraphQL queries.
+    * Run `npm start` or `yarn start`.
+    * Navigate to http://localhost:3000/ to browse the site as a public visitor.
+
+5. From backend site, navigate to CMS UI at http://localhost:8082/episerver/cms , login if prompted.
+6. From the frontend site, click login on the top right corner.
+7. Go back to the backend site, open a page for editing, you will see the React frontend site is displayed for editing, and you can click on properties to edit them directly on the site.  
+
+## Notes
+
+### Frontend structures
+
+* `samples/musicfestival-frontend-react/src`
+    - `...`
+    - `components/`   contains common components.
+    - `graphql/` contains queries using to retrieve contents from Content Graph. After updating queries, re-generate the code gen by command `npm run generate:local` at `samples/musicfestival-frontend-react` folder
+    - `helpers/`
+        - `contentSavedEvent.ts` function that subcribes changes from CMS
+        - `...`
+    - `models/` contains models retrieving messages from CMS
+    - `pages/` contains all pages of the site
+    - `authService.js` contains OIDC config
+    - `generated.ts` is generated file on folder `graphql/`
+    - `...`
+
+### On-Page Editing
+
+* To make a field editable, just add `data-epi-edit="FIELD_NAME"` attribute on the tag. Eg: `<h1 data-epi-edit="ArtistName">{content?.ArtistName}</h1>`
+
+### Use Content Definitions
+We can use Content Definitions JS SDK to pull / push manifest.json as usual. The changes would be synced automatically into ContentGraph.  
+Use two convenient commands (in `package.json`) to work with the SDK.  
+* Pulling manifest: `npm run content-definitions:pull`
+* Push manifest: `npm run content-definitions:push`
+
+To use more options of the SDK, please click [here](https://www.npmjs.com/package/@episerver/content-definitions).  
+
+>*Note: When running the commands, please update the folder permission if you face with Permission denied issue on folder `[RootPath]/samples/musicfestival-frontend-react/node_modules/.bin/content-definitions`*  
+
+After updating contentTypes, we need to  
+1. Wait until the contentTypes would be synced into Content Graph (By checking schema at the [address](http://localhost:8082/EPiServer/ContentGraph/GraphiQL)).  
+2. Update graphql queries (at `graphql/` folder) matching with the changes we made to content types, as neccessary.  
+3. Run `npm run generate:local` at `samples/musicfestival-frontend-react` root folder to re-generate types in file `generated.ts`.  
+4. Finally, we could update the views in `.tsx` files to match with the changes to the schema.  
+
+### More information on OPE
+Read more on on page editing feature with ContentGraph and Optimizely CMS 12 at https://docs.developers.optimizely.com/digital-experience-platform/v1.4.0-content-graph/docs/on-page-editing-using-content-graph
+
+### Usage for form headless js sdk
+For form headless, we recommend you to create your own Form element.
+The example form can be found src/Forms, only need formData from content graph API as its variable.
+To get data from content graph:
+- Update REACT_APP_CONTENT_GRAPH_GATEWAY_URL in the .env with your key
+- Make sure to include Froms in the ContentArea GraphQL query
+```
+ContentArea {
+    ContentLink {
+        Expanded {
+            ... on FormContainerBlock {
+                FormRenderTemplate
+            }
+        }
+    }
+}
+```
+- Run yarn/npm generate:local command to update the query if you are in local machine, else run generate instead
+You can take a look at src/pages/ArtistDetailsPage.tsx for the example of rendering a form with said data.

samples/musicfestival-frontend-react-js-sdk/build/asset-manifest.json

@@ -0,0 +1,18 @@
+{
+  "files": {
+    "main.css": "/static/css/main.442e95de.css",
+    "main.js": "/static/js/main.0dda90f0.js",
+    "static/js/787.985e93ed.chunk.js": "/static/js/787.985e93ed.chunk.js",
+    "static/media/pattern-wave.svg": "/static/media/pattern-wave.c29634845a154dca3fcb.svg",
+    "static/media/wave.svg": "/static/media/wave.bfe3f22a66b1e8be4db0.svg",
+    "index.html": "/index.html",
+    "static/media/back.svg": "/static/media/back.f18a85893b5c69a44d65.svg",
+    "main.442e95de.css.map": "/static/css/main.442e95de.css.map",
+    "main.0dda90f0.js.map": "/static/js/main.0dda90f0.js.map",
+    "787.985e93ed.chunk.js.map": "/static/js/787.985e93ed.chunk.js.map"
+  },
+  "entrypoints": [
+    "static/css/main.442e95de.css",
+    "static/js/main.0dda90f0.js"
+  ]
+}

samples/musicfestival-frontend-react-js-sdk/build/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.0dda90f0.js"></script><link href="/static/css/main.442e95de.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

samples/musicfestival-frontend-react-js-sdk/build/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}