Front-End Build for React SPAs
This document explains the details of the project created when using the archetype to create a single page application (SPA) based on the React framework. I.e. when you set the
In the project directory, you can run the following commands:
This command 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 -PautoInstallPackagein the project root).
npm startin the ui.frontend directory, your app will be automatically opened in your browser (at path
http://localhost:3000/content/<appId>/<country>/<language>/home.html). If you make edits, the page will reload.
If you are getting errors related to CORS, you might want to configure AEM as follows:
- Navigate to the Configuration Manager (http://localhost:4502/system/console/configMgr)
- Open the configuration for "Adobe Granite Cross-Origin Resource Sharing Policy"
- Create a new configuration with the following additional values:
- Allowed Origins: http://localhost:3000
- Supported Headers: Authorization
- Allowed Methods: OPTIONS
This command launches the test runner in the interactive watch mode. See the React documentation about running tests for more information.
npm run build
npm run build
This command 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 React documentation about deployment for more information.
Furthermore, an AEM ClientLib is generated from the app using the aem-clientlib-generator package.
By default, this project uses Browserslist 's defaults option to identify target browsers. Additionally, it includes polyfills for modern language features to support older browsers (e.g. Internet Explorer 11). If supporting such browsers isn't a requirement, the polyfill dependencies and imports can be removed.
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.
For 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.
See the general ui.frontend module documentation for further information about how AEM ClientLibs are used by the project archetype.