Bootstrap SPA SPA de la instancia remota de Editor

SPA AEM SPA Antes de poder agregar las áreas editables al sitio remoto, debe arrancarse con el SDK de JavaScript del Editor de la y algunas otras configuraciones.

AEM SPA Instalación de dependencias npm del SDK de JS de

AEM SPA En primer lugar, revise las dependencias de npm de la de React y, a continuación, instálelas.

$ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
$ npm install @adobe/aem-spa-page-model-manager
$ npm install @adobe/aem-spa-component-mapping
$ npm install @adobe/aem-react-editable-components

SPA Revisar variables de entorno

SPA AEM Varias variables de entorno deben exponerse al entorno remoto para que sepa cómo interactuar con los usuarios de la interfaz de usuario de.

  1. SPA Abra el proyecto remoto de en ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app en su IDE

  2. Abra el archivo .env.development

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

    code language-none
    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 Variables de entorno remoto

    Recuerde que las variables de entorno personalizadas en React deben ir precedidas de REACT_APP_.

    • REACT_APP_HOST_URIAEM SPA : 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 publicación) son los que se utilizan para la creación, o si es el de producción, o el de producción, y el de tipo de servicio (de autor o de publicación).
    • REACT_APP_USE_PROXYAEM : esto evita problemas de CORS durante el desarrollo, ya que indica al servidor de desarrollo de react que realice solicitudes de conexión de proxy, como las que se muestran a continuación /content, /graphql, .model.json usando http-proxy-middleware módulo.

    • REACT_APP_AUTH_METHODAEM : método de autenticación para solicitudes atendidas, las opciones son 'service-token', 'dev-token', 'basic' o dejar en blanco para caso de uso sin autenticación

      • AEM Necesario para su uso con el autor de la
      • AEM Posiblemente sea necesario para su uso con Publicación de la (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.
      • AEM Al integrar con as a Cloud Service, utilice tokens de acceso
    • REACT_APP_BASIC_AUTH_USERAEM : la lista de nombre de usuario SPA AEM por el usuario para autenticarse durante la recuperación de contenido de la.

    • REACT_APP_BASIC_AUTH_PASSAEM : la lista de contraseña SPA AEM por el usuario para autenticarse durante la recuperación de contenido de la.

Integración de la API de ModelManager

AEM SPA AEM Con las dependencias npm disponibles para la aplicación, inicialice el proceso de ModelManager en el del proyecto index.js antes ReactDOM.render(...) se invoca a.

El ModelManager AEM es responsable de conectarse a la para recuperar contenido editable.

  1. SPA Abra el proyecto de remoto en el IDE

  2. Abra el archivo src/index.js

  3. Añadir importación ModelManager e inicialícelo antes de que root.render(..) invocación de,

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

El src/index.js el archivo debe tener un aspecto similar al siguiente:

src/index.js

SPA Configuración de un proxy interno de la

SPA Al crear un archivo editable, es mejor configurar una variable de forma que se pueda crear una lista de elementos editables. SPA proxy interno en elAEM , que está configurado para enrutar las solicitudes adecuadas a los grupos de trabajo de los que se va a realizar la solicitud de. Esto se realiza utilizando http-proxy-middleware npm, que ya está instalado por la aplicación base WKND GraphQL.

  1. SPA Abra el proyecto de remoto en el IDE

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

  3. Actualice el archivo con el siguiente código:

    code language-javascript
    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 setupProxy.spa-editor.auth.basic.js el archivo debe tener un aspecto similar al siguiente:

    src/proxy/setupProxy.spa-editor.auth.basic.js

    Esta configuración proxy hace dos cosas principales:

    1. SPA Solicitudes específicas de proxy realizadas a la aplicación de la (http://localhost:3000AEM ) a la http://localhost:4502

      • AEM Solo procesa solicitudes cuyas rutas coinciden con patrones que indican que deben ser atendidas por el usuario, tal como se define en la sección toAEM(path, req).
      • SPA AEM Vuelve a escribir rutas de acceso de la a sus homólogas, tal como se define en pathRewriteToAEM(path, req)
    2. AEM Añade 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.
  4. Abra el archivo src/setupProxy.js

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

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

Tenga en cuenta que cualquier cambio en el src/setupProxy.js SPA o sus archivos de referencia requieren un reinicio de los archivos de la.

SPA Recurso estático

SPA SPA Los recursos de la estática, como el logotipo de WKND y la carga de gráficos, deben tener actualizadas sus URL de origen para forzarlos a cargarse desde el host remoto de la. SPA SPA AEM SPA Si se deja en relativo, cuando el se carga en Editor de para la creación, estas URL usan de forma predeterminada el host de la en lugar del de la, lo que da como resultado 404 solicitudes, como se muestra en la imagen siguiente.

Recursos estáticos dañados

SPA SPA Para resolver este problema, haga que un recurso estático alojado por el usuario remoto utilice rutas absolutas que incluyan el origen de la remota.

  1. SPA Abra el proyecto de la en su IDE

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

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

    AEM Al implementar en el as a Cloud Service de la, debe hacer lo mismo para el correspondiente .env archivos.

  3. Abra el archivo src/App.js

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

    code language-javascript
    const {  REACT_APP_PUBLIC_URI } = process.env;
    
    function App() { ... }
    
  5. Prefijo del logotipo de WKND <img src=.../> con REACT_APP_PUBLIC_URI SPA para forzar la resolución contra la.

    code language-html
    <img src={REACT_APP_PUBLIC_URI + '/' +  logo} className="logo" alt="WKND Logo"/>
    
  6. Haga lo mismo para cargar la imagen en src/components/Loading.js

    code language-javascript
    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>);
        }
    }
    
  7. Y para el dos instancias del botón Atrás en src/components/AdventureDetails.js

    code language-javascript
    const { REACT_APP_PUBLIC_URI } = process.env;
    
    function AdventureDetail(props) {
        ...
        render() {
            <img className="Backbutton-icon" src={REACT_APP_PUBLIC_URI + '/' + backIcon} alt="Return" />
        }
    }
    

