Bootstrap SPA SPA de la instancia remota de Editor

SPA Abrir el proyecto de Remote en ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app en su IDE

Abrir el archivo .env.development

En el archivo, preste atención específica a las claves y actualice según sea necesario:

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

SPA

Recuerde que las variables de entorno personalizadas en React deben tener el prefijo REACT_APP_.

• AEM SPA REACT_APP_HOST_URI: el esquema y el host del servicio de al que se conecta el remoto.

  • AEM AEM Este valor cambia en función de si el entorno de trabajo (local, de desarrollo, de fase o de producción) y el tipo de servicio (de autor o de Publish) son los que se utilizan para la creación de la aplicación (o de producción), y el tipo de servicio (de autor o de producción), respectivamente.

• AEM REACT_APP_USE_PROXY: esto evita los problemas de CORS durante el desarrollo, ya que indica al servidor de desarrollo de react que realice solicitudes de acceso de proxy, como /content, /graphql, .model.json, mediante el módulo http-proxy-middleware.

• AEM REACT_APP_AUTH_METHOD: método de autenticación para solicitudes atendidas por el servicio, las opciones son "service-token", "dev-token", "basic" o dejar en blanco para el caso de uso sin autenticación

  • AEM Necesario para su uso con el autor de la
  • AEM Posiblemente se requiera para su uso con Publish (si el contenido está protegido).
  • AEM El desarrollo con el SDK de admite cuentas locales a través de la autenticación básica. Este es el método que se utiliza en este tutorial.
  • Al integrarse con AEM as a Cloud Service, utilice tokens de acceso

• AEM SPA AEM REACT_APP_BASIC_AUTH_USER: el nombre de usuario de la para la autenticación al recuperar el contenido de la recuperación.

• AEM SPA AEM REACT_APP_BASIC_AUTH_PASS: la contraseña de la para la autenticación durante la recuperación de contenido de la.

SPA Abra el proyecto de remoto en el IDE

Abrir el archivo src/index.js

Agregue la importación ModelManager e inicialícela antes de la invocación de root.render(..),

...
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 />);

SPA Abra el proyecto de remoto en el IDE

Abra el archivo en src/proxy/setupProxy.spa-editor.auth.basic.js

Actualice el archivo con el siguiente código:

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();
    });
};

El archivo setupProxy.spa-editor.auth.basic.js debe tener el siguiente aspecto:

Esta configuración proxy hace dos cosas principales:

1. SPA AEM Solicitudes específicas de proxy realizadas a los clientes de la red (http://localhost:3000) para el servidor de correo electrónico de la red (http://localhost:4502) para el servidor de correo electrónico de la red de correo electrónico de la red de correo electrónico

   • AEM Solo procesa solicitudes cuyas rutas coinciden con patrones que indican que deben ser atendidas por el usuario, tal como se define en toAEM(path, req).
   • SPA AEM Vuelve a escribir rutas de acceso de los recursos de la parte contraria, tal como se define en pathRewriteToAEM(path, req).

2. AEM Agrega encabezados CORS a todas las solicitudes para permitir el acceso al contenido de la, tal como se define en res.header("Access-Control-Allow-Origin", REACT_APP_HOST_URI);

   • AEM SPA Si no se añade, se producen errores de CORS al cargar contenido de la.

Abrir el archivo src/setupProxy.js

Revise la línea que señala al archivo de configuración del proxy setupProxy.spa-editor.auth.basic:

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

SPA Abra el proyecto de la en su IDE

SPA SPA Abra el archivo de variables de entorno src/.env.development y agregue una variable para el URI público de la:

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

Al implementar en AEM as a Cloud Service, debe hacer lo mismo con los .env archivos correspondientes.

Abrir el archivo src/App.js

SPA SPA Importar el URI público de la variables de entorno

const {  REACT_APP_PUBLIC_URI } = process.env;

function App() { ... }

SPA Agregue a REACT_APP_PUBLIC_URI el prefijo del logotipo de WKND <img src=.../> para forzar la resolución contra el.

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

Haga lo mismo para cargar la imagen en 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>);
    }
}

Y para las dos instancias del botón Atrás en 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" />
    }
}

SPA Abra el proyecto de la en su IDE

Descargar y copiar los dos archivos siguientes en src/styles

• _grid.scss
  • AEM Generador SCSS de cuadrícula interactiva de la
• _grid-init.scss
  • SPA Invoca _grid.scss mediante los puntos de interrupción específicos del (escritorio y móvil) y las columnas (12).

Abrir src/App.scss e importar ./styles/grid-init.scss

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

SPA En la línea de comandos, navegue hasta la raíz del proyecto de

SPA Inicie la con los comandos normales (si aún no lo ha hecho).

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

SPA Examine la en http://localhost:3000. ¡Todo debería quedar bien!

AEM Iniciar sesión en el autor de la

Vaya a Sitios > Aplicación WKND > us > en

SPA Seleccione la página de inicio de la aplicación WKND y pulse Editar, y aparecerá el cuadro de diálogo de la aplicación.

Cambiar a vista previa mediante el conmutador de modo en la parte superior derecha

SPA Haga clic en torno a la

SPA