Bootstrap the Remote SPA for SPA Editor

Open Remote SPA project at ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app in your IDE

Open the file .env.development

In the file, pay specific attention to the keys, and update as needed:

REACT_APP_HOST_URI=http://localhost:4502

REACT_APP_USE_PROXY=true

REACT_APP_AUTH_METHOD=basic

REACT_APP_BASIC_AUTH_USER=admin
REACT_APP_BASIC_AUTH_PASS=admin

Remember that custom environment variables in React must be prefixed with REACT_APP_.

• REACT_APP_HOST_URI: the scheme and host of the AEM service the Remote SPA connects to.

  • This value changes based on if the AEM environment (local, Dev, Stage, or Production), and the AEM Service type (Author vs. Publish)

• REACT_APP_USE_PROXY: this avoids CORS issues during development by telling the react development server to proxy AEM requests such as /content, /graphql, .model.json using http-proxy-middleware module.

• REACT_APP_AUTH_METHOD: authentication method for AEM served requests, options are ‘service-token’, ‘dev-token’, ‘basic’ or leave blank for no-auth use case

  • Required for use with AEM Author
  • Possibly required for use with AEM Publish (if content is protected)
  • Developing against the AEM SDK supports local accounts via Basic Auth. This is the method used in this tutorial.
  • When integrating with AEM as a Cloud Service, use access tokens

• REACT_APP_BASIC_AUTH_USER: the AEM username by the SPA to authenticate while retrieving AEM content.

• REACT_APP_BASIC_AUTH_PASS: the AEM password by the SPA to authenticate while retrieving AEM content.

Open the Remote SPA project in your IDE

Open the file src/index.js

Add import ModelManager and initialize it before the root.render(..) invocation,

...
import { ModelManager } from "@adobe/aem-spa-page-model-manager";

// Initialize the ModelManager before invoking root.render(..).
ModelManager.initializeAsync();

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Open the Remote SPA project in your IDE

Open the file at src/proxy/setupProxy.spa-editor.auth.basic.js

Update the file with the following code:

const { createProxyMiddleware } = require('http-proxy-middleware');
const {REACT_APP_HOST_URI, REACT_APP_BASIC_AUTH_USER, REACT_APP_BASIC_AUTH_PASS } = process.env;

/*
    Set up a proxy with AEM for local development
    In a production environment this proxy should be set up at the webserver level or absolute URLs should be used.
*/
module.exports = function(app) {

    /**
    * Filter to check if the request should be re-routed to AEM. The paths to be re-routed at:
    * - Starts with /content (AEM content)
    * - Starts with /graphql (AEM graphQL endpoint)
    * - Ends with .model.json (AEM Content Services)
    *
    * @param {*} path the path being requested of the SPA
    * @param {*} req the request object
    * @returns true if the SPA request should be re-routed to AEM
    */
    const toAEM = function(path, req) {
        return path.startsWith('/content') ||
            path.startsWith('/graphql') ||
            path.endsWith('.model.json')
    }

    /**
    * Re-writes URLs being proxied to AEM such that they can resolve to real AEM resources
    * - The "root" case of `/.model.json` are rewritten to the SPA's home page in AEM
    * - .model.json requests for /adventure:xxx routes are rewritten to their corresponding adventure page under /content/wknd-app/us/en/home/adventure/
    *
    * @param {*} path the path being requested of the SPA
    * @param {*} req the request object
    * @returns returns a re-written path, or nothing to use the @param path
    */
    const pathRewriteToAEM = function (path, req) {
        if (path === '/.model.json') {
            return '/content/wknd-app/us/en/home.model.json';
        } else if (path.startsWith('/adventure/') && path.endsWith('.model.json')) {
            return '/content/wknd-app/us/en/home/adventure/' + path.split('/').pop();
        }
    }

    /**
    * Register the proxy middleware using the toAEM filter and pathRewriteToAEM rewriter
    */
    app.use(
        createProxyMiddleware(
            toAEM, // Only route the configured requests to AEM
            {
                target: REACT_APP_HOST_URI,
                changeOrigin: true,
                // Pass in credentials when developing against an Author environment
                auth: `${REACT_APP_BASIC_AUTH_USER}:${REACT_APP_BASIC_AUTH_PASS}`,
                pathRewrite: pathRewriteToAEM // Rewrite SPA paths being sent to AEM
            }
        )
    );

    /**
    * Enable CORS on requests from the SPA to AEM
    *
    * If this rule is not in place, CORS errors will occur when running the SPA on http://localhost:3000
    */
    app.use((req, res, next) => {
        res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);
        next();
    });
};

The setupProxy.spa-editor.auth.basic.js file should look like:

This proxy configuration does two main things:

1. Proxies specific requests made to the SPA (http://localhost:3000) to AEM http://localhost:4502

   • It only proxies requests whose paths match patterns that indicate they should be served by AEM, as defined in toAEM(path, req).
   • It rewrites SPA paths to their counterpart AEM pages, as defined in pathRewriteToAEM(path, req)

2. It adds CORS headers to all requests to allow access to AEM content, as defined by res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);

   • If this is not added, CORS errors occur when loading AEM content in the SPA.

Open the file src/setupProxy.js

Review the line pointing to the setupProxy.spa-editor.auth.basic proxy configuration file:

...
case BASIC:
// Use user/pass for local development with Local Author Env
return require('./proxy/setupProxy.spa-editor.auth.basic');
...

Open the SPA project in your IDE

Open your SPA’s environment variables file src/.env.development and add a variable for the SPA’s public URI:

...
# The base URI the SPA is accessed from
REACT_APP_PUBLIC_URI=http://localhost:3000

When deploying to AEM as a Cloud Service, you need to the same for the corresponding .env files.

Open the file src/App.js

Import the SPA’s public URI from the SPA’s environment variables

const {  REACT_APP_PUBLIC_URI } = process.env;

function App() { ... }

Prefix the WKND logo <img src=.../> with REACT_APP_PUBLIC_URI to force resolution against the SPA.

<img src={REACT_APP_PUBLIC_URI + '/' +  logo} className="logo" alt="WKND Logo"/>

Do the same for loading image in src/components/Loading.js

const { REACT_APP_PUBLIC_URI } = process.env;

class Loading extends Component {

    render() {
        return (<div className="loading">
            <img src={REACT_APP_PUBLIC_URI + '/' + loadingIcon} alt="Loading..." />
        </div>);
    }
}

And for the two instances of the back button in src/components/AdventureDetails.js

const { REACT_APP_PUBLIC_URI } = process.env;

function AdventureDetail(props) {
    ...
    render() {
        <img className="Backbutton-icon" src={REACT_APP_PUBLIC_URI + '/' + backIcon} alt="Return" />
    }
}

Open the SPA project in your IDE

Download and copy the following two files into src/styles

• _grid.scss
  • The AEM Responsive Grid SCSS generator
• _grid-init.scss
  • Invokes _grid.scss using the SPA’s specific breakpoints (desktop and mobile) and columns (12).

Open src/App.scss and import ./styles/grid-init.scss

...
@import './styles/grid-init';
...

On the command line, navigate to the root of the SPA project

Start the SPA using the normal commands (if you have not already done it)

$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
$ npm install
$ npm run start

Browse the SPA on http://localhost:3000. Everything should look good!

Log in to AEM Author

Navigate to Sites > WKND App > us > en

Select the WKND App Home Page and tap Edit, and the SPA appears.

Switch to Preview using the mode switcher in the top right

Click around the SPA