El App.js, Loading.js, y AdventureDetails.js los archivos deben tener este aspecto:

Recursos estáticos

AEM Cuadrícula adaptable

SPA SPA AEM SPA Para admitir el modo de diseño de Editor de la para las áreas editables, debemos integrar CSS de cuadrícula adaptable de la aplicación en la. SPA No se preocupe: este sistema de cuadrícula solo es aplicable a los contenedores editables y puede utilizar el sistema de cuadrícula que elija para controlar el diseño del resto de la.

AEM SPA Añada los archivos SCSS de cuadrícula interactiva de la.

  1. SPA Abra el proyecto de la en su IDE

  2. Descargue y copie los dos archivos siguientes en src/styles

    • _grid.scss
      • AEM Generador SCSS de cuadrícula interactiva de la
    • _grid-init.scss
      • Invoca _grid.scss SPA uso de los puntos de interrupción específicos de la (escritorio y móvil) y columnas (12).
  3. Abrir src/App.scss e importar ./styles/grid-init.scss

    code language-scss
    ...
    @import './styles/grid-init';
    ...
    

El _grid.scss y _grid-init.scss los archivos deben tener este aspecto:

AEM SCSS de cuadrícula interactiva

SPA AEM AEM Ahora la incluye el CSS necesario para admitir el modo de diseño de la para los componentes añadidos a un contenedor de elementos de un contenedor de elementos de diseño.

Clases de utilidad

Copie las siguientes clases de utilidades en el proyecto de aplicación React.

  • RoutedLink.js hasta ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/RoutedLink.js
  • EditorPlaceholder.js hasta ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/EditorPlaceholder.js
  • withConditionalPlaceholder.js hasta ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withConditionalPlaceholder.js
  • withStandardBaseCssClass.js hasta ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app/src/components/editable/core/util/withStandardBaseCssClass.js

SPA Clases de utilidad remota

SPA Iniciar la creación de la

SPA AEM SPA Ahora que la está preparada para la integración con, vamos a ejecutar la y ver qué aspecto tiene.

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

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

    code language-shell
    $ cd ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app
    $ npm install
    $ npm run start
    
  3. SPA Explorar la lista de http://localhost:3000. ¡Todo debería quedar bien!

SPA Ejecución de la en http://localhost:3000

SPA AEM SPA Abra la en el Editor de

SPA Con la en marcha http://localhost:3000AEM SPA , vamos a abrirlo con el Editor de la de datos de la aplicación. SPA SPA AEM Todavía no se puede editar nada en el, esto solo valida el en el que se ha realizado la acción.

  1. AEM Iniciar sesión en el autor de la

  2. Vaya a Sites > Aplicación WKND > us > es

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

    Página principal de la aplicación Editar WKND

  4. Cambiar a Previsualizar uso del interruptor de modo en la parte superior derecha

  5. SPA Haga clic en torno a la

    SPA Ejecución de la en http://localhost:3000

Enhorabuena.

SPA AEM SPA ¡Ha arrancado el control remoto para que sea compatible con el editor de! Ahora ya sabe cómo:

  • AEM SPA SPA Añadir las dependencias npm del SDK de JS de Editor de al proyecto de
  • SPA Configuración de las variables de entorno de la
  • SPA Integración de la API de ModelManager con el
  • SPA AEM Configure un proxy interno para la, de modo que enrute las solicitudes de contenido apropiadas para que se realicen las solicitudes de acceso a la red de distribución de contenido ()
  • SPA SPA Solucionar problemas con recursos de la estática que se resuelven en el contexto del Editor de
  • AEM AEM Agregar CSS de cuadrícula interactiva para admitir la creación de diseños en contenedores editables de la

Pasos siguientes

AEM SPA Ahora que hemos logrado una línea de base de compatibilidad con el Editor de la, podemos empezar a introducir áreas editables. Primero miramos cómo colocar un objeto componente editable fijo SPA en el menú de la.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4