De externe SPA voor SPA Editor Bootstrappen

Open Verre SPA project bij ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app in uw winde

Het bestand openen .env.development

Let in het bestand op de toetsen en werk de bestanden zo nodig bij:

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

herinner dat de variabelen van het douanemilieu in Reageren met REACT_APP_ moeten worden vooraf bepaald.

• REACT_APP_HOST_URI: het schema en de gastheer van de AEM dienst de Verre SPA verbindt met.

  • Deze waarde verandert op basis van het type AEM (lokaal, Ontwikkelen, Werkgebied of Productie) en AEM Service (Auteur versus Publish).

• REACT_APP_USE_PROXY: hiermee worden CORS-problemen tijdens de ontwikkeling voorkomen door de responsontwikkelingsserver te informeren over proxyverzoeken AEM zoals /content, /graphql, .model.json using http-proxy-middleware module.

• REACT_APP_AUTH_METHOD: verificatiemethode voor door AEM verzonden aanvragen, opties zijn 'service-token', 'dev-token', 'basic' of blanco laten voor gebruiksscenario zonder verificatie

  • Vereist voor gebruik met AEM auteur
  • Mogelijk vereist voor gebruik met AEM Publish (als de inhoud is beveiligd)
  • Ontwikkelen tegen de AEM SDK ondersteunt lokale accounts via Basic Auth. Dit is de methode die in deze zelfstudie wordt gebruikt.
  • Wanneer het integreren met AEM as a Cloud Service, gebruik toegangstokens

• REACT_APP_BASIC_AUTH_USER: de AEM gebruikersbenaming door de SPA voor authentiek te verklaren terwijl het terugwinnen van AEM inhoud.

• REACT_APP_BASIC_AUTH_PASS: het AEM wachtwoord door de SPA voor authentiek te verklaren terwijl het terugwinnen van AEM inhoud.

Open het Verre SPA project in uw winde

Het bestand openen src/index.js

Importeren ModelManager toevoegen en initialiseren voordat root.render(..) wordt aangeroepen,

...
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 het Verre SPA project in uw winde

Open het bestand op src/proxy/setupProxy.spa-editor.auth.basic.js

Werk het bestand bij met de volgende 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();
    });
};

Het bestand setupProxy.spa-editor.auth.basic.js moet er als volgt uitzien:

Deze proxyconfiguratie heeft twee belangrijke functies:

1. Vermeldt specifieke verzoeken aan de SPA (http://localhost:3000) aan AEM http://localhost:4502

   • Het is alleen proxy's waarvan de paden overeenkomen met patronen die aangeven dat ze moeten worden AEM, zoals gedefinieerd in toAEM(path, req) .
   • Het herschrijft SPA paden naar hun overeenkomstige AEM pagina's, zoals gedefinieerd in pathRewriteToAEM(path, req)

2. CORS-koppen worden toegevoegd aan alle aanvragen om toegang tot AEM inhoud toe te staan, zoals gedefinieerd door res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);

   • Als dit niet wordt toegevoegd, treden CORS-fouten op bij het laden van AEM inhoud in de SPA.

Het bestand openen src/setupProxy.js

Controleer de regel die naar het configuratiebestand van de proxy setupProxy.spa-editor.auth.basic verwijst:

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

Open het SPA project in uw winde

Open het bestand met SPA omgevingsvariabelen src/.env.development en voeg een variabele toe voor de SPA openbare URI:

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

wanneer het opstellen aan AEM as a Cloud Service, moet u het zelfde voor de overeenkomstige .env dossiers.

Het bestand openen src/App.js

Importeer de SPA public URI uit de SPA omgevingsvariabelen

const {  REACT_APP_PUBLIC_URI } = process.env;

function App() { ... }

Plaats het WKND-logo <img src=.../> in REACT_APP_PUBLIC_URI om de resolutie in te stellen op de SPA.

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

Doe hetzelfde voor het laden van de afbeelding 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>);
    }
}

En voor de twee instanties van de achterknoop 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 het SPA project in uw winde

De volgende twee bestanden downloaden en kopiëren naar src/styles

• _grid.scss
  • De AEM Responsieve generator van het Net SCSS
• _grid-init.scss
  • Roept _grid.scss aan gebruikend de SPA specifieke breekpunten (Desktop en mobiel) en kolommen (12).

Openen src/App.scss en importeren ./styles/grid-init.scss

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

Navigeer op de opdrachtregel naar de hoofdmap van het SPA project

Start de SPA met de normale opdrachten (als u dat nog niet hebt gedaan).

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

Blader de SPA op http://localhost:3000. Alles moet er goed uitzien!

Aanmelden bij AEM auteur

Navigeer aan Plaatsen > App WKND > gebruiken > en

Selecteer de WebND pagina van het Huis van de App en tikken uitgeven, en de SPA verschijnt.

uit

Schakelaar aan Voorproef gebruikend de wijzeschakelaar in het hoogste recht

Klik om de SPA