We currently have a SPA written in Angular with some system components that we would like to re-use on Epi Server side.

I have some pros and cons and some doubts for each option:

Enable headless mode in Epi and re-use/extend SPA application to consume data from episerver

• PROS:
  • Reuse existing components/limits the effort
  • No need for CSS
  • Seamless experience for users
• CONS:
  • Possibly effort needed to get OPE working properly (in case editors need it)
• DOUBTS:
  • Existing SPA app would server as preview (even without OPE) but it sits on different server/URL - can preview work that way?

Bring in the required components into Epi (duplicate) and embed them in pages

• PROS
  • Easier to put together /leverage OPE
• CONS
  • some duplication of code
  • might need to adjust some services for components

Rebuild the components in the episerver instance

• PROS
  • full control over the components
  • full OPE support
• CONS
  • duplicating the effort
• new components/features might not align in Epi and rest of the system

I'm personally thinking that option 1. might be the best, because it would allow to take full advantage of the components and effort already invested. However OPE support might be challenging (but probably we can convince user to use preview instead of OPE).

My biggest concern is - can headless mode in EPI work with the actual front-end and preview being hosted from a different website/domain. Disregard license limitations - it's DXC.