Deploy a ReactJS App as a Script Application

Overview

What You Will Learn In This Tutorial

• Enrichment of new or existing NPM based projects to easily upload built application to HCL Digital Experience (DX).
• Optional migration of the NPM project to use Webpack bundler.

Where To Get The Sample Code

Sample codes are available in GitHub: Deploy a React App to DX as a ScriptApp.

Note

For optimal loading of multiple Script Applications in a single page, custom Webpack bundling is needed. For more information, see Deploy Multiple Script Applications with Shared Dependencies.

Pre-Requisites

Pre-Requisites

See the detailed information here.

How To Bundle and Deploy Applications to DX

Quick Build and Deploy

Follow the detailed steps here.

Quick Notes:

• Set a unique wcmContentName (i.e: EducSampleScriptApp) setting in package.json.
• Make sure the contentRoot setting in package.json matches the build or distribution folder.

Optional: How To Migrate Apps to use Webpack and Deploy as Script Application

Build and Deploy using WebPack

Follow the detailed steps here.