Repository files navigation

This JS SDK package helps render a form based on metadata taken from the Headless Form API. In this package, there are 2 main parts:

ref:

https://docs.developers.optimizely.com/content-management-system/v1.2.0-forms/docs/get-started-with-headless-optimizely-forms

https://world.optimizely.com/blogs/linh-hoang/dates/2024/8/optimizely-headless-form-setup/

Wiki:

Setup AAD with Form Headless API

Setup Anonymous token provider with Headless Forms

Setup Form Headless API with OIDC

From Azure Artifacts

Sourcehttps://dev.azure.com/EpiserverEngineering/netCore/_artifacts/feed/HeadlessForms

To use packages from Azure Artifacts, configure your project to reference this feed. Create a new text file called .npmrc in the same directory as your package.json, then copy the snippet below.

   @episerver:registry=https://pkgs.dev.azure.com/EpiserverEngineering/netCore/_packaging/HeadlessForms/npm/registry/

Install from the command line

   $ npm install @episerver/forms-sdk@%verion%

   $ npm install @episerver/forms-react@%verion%

OR clone source code and install dependencies, then build and view the site on the browser.

This repository contains two sample sites

• Site render using Headless Form Api
  • /samples/ManagementSite Backend decouples site that hosts the Headless Form API
  • /samples/sample-react-app Frontend React site that render form using Headless Form API
• Site render using Content Graph
  • /samples/musicfestival-backend-dotnet Backend site that fully index using Content Graph
  • /samples/musicfestival-frontend-react Frontend React site that renders the full site, including the Form, using Content Graph

1. Clone repo

   git clone https://github.com/episerver/content-headless-form-js-sdk.git

cd content-headless-form-js-sdk

2. Install package dependencies and database

   npm run setup

To setup musicfestival:

• https://github.com/episerver/content-headless-form-js-sdk/tree/develop/samples/musicfestival-backend-dotnet
• https://github.com/episerver/content-headless-form-js-sdk/tree/develop/samples/musicfestival-frontend-react

3. Build all projects

   npm run build

4. Start management site

   npm run start-backend

for musicfestival sample site

   npm run start-musicfestival-backend

5. Start react site

   npm run start-frontend

for musicfestival sample site

   npm run start-musicfestival

Create a form with some elements in MainContentArea of Start page.

1. Management page

   http://localhost:8082/episerver/cms

2. React page

   http://localhost:3000/