DocumentatieAEMTutorials voor AEMTutorials voor AEM as a Cloud Service

Instelling voor lokale ontwikkeling

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • tussenpersoon
  • Ontwikkelaar

Leer hoe u een lokale ontwikkelomgeving instelt voor het bewerken van de inhoud van een React-app met de AEM Universal Editor.

Vereisten

U hebt het volgende nodig om deze zelfstudie te volgen:

  • HTML- en JavaScript-basisvaardigheden.

  • De volgende gereedschappen moeten lokaal zijn geïnstalleerd:

  • Download en installeer het volgende:

    • SDK van AEM as a Cloud Service: Het bevat QuickStart Jar die wordt gebruikt om AEM Auteur en Publish plaatselijk voor ontwikkelingsdoeleinden in werking te stellen.
    • Universele dienst van de Redacteur: Een lokaal exemplaar van de Universele dienst van de Redacteur, heeft het een ondergroep van eigenschappen en kan van het portaal van de Distributie van de Software worden gedownload.
    • lokaal-ssl-volmacht: Een eenvoudige lokale SSL HTTP- volmacht die een zelf-ondertekend certificaat voor lokale ontwikkeling gebruikt. De AEM Universal Editor heeft de HTTPS-URL van de React-app nodig om deze in de editor te laden.

Lokale instellingen

Voer de onderstaande stappen uit om de lokale ontwikkelomgeving in te stellen:

AEM SDK

Installeer de volgende pakketten in de lokale AEM SDK om de inhoud voor de React-app van de WKND-teams op te geven.

  • de Teams van WKND - het Pakket van de Inhoud: Bevat de Modellen van het Fragment van de Inhoud, de Fragmenten van de Inhoud, en voortgeduurde vragen van GraphQL.

  • de Teams van WKND - Pakket Config: bevat het Middel dat van de Cross-Origin (CORS) deelt en de Mantelbeveiliger van de Authentificatie van Symbolische. CORS vergemakkelijkt niet-AEM Web-eigenschappen om op browser-gebaseerde cliënt-zijvraag aan AEM GraphQL APIs te maken en de Symbolische Handler van de Authentificatie wordt gebruikt om elk verzoek aan AEM voor authentiek te verklaren.

    de Teams van WKND - Pakketten

Toepassingen Reageren

Voer de onderstaande stappen uit om de React-app voor WKND-teams in te stellen:

  1. Kloon de WKND Teams Reageer appvan de basic-tutorial oplossingstak.

    code language-bash 
    $ git clone -b solution/basic-tutorial git@github.com:adobe/aem-guides-wknd-graphql.git

  2. Navigeer naar de map basic-tutorial en open deze in de code-editor.

    code language-bash 
    $ cd aem-guides-wknd-graphql/basic-tutorial
$ code .

  3. Installeer de afhankelijkheden en start de React-app.

    code language-bash 
    $ npm install
$ npm start

  4. Open de WKND Teams Reageer app in uw browser in http://localhost:3000. Het toont een lijst van teamleden en hun details. De inhoud voor de React-app wordt geleverd door de lokale AEM SDK met behulp van GraphQL API's (/graphql/execute.json/my-project/all-teams), die u kunt verifiëren met het netwerktabblad van de browser.

    WKND Teams - Reageer app

Universal Editor-service

Aan opstelling de lokale Universele dienst van de Redacteur, volg de stappen hieronder:

  1. Download de recentste versie van de Universele dienst van de Redacteur van het Portaal van de Distributie van de Software.

    Distributie van de Software - de Universele Dienst van de Redacteur

  2. Pak het gedownloade ZIP-bestand uit en kopieer het universal-editor-service.cjs -bestand naar de nieuwe map universal-editor-service .

    code language-bash 
    $ unzip universal-editor-service-vproduction-<version>.zip
$ mkdir universal-editor-service
$ cp universal-editor-service.cjs universal-editor-service

  3. Maak een .env -bestand in de map universal-editor-service en voeg de volgende omgevingsvariabelen toe:

    code language-bash 
    # The port on which the Universal Editor service runs
EXPRESS_PORT=8000
# Disable SSL verification
NODE_TLS_REJECT_UNAUTHORIZED=0

  4. Start de lokale Universal Editor-service.

    code language-bash 
    $ cd universal-editor-service
