Lesson 4: React Spectrum in App Builder

To initialize an App Builder app, let’s use the init command from the CLI.

aio app init my-app --no-extensions
Copied to your clipboard
aio app init my-app --no-extensions

You’re presented with a few options what you want your app to include (serverless actions, web UI assets, CI/CD pipeline). In this lab, we're only interested in Web Assets: Deploy hosted static assets.

web-assets

Single Page Application

This will generate a Single Page Application project using React and Experience Cloud Shell utilities to integrate the SPA within the Adobe Experience Cloud. How to best leverage the Experience Shell (e.g routing etc.) will be covered in another codelab.

App Builder SPAs are following JAMstack principles "Fast and secure apps delivered by pre-rendering files and serving them directly from a Content Delivery Network".

The SPA is using client-side rendering. Server side rendering or isomorphic rendering to build views on the server at runtime is not supported.

Project Structure

The web-src folder holds the source files of the React App including:

The Adobe Experience Cloud Shell runtime object containing Identity Management System information e.g. to retrieve the user token
A pre-defined 404 error handling page
A sample React App using React Spectrum components

In package.json, you define your app name, version and all dependencies that will be bundled when deploying the SPA. The React Spectrum components used in the sample React App are listed as dependencies e.g @react-spectrum/button or @react-spectrum/layout.

The test folder includes a simple test file using the JavaScript Testing Framework Jest.

To deploy the SPA into Adobe's CDN, you'll have to specify your namespace and credentials in the .env file, namely AIO_RUNTIME_NAMESPACE and AIO_RUNTIME_AUTH.

Running and Deployment

You can run the App Builder SPA locally using the CLI command:

aio app run
Copied to your clipboard
aio app run

This will:

Bundle all static files (HTML, CSS, JS, assets etc.) using the built-in web application bundler Parcel.
Start a local development server on http://localhost:9080/.

Thanks to the Experience Shell integration, you also preview the SPA directly on the Adobe Experience Cloud by going to https://experience.adobe.com/?devMode=true#/apps/?localDevUrl=https://localhost:9080

To deploy the web assets to the CDN, use:

aio app deploy
Copied to your clipboard
aio app deploy

The CDN is provisioned on adobeio-static.net and the deployed App Builder SPA will be available at https://<namespace>.adobeio-static.net/<appname>-<appversion>/index.html.