content-and-experience-toolkit icon indicating copy to clipboard operation
content-and-experience-toolkit copied to clipboard

Enhancement Request - streamline development with third-party frameworks

Open JohnRSim opened this issue 4 years ago • 2 comments
trafficstars

image

OCEToolkit 21.1.3

Complex App based ContentForm Creation. When developing complex component contentForms for OCE using frameworks like React or Sapper or Sveltekit there are no documented development processes that I could find for creating dynamic form based apps.

I believe this would be the process of using something like sapper -

  1. Startup Sapper and OCE toolkit environment
cec develop -p 7878 -s OCEDevServer
npm run dev
  1. Develop form and export SPA build
npm run export
  1. Move built files to
$:> OCEToolkit\src\components\[componentName]\assets
  1. Test form

a: Now either run CEC cmd to run push and publish component to OCE. b: Or manually copy build through Oracle Content app and repromote component in OCE developer page. c: Or use Oracle Developer Cloud service and automate.

Minor issue is that the component path changes from /assets to /publish/assets on OCE - whereas on OCEToolkit path stays as /asset.

These are a lot off steps especially when incrementally developing and finding bugs having to update locally and push to develop. Could the toolkit be updated to support a more streamlined approach with developing components with other frameworks? - developing static components directly in /assets is quick and easy and pressing f5 to refresh to reload the changes but when working with more complex frameworks it is hard to use the toolkit.

Work around I'm using

Update OCE Toolkit

  1. Create a proxy editing /test/server.js and pointing to my local developer environment localhost:3000 This then loads local environment in an iframe into the content form to develop faster.
  2. update iframe path to match same path as publish assets in OCE - edit /test/server/componentsRouter.js
var newrenderjs = renderjs.replace('_devcs_component_contentform_edit_html_path', '/_themes/_components/' + compName + '/publish/assets/');
  1. Update local sapper project to export then publish with toolkit command to environment. ie
npm run publishToOCE

JohnRSim avatar Mar 31 '21 10:03 JohnRSim

This approach does not work in 21.2.2 will investigate and share fix for anyone looking to do the same and create app wrapped forms.

JohnRSim avatar May 04 '21 09:05 JohnRSim

Instead of updating to 21.2.2. Delete prior toolkit reinstalled follow above instructions and process should work for writing forms with React, angular, vue, sapper/sveltekit.

JohnRSim avatar May 05 '21 08:05 JohnRSim