Chapter 2 focuses on Front End Development outside of AEM. Developers will be able to modify JS and CSS files and see the changes immediately reflected in the browser, without the need for a full development build. Popular front end tools like Webpack development server, SASS, and Styleguidist are integrated into the project.

This chapter focuses on Front End development outside of AEM. In the previous chapter every time a change was made to the React app we had to endure a lengthy build and deploy process to AEM. In this chapter we will look at two different ways of developing the React app against the development server that comes packaged with the React app. Developers will be able to modify JS and CSS files and see the changes immediately reflected in the browser without having to do a full project build, resulting in rapid development. We will also install several popular front end tools to accelerate the development process.

Install Sass Support

Persona: Front End Developer

A React best practice is to keep each component modular and self contained. A general recomendation is to avoid re-using the same CSS class name across components, which make the use of preprocessors not as powerful. This project will use Sass for a few useful features like variables and mixins. This project will also loosely follow SUIT CSS naming conventions. SUIT is a variation of BEM notation, Block Element Modifier, used to create consistent CSS rules.

Open a new terminal window.

Navigate to the <src>/aem-guides-wknd-events/react-app directory and install node-sass:

In the next sections we will start to use the above Sass variables and mixins in the application.

Proxy JSON Approach

Persona: Front End Developer

The first approach to rapid development will be to configure a proxy between the development server that is bundled with the React project and a local AEM instance. With this approach, requests to AEM content like the JSON Model and images will be made available and served as if the request(s) had originated on the static development server.

You should now see the React app on the development server running with the same content as on the AEM instance:

Uwaga:

Since AEM author instance has an authentication requirement it will be necessary to open a new tab in the browser and log in to the local AEM instance. If you see a blank screen this is most likely the case.

Fetch API cannot load http://localhost:4502/content.... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

You should see that the fonts have changed. Make some test changes to index.scss and verify that the changes are automatically compiled and displayed on the static server.

Mock JSON Approach

Persona: Front End Developer

Another approach to rapid development is to use a static or mock JSON file to develop against. This removes the dependency on a local AEM instance. It also allows the Front End developer to update the JSON in order to test functionality and mock new JSON responses without the dependency on a Back End developer.

The initial set up of the mock JSON will require a local AEM instance.

Integrate Responsive Grid

Persona: Front End Developer

AEM ships with an edit mode called Layout Mode, which when enabled allows authors to re-size components and containers to optimize content on different device widths. This feature is baked into the SPA Editing capabilities. The only action needed is to integrate AEM's Responsive Grid CSS into our project.

As part of the starter project a dedicated client library for the Responsive Grid has been included in the ui.apps project. You can view the client library at /aem-guides-wknd-events/ui.apps/src/main/content/jcr_root/apps/wknd-events/clientlibs/responsive-grid. This client library has a category of wknd-events.grid and includes a single file named grid.less which includes the necessary CSS for the Layout Mode and the responsive grid to work. Next we will make sure that this CSS is loaded with the React app.

Beneath <src>/aem-guides-wknd-events/react-app open up clientlib.config.js. Update clientlib.config.jsto make the wknd-events.grid a dependency of react app:

Add a couple of layout containers and resize them so there is a main content region and a sidebar region. You should be able to create an article that looks similar to this:

The last step is to ensure development on the static server can continue and include the responsive grid css. Beneath aem-guides-wknd-events/react-app/public folder update the index.html file to add a call to responsive-grid.css:

If you want to develop locally without AEM and the proxy you can always copy + paste the responsive grid CSS and place it as a static CSS file in the public folder beneath aem-guides-wknd-events/react-app/public.

Next Steps

(Bonus) Integrate Styleguidist

Persona: Front End Developer

A popular way to develop SPA components is to develop them in isolation. This allows a developer to track the various states a component can be in. Several tools exist to make this easy like Styleguidist and Storybook. This project will use Styleguidist as it combines a style guide and documentation into a single tool. More information on integrating Styleguidist with React can be found here.