$ node universal-editor-service.cjs

Met de bovenstaande opdracht start u de Universal Editor-service op poort 8000 en ziet u de volgende uitvoer:

Either no private key or certificate was set. Starting as HTTP server
Universal Editor Service listening on port 8000 as HTTP Server

Lokale SSL HTTP-proxy

De AEM Universal Editor vereist dat de React-app via HTTPS wordt aangeboden. Stel een lokale SSL HTTP-proxy in die een zelfondertekend certificaat gebruikt voor lokale ontwikkeling.

Voer de onderstaande stappen uit om de lokale SSL HTTP-proxy in te stellen en de AEM SDK en Universal Editor-service via HTTPS te bedienen:

  1. Installeer het local-ssl-proxy -pakket globaal.

    code language-bash 
    $ npm install -g local-ssl-proxy

  2. Start twee instanties van de lokale SSL HTTP-proxy voor de volgende services:

    • AEM lokale SSL HTTP-proxy van SDK op poort 8443 .
    • Universal Editor service local SSL HTTP proxy on port 8001 .
    code language-bash 
    # AEM SDK local SSL HTTP proxy on port 8443
$ local-ssl-proxy --source 8443 --target 4502

# Universal Editor service local SSL HTTP proxy on port 8001
$ local-ssl-proxy --source 8001 --target 8000

De React-app bijwerken voor het gebruik van HTTPS

Voer de onderstaande stappen uit om HTTPS voor de React-app voor WKND-teams in te schakelen:

  1. Stop Reageren door Ctrl + C in de terminal te drukken.

  2. Werk het bestand package.json bij om de omgevingsvariabele HTTPS=true in het script start op te nemen.

    code language-json 
    "scripts": {
    "start": "HTTPS=true react-scripts start",
    ...
}

  3. Werk REACT_APP_HOST_URI in het .env.development -bestand bij om het HTTPS-protocol en de lokale SSL HTTP-proxypoort van de AEM SDK te gebruiken.

    code language-bash 
    REACT_APP_HOST_URI=https://localhost:8443
...

  4. Werk het ../src/proxy/setupProxy.auth.basic.js -bestand bij als u ontspannen SSL-instellingen wilt gebruiken met de optie secure: false .

    code language-javascript 
    ...
module.exports = function(app) {
app.use(
    ['/content', '/graphql'],
    createProxyMiddleware({
    target: REACT_APP_HOST_URI,
    changeOrigin: true,
    secure: false, // Ignore SSL certificate errors
    // pass in credentials when developing against an Author environment
    auth: `${REACT_APP_BASIC_AUTH_USER}:${REACT_APP_BASIC_AUTH_PASS}`
    })
);
};

  5. Start de React-app.

    code language-bash 
    $ npm start

De installatie controleren

Nadat u de lokale ontwikkelomgeving hebt ingesteld met de bovenstaande stappen, controleren we de installatie.

Lokale verificatie

Controleer of de volgende services lokaal via HTTPS worden uitgevoerd. Mogelijk moet u de beveiligingswaarschuwing in de browser voor het zelfondertekende certificaat accepteren:

  1. WKND de Teams Reageren app op https://localhost:3000
  2. AEM SDK op https://localhost:8443
  3. De universele dienst van de Redacteur op https://localhost:8001

WKND-teams laden Reageren app in Universal Editor

Laad de React-app voor de WKND-teams in de Universal Editor om de installatie te controleren:

  1. Open de Universal Editor https://experience.adobe.com/#/aem/editor in uw browser. Meld u aan met uw Adobe ID als u hierom wordt gevraagd.

  2. Voer in het invoerveld URL van site van de Universal Editor de URL van de WKND-teams React-app in en klik op Open .

    Universele Redacteur - Plaats URL

  3. De WKND Teams Reageren app laadt in de Universele Redacteur maar u kunt niet de inhoud nog uitgeven. U moet de React-app gebruiken om het bewerken van inhoud in te schakelen met de Universal Editor.

    Universele Redacteur - WKND de Teams Reageren app

Volgende stap

Leer hoe te instrument Reageren app om de inhouduit te geven.

recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69