Quick Build and Deploy

Overview

This guide describes the steps on how to deploy a built React app into DX to become a Script Application.

Note

For optimal loading of multiple Script Applications in a single page, custom Webpack bundling is needed. For more information, see Optimized Script Applications.

Ensure your system is set up properly. Please read the system pre-requisites here.

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

How To Bundle and Deploy React Applications to DX

Update the package.json project file to configure the dxclient parameters. Double-check and update the configuration values as needed. Also, add the deploy-dx-app lines as-is among the scripts. The variables in the scripts will automatically pick up the values from environment variables and config.

{
    ...
    "config": {
       "dxclient": {
           "wcmContentName": "EducSampleScriptApp01",
           "wcmSiteArea": "Script Application Library/Script Applications",
           "mainHtmlFile": "index.html",
           "contentRoot": "./build",
           "protocol": "https",
           "hostname": "localhost",
           "port": "10041"
       }
    },
    "scripts": {
        ...
        "dx-deploy-app": "dxclient deploy-scriptapplication push -dxUsername $dxUsername -dxPassword $dxPassword -wcmContentName \"$npm_package_config_dxclient_wcmContentName\" -wcmSiteArea \"$npm_package_config_dxclient_wcmSiteArea\" -mainHtmlFile $npm_package_config_dxclient_mainHtmlFile -contentRoot \"$npm_package_config_dxclient_contentRoot\" -dxProtocol $npm_package_config_dxclient_protocol -hostname $npm_package_config_dxclient_hostname -dxPort $npm_package_config_dxclient_port",
        "dx-deploy-app-win": "dxclient deploy-scriptapplication push -dxUsername %dxUsername% -dxPassword %dxPassword% -wcmContentName \"%npm_package_config_dxclient_wcmContentName%\" -wcmSiteArea \"%npm_package_config_dxclient_wcmSiteArea%\" -mainHtmlFile %npm_package_config_dxclient_mainHtmlFile% -contentRoot \"%npm_package_config_dxclient_contentRoot%\" -dxProtocol %npm_package_config_dxclient_protocol% -hostname %npm_package_config_dxclient_hostname% -dxPort %npm_package_config_dxclient_port%",
        "dx-deploy-app-use-env": "dxclient deploy-scriptapplication push -dxUsername $dxUsername -dxPassword $dxPassword -wcmContentName \"$npm_package_config_dxclient_wcmContentName\" -wcmSiteArea \"$npm_package_config_dxclient_wcmSiteArea\" -mainHtmlFile $npm_package_config_dxclient_mainHtmlFile -contentRoot \"$npm_package_config_dxclient_contentRoot\" -dxProtocol $dxProtocol -hostname $dxHostname -dxPort $dxPort",
        "dx-deploy-app-use-env-win": "dxclient deploy-scriptapplication push -dxUsername %dxUsername% -dxPassword %dxPassword% -wcmContentName \"%npm_package_config_dxclient_wcmContentName%\" -wcmSiteArea \"%npm_package_config_dxclient_wcmSiteArea%\" -mainHtmlFile %npm_package_config_dxclient_mainHtmlFile% -contentRoot \"%npm_package_config_dxclient_contentRoot%\" -dxProtocol %dxProtocol% -hostname %dxHostname% -dxPort %dxPort%"
    },
    ...
}

Update the package.json project file. Make sure the contentRoot folder specified in the dxclient config matches your app's build folder:

  "config": {
    "dxclient": {
        ...
        "contentRoot": "./build",
        ...
    }
   },

Update the package.json project file. Add the homepage line to exactly "./" to make the app load properly in DX. If there is an existing homepage value, replace it with "./". You'll encounter http 404 errors when this step is skipped.
```
  "homepage": "./",
```
Use a unique HTML DOM root id in your application to avoid overwriting other DX Script Applications during rendering.
- sample-app/public/index.html
```
  <div id="root-cf5708ac"></div>
```
- sample-app/src/index.jsx
```
  const root = ReactDOM.createRoot(document.getElementById('root-cf5708ac'));
```

Test your React App in local browser:

    cd <app-folder>
    npm install
    npm start

Build your application to generate a production-level bundle as-usual:

    cd <app-folder>
    npm install
    npm run build

Execute the npm script dx-deploy-app, pre-set with the DX admin username and password.

MacOS or LinuxWindows

dxUsername=<username> dxPassword=<password> npm run dx-deploy-app

dxUsername=<username> dxPassword=<password> npm run dx-deploy-app-win

        > sample-app@0.1.0 dx-deploy-app
        > dxclient deploy-scriptapp push -dxUsername $dxUsername -dxPassword $dxPassword -wcmContentName "$npm_package_config_dxclient_wcmContentName" -wcmSiteArea "$npm_package_config_dxclient_wcmSiteArea" -mainHtmlFile $npm_package_config_dxclient_mainHtmlFile -contentRoot "$npm_package_config_dxclient_contentRoot" -dxProtocol $npm_package_config_dxclient_protocol -hostname $npm_package_config_dxclient_hostname -dxPort $npm_package_config_dxclient_port
        2022-08-08 21:13:36 : Begin content push to Portal.
        2022-08-08 21:13:36 : WCM content ID: .
        2022-08-08 21:13:36 : WCM Content Path: .
        2022-08-08 21:13:36 : WCM Content Title: .
        2022-08-08 21:13:36 : Main HTML file: index.html.
        2022-08-08 21:13:36 : PrebuiltZip path does not exist.
        2022-08-08 21:13:36 : Archive file: 
        /var/folders/mp/bcmnxk3s0rbbj1cbbl0875bw0000gn/T/tmp--14373-oFwJoCUJU4yG-.zip
        (51965 bytes in 5 files) 
        131.d190506afae2cd09f1fd.bundle.js
        index.html
        main.269f6c0111b67c725c63.bundle.js
        main.269f6c0111b67c725c63.bundle.js.LICENSE.txt
        main.9a71fbc56a658baede15.css.
        2022-08-08 21:13:39 : Content push was successful.
        2022-08-08 21:13:39 : End content push to Portal.
        2022-08-08 21:13:39 : Body content: {"results":{"status":"success","importedFiles":{"file":[{"filename":"HTML/index.html"},{"filename":"JavaScript/main.269f6c0111b67c725c63.bundle.js"},{"filename":"JavaScript/131.d190506afae2cd09f1fd.bundle.js"},{"filename":"CSS/main.9a71fbc56a658baede15.css"}]},"skippedFiles":"","message":"The file that you selected was imported successfully.","contentId":"6fa0b659-7b18-499d-a8de-090a0e9f8987"}}.

Check the DXClient logs in store/logs/logger.log file within your workspace.
Prepare your target DX page that will host the Script Application. Follow this link.
Add the Script Application (note the wcmContentName in the package.json config) into the target DX test page. Follow this link.

HCLSoftware U learning materials

Note

Access HCLSoftware U resources for free. Log in or Sign up to get started. If you have further questions, Contact us or check the FAQ.

To learn about Script Applications, go to Script Application. You can try it out using the Script Application Lab and corresponding Script Application Lab Resources.