paquijar-test-4 v2.1.4

CEDARS-SINAI

Frontend Build: React App

This project was bootstrapped with create-react-app.

This application is built to consume the AEM model of a site. It will automatically generate the layout using the helper components from the @adobe/aem-react-editable-components package.

Scripts

In the project directory, you can run the following commands:

npm run start:author | npm run start:local

Runs the app in development mode by proxying the JSON model from a local AEM instance running at http://localhost:4502. This assumes that the entire project has been deployed to AEM at least once (mvn clean install -PautoInstallPackage in the project root).

After running - npm start:author (Docker environment) or npm start:local (local environment) - in the ui.frontend directory, your app will be automatically opened in your browser (at path http://localhost:3000/content/cedars-sinai/us/en/home.html). If you make edits to Components and styling, the page will reload.

If you are getting errors related to CORS, you might want to configure AEM as follows:

1. Navigate to the Configuration Manager (http://localhost:4502/system/console/configMgr)
2. Open the configuration for "Adobe Granite Cross-Origin Resource Sharing Policy"
3. Create a new configuration with the following additional values:
   • Allowed Origins: http://localhost:3000
   • Supported Headers: Authorization
   • Allowed Methods: OPTIONS

npm run storybook

Runs Storybook (a UI Component explorer) at http://localhost:6006/. This requires that npm run prebuild-storybook in the ui.frontend directory has successfully run at least once to generate the test dependency file for Storybook.

After running npm run storybook in the ui.frontend directory, your app will be automatically opened in your browser (at path http://localhost:6006/). If you make edits to the Components, styling, or Storybook configuration files the page will reload.

npm run build-storybook

Compile and publish the Storybook static assets. This requires that npm run prebuild-storybook in the ui.frontend directory has successfully run at least once to generate the test dependency file for Storybook.

After running npm run build-storybook in the ui.frontend directory, your app will be copied to the /ui.apps/src/main/content/jcr_root/etc/designs/cedars-sinai/storybook directory. When using the mvn clean install script, these same assets will be published in AEM and accessible via the path http://localhost:4502/etc/designs/cedars-sinai/storybook/.

npm run test

Launches the test runner in the interactive watch mode. See the section about running tests for more information. The test Module has been ejected from CRA and configuration can be found at:

• ui.frontend/scripts/test.js
• ui.frontend/config/jest/

npm run build

Builds the app for production to the build folder. It bundles React in production mode and optimizes the build for the best performance. See the section about deployment for more information.

Furthermore, an AEM ClientLib is generated from the app using the aem-clientlib-generator package.

Browser Support

By default, this project uses Browserslist's defaults option to identify target browsers.

Custom Model Client

For scenarios where the react application doesn't have access to the model json payload a request to AEM has to be made to fetch it. This may require a custom model client that can provide additional capabilities over the default one provided via the aem-spa-page-model-manager such as authentication.

Code Splitting

The React app is configured to make use of code splitting by default. When building the app for production, the code will be output in several chunks:

$ ls build/static/js
2.5b77f553.chunk.js
2.5b77f553.chunk.js.map
main.cff1a559.chunk.js
main.cff1a559.chunk.js.map
runtime~main.a8a9905a.js
runtime~main.a8a9905a.js.map

Loading chunks only when they are required can improve the app performance significantly.

To get this feature to work with AEM, the app needs to be able to identify which JS and CSS files need to be requested from the HTML generated by AEM. This can be achieved using the "entrypoints" key in the asset-manifest.json file: The file is parsed in clientlib.config.js and only the entrypoint files are bundled into the ClientLib. The remaining files are placed in the ClientLib's resources directory and will be requested dynamically and therefore only loaded when they are actually needed.