The React PWA Reference Storefront is composed of layers that work together to provide various capabilities to operate the storefront. The following diagram shows the storefront architecture:
- Presentation Layer: Provides the user interface management capabilities using a modern UI framework. The configuration files in this layer are:
index.html- The front-end html document that is populated by the React pages and components.
App.jsfile. This file also registers the PWA service worker.
- CSS - The file that consists of the custom stylesheets and static page assets for the storefront front-end presentation.
- Route/Page Layer: Routes browser requests to the subsequent pages. This layer consists of:
- Pages - The top-level pages that loads the required components for each page.
- Service worker - A service worker created using Workbox to manage caching and PWA capabilities.
- Component Layer: Provides the components to be loaded within each page. The components are created depending on the functionality of the item that the pages interact with or loads. For example, the component layer provides the login component for the home page.
- Web Server Layer: Enables the interaction between the application and the service layer.
- API Layer: The application layer of React PWA Reference Storefront is built on Cortex API. Through the Cortex API, the storefront get to use the e-commerce capabilities provided by Elastic Path Commerce. PWA interacts with the required services through this layer.
The storefront invokes Cortex APIs to ensure that the best practices of consuming hypermedia APIs are followed.
By modifying the following files, you can customize the API calls that make the REST HTTP request:
Cortex.jsfile contains the methods and classes that fetch data for the API calls made to Cortex. You can customize this file with additional headers or generic request modifications in the
cortexFetch()function for custom implementations. This file also includes
x-headersand the ability to add any additional headers.
AuthService.jscontains the authentication functions used to authenticate users with Cortex using OAuth2. The OAuth tokens are saved in the local storage of the web application. For authenticating subsequent Cortex requests, the tokens are retrieved and added into the header.
You can create zoom queries by populating an array with all required queries and appending it to the request to Cortex. When you create a zoom query, request only the additional data needed by the component using the query. Elastic Path recommends to avoid requesting unnecessary data, and circular zooms for better performance.
- The top-level root for the REST call is retrieved from Cortex. This URL consists of related links that provides URLs to the children of the root.
- After retrieving the root level, subsequent actions are performed against Cortex on the children of the root, depending on the action intended to be performed by the React Component initiating the REST request. Note: For the subsequent calls, the storefront must call only the URL that Cortex returns when you call the root. You must not create custom URL in the storefront component settings to ensure that any change in the API names do not change the URL. Use the rels in Cortex response to make subsequent calls. However, for the OAuth implementation, you might want to create a URL in the storefront.