adobe / aem-guides-wknd-spa Goto Github PK

License: MIT License

aem-guides-wknd-spa's Introduction

AEM Guides - WKND SPA Project

This is the code companion for a series of tutorials designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). There are two parallel versions of the tutorial:

Latest Code

If you just want to build the finished version of each project:

React

$ git clone [email protected]:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout React/latest
$ mvn clean install -PautoInstallSinglePackage

Or download and install the compiled AEM Packages from the latest release.

Tutorial Branches

The starter and solution branches in this repository correspond to Angular and React versions of the tutorial.

React Tutorials

Tutorial	Starter Code	Solution
SPA Editor Project	React/create-project-start	React/create-project-solution
Integrate the SPA	React/integrate-spa-start	React/integrate-spa-solution
Map SPA Components	React/map-components-start	React/map-components-solution
Navigation and routing	React/navigation-routing-start	React/navigation-routing-solution
Custom component	React/custom-component-start	React/custom-component-solution
Extend component	React/extend-component-start	React/extend-component-solution

aem-guides-wknd-spa's People

Contributors

Stargazers

Watchers

Forkers

felagund89 cipriancozma godanny86 sameryadav amous10 jshamoo rohanraj14 dplaton wooliesx-apirillo isabella232 kmrobin saini-saivarun campostalita vpalko easingthemes sharanyavinod silverfox70 peerlesstse alberto-dd subramanya gemacjr gyugyu86 pankajdupont tothricsaj delcas1 balakondepudi dabe5651 ompandeyy vannuysm mavicellc rikster julieta129 lukemico srinevas48 surajkamdi pollenshukla wuchaoqun817 romiko actinium15 brubriele covic1 friendlymahi riten228 vipinseni-adobe aryabrata r3vamp praveenatanakanti ahhhkel ararat lbaseggio cthio mocavada manpreetkaur908 zulqarnainaliabid sagarm-cm jh0nll travian-blackshear jonathanmaker vaishnavsree htetaungkhant miguelgonch louisljw mayureshbhardwaj palomalozano jvac99 ebin-tech gabivechiatto m-arceloabreu arturohernan shivprakash20 julkar-naim-bs23 jesantox harishkumarnangal nidhunp parameva priyankasingh5021 poornima124 lakshya-aggarwal renatumb a707843858 skasam09 writetorkpandey ghas-results tkumar495 kxc184 yuan-0324 raj0168 punitgl daniancu davideladisasidea francostino abhinavkarn pavi41 ramyadevarajan

aem-guides-wknd-spa's Issues

Can anyone help provide a case of binding events？

I want bind event for button component. but i don't know how to implement it.

because the button is basic component, any page can import it. so i can't bind event in button component. and this component render by "{ this.childComponents }".

Container example

Hey, is there any place I can found an example of custom container integration?

aem-react-editable-components and cq-react-editable-components, what is the difference?

I was trying to re-implement the Custom component in our project and realized that the Custom component in this example uses a library different from other components (e.g. Image, Text). Using the import cq-react-editable-components for Custom component currently makes it unusable in Author. I'm thinking that cq-react-editable-components are used for Core Components like Image and Text while aem-react-editable-components are for custom components like Custom component. Is this correct? Thanks!

Align with AEM Project Archetype 24

React and Angular code base should align to standards and file structure of the AEM Project Archetype 24 (pending release)

SPA Template Type Incorrect - React and Angular

For both Angular and React projects there is not a valid SPA Page Template Type. This prohibits content authors from creating new Page Templates.

About react SSR solution

Hi Team,

I'm trying react ssr solution with adobe io runtime.

when i deploy the application to io runtime (yarn deploy), i got the below message.

$ aio app deploy
> Build actions
ℹ dist/actions/ssr.zip
✔ Build actions

no web-src, skipping web-src build
> Deploy actions
ℹ Info: Deploying package [react-server-1.0.0-SNAPSHOT]...
ℹ Info: package [react-server-1.0.0-SNAPSHOT] has been successfully deployed.

ℹ Info: Deploying action [react-server-1.0.0-SNAPSHOT/ssr]...
ℹ Info: action [react-server-1.0.0-SNAPSHOT/ssr] has been successfully deployed.

ℹ Success: Deployment completed successfully.
✔ Deploy actions

no web-src, skipping web-src deploy
Your deployed actions:
  -> https://**********-test.adobeioruntime.net/api/v1/web/react-server-1.0.0-SNAPSHOT/ssr 
Well done, your app is now online 🏄
✨  Done in 8.68s.

but i can't find the action on adobe io runtime console. when i access the action link, I got the below response：

{
  "code": "sW7elNczo3m6n26FKUHKhg35Srb9Tai2",
  "error": "The requested resource does not exist."
}

when i want to run the command aio app run --local, i will get below message.

$ aio app run --local
> Local Dev Server
ℹ checking if java is installed...
ℹ checking if docker is installed...
ℹ checking if docker is running...
ℹ downloading OpenWhisk standalone jar from https://dl.bintray.com/adobeio-firefly/aio/openwhisk-standalone.jar to /Users/*****/aem-guides-wknd-spa-React-ssr-openwhisk/ui.server-side/node_modules/@adobe/aio-app-scripts/bin/openwhisk-standalone.jar, this might take a while... (to be done only once!)
✖ Local Dev Server
    Error: unexpected response while downloading 'https://dl.bintray.com/adobeio-firefly/aio/openwhisk-standalone.jar': Forbidden
error Command failed with exit code 2.

caused by i can't download the openwhisk-standalone.jar file.

how to resolve this?

Implement experience-fragments

It would be really nice to have implemented experience-fragments.

Getting issue while trying to access the website after this command "mvn clean install -PautoInstallSinglePackage -Pclassic" runs successfuly

Getting issue while trying to access the website after this command "mvn clean install -PautoInstallSinglePackage -Pclassic" runs successfuly
Identifier com.adobe.aem.spa.project.core.models.Page cannot be correctly instantiated by the Use API
Cannot serve request to /content/wknd-spa-react/us/en/home.html in /apps/spa-project-core/components/page/page.html

Exception:
org.apache.sling.scripting.sightly.SightlyException: Identifier com.adobe.aem.spa.project.core.models.Page cannot be correctly instantiated by the Use API
at org.apache.sling.scripting.sightly.impl.engine.extension.use.UseRuntimeExtension.call(UseRuntimeExtension.java:76)
at org.apache.sling.scripting.sightly.impl.engine.runtime.RenderContextImpl.call(RenderContextImpl.java:72)
at org.apache.sling.scripting.sightly.apps.spa__002d__project__002d__core.components.page.page__002e__html.render(page__002e__html.java:44)
at org.apache.sling.scripting.sightly.render.RenderUnit.render(RenderUnit.java:53)
at org.apache.sling.scripting.sightly.impl.engine.SightlyCompiledScript.eval(SightlyCompiledScript.java:61)
at org.apache.sling.scripting.core.impl.DefaultSlingScript.call(DefaultSlingScript.java:393)
at org.apache.sling.scripting.core.impl.DefaultSlingScript.eval(DefaultSlingScript.java:191)
at org.apache.sling.scripting.core.impl.DefaultSlingScript.service(DefaultSlingScript.java:500)
at org.apache.sling.engine.impl.request.RequestData.service(RequestData.java:546)
at org.apache.sling.engine.impl.filter.SlingComponentFilterChain.render(SlingComponentFilterChain.java:45)
at org.apache.sling.engine.impl.filter.AbstractSlingFilterChain.doFilter(AbstractSlingFilterChain.java:88)
at com.day.cq.wcm.core.impl.WCMDeveloperModeFilter.doFilter(WCMDeveloperModeFilter.java:119)

Malformed XML in React/latest ui.content

.content.xml at [0] is malformed [1] and causes AEM to report errors like [2] when content-package built from the said branch is imported.

[0] https://github.com/adobe/aem-guides-wknd-spa/blob/React/latest/ui.content/src/main/content/jcr_root/conf/wknd-spa-react/settings/wcm/template-types/spa-page/initial/.content.xml
[1]

# xmllint --noout ~/Downloads/.content.xml 
/Users/ashishc/Downloads/.content.xml:2: parser error : XML declaration allowed only at the start of the document
<?xml version="1.0" encoding="UTF-8"?>
     ^

[2]

12.07.2021 14:17:21.596 *ERROR* [qtp503299301-93] org.apache.jackrabbit.vault.fs.impl.io.GenericArtifactHandler Error while parsing /jcr_root/conf/wknd-spa-react/settings/wcm/template-types/spa-page/initial/.content.xml: {}
org.xml.sax.SAXParseException: The processing instruction target matching "[xX][mM][lL]" is not allowed.
    at java.xml/com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.createSAXParseException(ErrorHandlerWrapper.java:204)
    at java.xml/com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.fatalError(ErrorHandlerWrapper.java:178)
    at java.xml/com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(XMLErrorReporter.java:400)
    at java.xml/com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(XMLErrorReporter.java:327)
    at java.xml/com.sun.org.apache.xerces.internal.impl.XMLScanner.reportFatalError(XMLScanner.java:1471)
    at java.xml/com.sun.org.apache.xerces.internal.impl.XMLScanner.scanPIData(XMLScanner.java:745)
    at java.xml/com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl.scanPIData(XMLDocumentFragmentScannerImpl.java:1049)
    at java.xml/com.sun.org.apache.xerces.internal.impl.XMLScanner.scanPI(XMLScanner.java:713)
    at java.xml/com.sun.org.apache.xerces.internal.impl.XMLDocumentScannerImpl$PrologDriver.next(XMLDocumentScannerImpl.java:891)
    at java.xml/com.sun.org.apache.xerces.internal.impl.XMLDocumentScannerImpl.next(XMLDocumentScannerImpl.java:605)
    at java.xml/com.sun.org.apache.xerces.internal.impl.XMLNSDocumentScannerImpl.next(XMLNSDocumentScannerImpl.java:112)
    at java.xml/com.sun.org.apache.xerces.internal.impl.XMLDocumentFragmentScannerImpl.scanDocument(XMLDocumentFragmentScannerImpl.java:534)
    at java.xml/com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:888)
    at java.xml/com.sun.org.apache.xerces.internal.parsers.XML11Configuration.parse(XML11Configuration.java:824)
    at java.xml/com.sun.org.apache.xerces.internal.parsers.XMLParser.parse(XMLParser.java:141)
    at java.xml/com.sun.org.apache.xerces.internal.parsers.AbstractSAXParser.parse(AbstractSAXParser.java:1216)
    at java.xml/com.sun.org.apache.xerces.internal.jaxp.SAXParserImpl$JAXPSAXParser.parse(SAXParserImpl.java:635)
    at java.xml/com.sun.org.apache.xerces.internal.jaxp.SAXParserImpl.parse(SAXParserImpl.java:324)
    at org.apache.jackrabbit.vault.fs.impl.io.GenericArtifactHandler.accept(GenericArtifactHandler.java:100) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:932) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:799) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:839) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:839) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:839) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:839) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:839) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:839) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:839) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.run(Importer.java:440) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.packaging.impl.ZipVaultPackage.extract(ZipVaultPackage.java:232) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.packaging.impl.JcrPackageImpl.extract(JcrPackageImpl.java:401) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.packaging.impl.JcrPackageImpl.extract(JcrPackageImpl.java:360) [org.apache.jackrabbit.vault:3.4.0]12.07.2021 14:17:21.596 *ERROR* [qtp503299301-93] org.apache.jackrabbit.vault.fs.impl.io.GenericArtifactHandler Error while parsing /jcr_root/conf/wknd-spa-react/settings/wcm/template-types/spa-page/initial/.content.xml: {}
org.xml.sax.SAXParseException: The processing instruction target matching "[xX][mM][lL]" is not allowed.
    at java.xml/com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.createSAXParseException(ErrorHandlerWrapper.java:204)
    at java.xml/com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.fatalError(ErrorHandlerWrapper.java:178)
    at java.xml/com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(XMLErrorReporter.java:400)
    ...
    at java.xml/com.sun.org.apache.xerces.internal.jaxp.SAXParserImpl.parse(SAXParserImpl.java:324)
    at org.apache.jackrabbit.vault.fs.impl.io.GenericArtifactHandler.accept(GenericArtifactHandler.java:100) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:932) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:799) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:839) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:839) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:839) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:839) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:839) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:839) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.commit(Importer.java:839) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.fs.io.Importer.run(Importer.java:440) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.packaging.impl.ZipVaultPackage.extract(ZipVaultPackage.java:232) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.packaging.impl.JcrPackageImpl.extract(JcrPackageImpl.java:401) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.packaging.impl.JcrPackageImpl.extract(JcrPackageImpl.java:360) [org.apache.jackrabbit.vault:3.4.0]
    at org.apache.jackrabbit.vault.packaging.impl.JcrPackageImpl.install(JcrPackageImpl.java:354) [org.apache.jackrabbit.vault:3.4.0]
    at com.day.crx.packaging.impl.J2EEPackageManager.consoleInstall(J2EEPackageManager.java:361) [com.adobe.granite.crx-packagemgr:1.2.108]
    at com.day.crx.packaging.impl.J2EEPackageManager.doPost(J2EEPackageManager.java:203) [com.adobe.granite.crx-packagemgr:1.2.108]
    at com.day.crx.packaging.impl.PackageManagerServlet.doPost(PackageManagerServlet.java:169) [com.adobe.granite.crx-packagemgr:1.2.108]
    ...
12.07.2021 14:17:21.598 *ERROR* [qtp503299301-93] org.apache.jackrabbit.vault.fs.io.Importer E /conf/wknd-spa-react/settings/wcm/template-types/spa-page/initial (org.xml.sax.SAXParseException; systemId: file:///jcr_root/conf/wknd-spa-react/settings/wcm/template-types/spa-page/initial/.content.xml; lineNumber: 2; columnNumber: 6; The processing instruction target matching "[xX][mM][lL]" is not allowed.)
12.07.2021 14:17:22.793 *ERROR* [qtp503299301-93] org.apache.jackrabbit.vault.fs.io.Importer There were errors during package install. Please check the logs for details.
12.07.2021 14:17:22.835 *INFO* [qtp503299301-93] org.apache.jackrabbit.vault.packaging.impl.ActivityLog com.adobe.aem.guides:wknd-spa-react.ui.content:1.0.3-SNAPSHOT: INSTALL

Unable to select Edit mode in SPA page

Expected Behaviour

When opening the SPA page within the Editor I should be able to open Edit mode for the SPA page. Able to see the Side Panel and Page Information on the top left.

Screenshot of working We Retail example page

Actual Behaviour

When opening the SPA page (http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html) I am not able to open Edit mode. Also, not able to see Side Panel or Page Information on the top left.

Screenshot of issue with SPA page

Reproduce Scenario (including but not limited to)

See Steps to Reproduce

Steps to Reproduce

Using the AEM Jar file + properties above, run the command java -jar aem-author-p4502.jar to install AEM locally
Confirm local install by logging in and navigating to http://localhost:4502/aem/start.html
Clone the git repo - adobe/aem-guides-wknd-spa
Checkout the branch React/create-project-solution
Deploy to AEM - mvn clean install -PautoInstallSinglePackage
Confirm SPA is deployed to AEM. You should see a new wknd-spa-react site at http://localhost:4502/sites.html/content/wknd-spa-react/us
Open http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html

Platform and Version

Java

java version "11.0.9" 2020-10-20 LTS
Java(TM) SE Runtime Environment 18.9 (build 11.0.9+7-LTS)
Java HotSpot(TM) 64-Bit Server VM 18.9 (build 11.0.9+7-LTS, mixed mode)

Maven

Apache Maven 3.6.3 (cecedd343002696d0abb50b32b541b8a6ba2883f)
Maven home: /usr/local/Cellar/maven/3.6.3_1/libexec
Java version: 11.0.9, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.9.jdk/Contents/Home
Default locale: en_CA, platform encoding: UTF-8
OS name: "mac os x", version: "10.16", arch: "x86_64", family: "mac"

AEM Jar
Tried step 1 in Steps to Reproduce with the following AEM Jar file versions

AEM 6.5
2021.1.4738.20210107T143101Z-201217
2020.12.4676.20201216T130744Z-201201

aem-guides-wknd-spa branch

React/create-project-solution

Sample Code that illustrates the problem

No new code was added or existing code modified.

Logs taken while reproducing problem

Console output when executing mvn clean install -PautoInstallSinglePackage from step 6 in Steps to Reproduce
aem-deploy.log

Setting up Nested React Content & Container Components

Need help in creating a nested container and content Component in React SPA. Is it possible with aem-react-editable-components ?

Header component is missing in the aem repository "ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/header/"

Expected Behaviour header component should be there as described here https://experienceleague.adobe.com/docs/experience-manager-learn/spa-angular-tutorial/navigation-routing.html?lang=en#inspect-header

Actual Behaviour navigate to ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components the header component is missing

Reproduce Scenario (including but not limited to)

Steps to Reproduce I am following this link : https://experienceleague.adobe.com/docs/experience-manager-learn/spa-angular-tutorial/overview.html?lang=en

ui.frontend doesn't work with NextJS and TypeScript

Expected Behaviour

Trying to replace the ui.frontend code with NextJS setup. The mvn builds are successful. I modified clientlibs to pick up the nextjs js and css files from the static build directory.

When I open the aemcloud instance the page is blank. Edit / Preview nothing works/

Will this setup work with NextJS?
Are there any examples with nextJS?
I'm using Typescript is that be a constraint?

Actual Behaviour

Expecting something to show up as NextJS under the hood uses React.

Reproduce Scenario (including but not limited to)

Replace the ui.frontend with a simple NextJS app.

Steps to Reproduce

Once ui.frontend code is replaced run mvn clean install

Platform and Version

Sample Code that illustrates the problem

aem-guides-wknd-spa/ui.frontend/clientlib.config.js

Line 33 in 8250eec

const ASSET_MANIFEST_PATH = path.join(BUILD_DIR, 'asset-manifest.json');

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2020 Adobe Systems Incorporated
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     http://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

const path = require('path');
//const getEntrypoints = require('./utils/entrypoints');
const glob = require('glob');
const { collapseTextChangeRangesAcrossMultipleVersions } = require('typescript');

//console.log(path.join(__dirname+'/out/_next/'));

const BUILD_DIR = path.join(__dirname);
const CLIENTLIB_DIR = path.join(
  __dirname,
  '..',
  'ui.apps',
  'src',
  'main',
  'content',
  'jcr_root',
  'apps',
  'poc-spa-site',
  'clientlibs'
);
//const ASSET_MANIFEST_PATH = path.join(BUILD_DIR, 'asset-manifest.json');

//const entrypoints = getEntrypoints(ASSET_MANIFEST_PATH);
const entrypoints = glob.sync(`out/_next/**/*`);
console.log(entrypoints);

// Config for `aem-clientlib-generator`
module.exports = {
  context: BUILD_DIR,
  clientLibRoot: CLIENTLIB_DIR,
  libs: {
    name: 'clientlib-react',
    allowProxy: true,
    categories: ['poc-spa-site.react'],
    serializationFormat: 'xml',
    cssProcessor: ['default:none', 'min:none'],
    jsProcessor: ['default:none', 'min:none'],
    assets: {
      // Copy entrypoint scripts and stylesheets into the respective ClientLib
      // directories (in the order they are in the entrypoints arrays). They
      // will be bundled by AEM and requested from the HTML. The remaining
      // chunks (placed in `resources`) will be loaded dynamically
      js: entrypoints.filter(fileName => fileName.endsWith('.js')),
      css: entrypoints.filter(fileName => fileName.endsWith('.css')),

      // Copy all other files into the `resources` ClientLib directory
      resources: {
        cwd: '.',
        files: ['**/*.*'],
        flatten: false,
        ignore: entrypoints
      }
    }
  }
};

Logs taken while reproducing problem

App doesn't work with production build

Actual Behaviour

Hi,
If, in the root pom, you change build.environment to <build.environment>:production</build.environment>
and you build the project with mvn clean install -PautoInstallSinglePackage -Pclassic, you can notice that the resultant software doesn't run well, the components are not loaded.
When the :production is set in pom, the "build:production": "ng lint && ng build --prod && clientlib" is fired in Angular,
the "--prod" option use the AOT compilation and the build optimizer (as configured in angular.json).
The AOT compilation and the build optimizer generate the problem described, If in angular.Json file you disable AOT and build optimizer the software run well and the components are loaded
is there a solution to this?

Steps to Reproduce

set build.environment to <build.environment>:production</build.environment> in parent pom
run mvn clean install -PautoInstallSinglePackage -Pclassic.
try the application

Platform and Version

AEM: 6.4.8
aem-guides-wknd-spa TAG:1.0.1-Angular

Logs taken while reproducing problem

there aren't error in log

Components flashing on route change

Hi,
I experience an issue while routing. The Problem is that every component seems to be rerendered when navigating the page.
Here is an GIF to demonstrate:

I'm using these Adobe AEM SPA node packages:
"@adobe/aem-react-editable-components": "1.0.0",
"@adobe/aem-spa-component-mapping": "1.0.0",
"@adobe/aem-spa-page-model-manager": "1.0.0",

I could also reproduce this issue on the WKND tutorial. Is this a known issue or do you have a workaround to solve this problem ?

I'm guessing that this happens since every route loads it's own model.json (page configuration) and in this page configuration is everything included not only the content which changes but also "header", "footer" components which then get rerendered and cause the flashing.. Unfortunately I could not use the "shouldComponentUpdate" lifecycle hook since the components have to be extended from page or container provided by "@adobe/aem-react-editable-components" which seems to kill these hooks..

Kind regards
IFahrentholz

TypeError: Cannot read property 'lastIndexOf' of undefined

Hi there,
I've currently a problem with the marriage of AEM and React. When I try to navigate between pages I always get the error: "TypeError: Cannot read property 'lastIndexOf' of undefined".

The fetch for the model.json files working fine getting an 200 OK response and the model is filled with data. Here is the response of the fetched model:

{
  "designPath": "/libs/settings/wcm/designs/default",
  "title": "Aktuelle Störungen",
  "lastModifiedDate": 1590178967221,
  "templateName": "contentpage",
  "cssClassNames": "basepage page basicpage",
  "language": "de",
  ":items": {
    "root": {
      "columnCount": 12,
      "columnClassNames": {
        "breadcrumb": "aem-GridColumn aem-GridColumn--default--12",
        "footer": "aem-GridColumn aem-GridColumn--default--12",
        "header": "aem-GridColumn aem-GridColumn--default--12",
        "content": "aem-GridColumn aem-GridColumn--default--12"
      },
      "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
      "allowedComponents": {
        "applicable": false,
        "components": [
          {
            "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/wcm/foundation/components/responsivegrid",
            "title": "Layout Container"
          },
          {
            "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/revu-global/e-fix/components/structure/breadcrumb",
            "title": "e-fix Breadcrumb"
          },
          {
            "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/revu-global/e-fix/components/structure/footer",
            "title": "e-fix Footer"
          },
          {
            "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/revu-global/e-fix/components/structure/header",
            "title": "e-fix Header"
          }
        ]
      },
      ":items": {
        "header": {},
        "breadcrumb": {
          "items": [
            {
              "active": false,
              "url": "/content/revu-global/e-fix/edis/de.html",
              "title": "Startseite",
              "wcmio:linkURL": "/content/revu-global/e-fix/edis/de.html",
              "wcmio:linkValid": true,
              "wcmio:linkAttributes": {
                "href": "/content/revu-global/e-fix/edis/de.html"
              }
            },
            {
              "active": true,
              "url": "/content/revu-global/e-fix/edis/de/stoerungen.html",
              "title": "Aktuelle Störungen",
              "wcmio:linkURL": "/content/revu-global/e-fix/edis/de/stoerungen.html",
              "wcmio:linkValid": true,
              "wcmio:linkAttributes": {
                "href": "/content/revu-global/e-fix/edis/de/stoerungen.html"
              }
            }
          ],
          ":type": "revu-global/e-fix/components/structure/breadcrumb"
        },
        "content": {
          "columnCount": 12,
          "columnClassNames": {},
          "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
          "allowedComponents": {
            "applicable": false,
            "components": [
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/form/container",
                "title": "Form"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/container",
                "title": "Container"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/experiencefragment",
                "title": "Experience Fragment"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/image",
                "title": "Image"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/list",
                "title": "List"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/separator",
                "title": "Separator"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/teaser",
                "title": "Teaser"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/text",
                "title": "Text"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/title",
                "title": "Title"
              }
            ]
          },
          ":items": {},
          ":itemsOrder": [],
          ":type": "wcm/foundation/components/responsivegrid"
        },
        "footer": {}
      },
      ":itemsOrder": ["header", "breadcrumb", "content", "footer"],
      ":type": "wcm/foundation/components/responsivegrid"
    }
  },
  ":itemsOrder": ["root"],
  ":type": "revu-global/e-fix/components/page/basepage"
}

And here is a screenshot of my browser with network and console:

Can anybody help ?

WKND React SPA Sample does not work with aem-react-editable-components 2.0.0

Expected Behaviour

The WKND React Sample Project should work when upgrading the aem-react-editable-components to 2.0.0, since there are no notes or documentation that says otherwise. Following the very limited "migration to v2" readmes in the package repository (found here and here) were helpful, but unsuccessful in getting the code to run.

Actual Behaviour

A white screen appears when trying to use the sample project and the attached error appears in the console.

It appears the class component implementation for the Page component was removed in version 2.0.0 and with the existing App component extending the Page component, there is no documentation or guide as to how to migrate that to version 2.0.0 syntax.

Reproduce Scenario (including but not limited to)

Update the aem-react-editable-components package to 2.0.0 in the package.json file. This version is needed to support React 17 (as noted in this issue) and includes better support for functional components.

Steps to Reproduce

Download and unzip the latest 1.0.3 React Sample version here.
Update line 13 of the ui.frontend/package.json to version 2.0.0.
Run npm start
The project will run and show the above screenshot.

Platform and Version

macOS 12, node 16.16.0 LTS, AEM 6.5 with latest service packs

Sample Code that illustrates the problem

Logs taken while reproducing problem

Can the React Sample Code be updated to support the new dependency or more complete documentation be provided to migrate the existing sample code to the new syntax?

Using less style in React SPA

Expected Behaviour

Able to use less style sheet.

In my dependencies I have the following:

    "css-loader": "^5.2.7",
    "less": "^4.1.2",
    "less-loader": "^7.3.0",
    "style-loader": "^2.0.0",
    "webpack": "^4.20.2",

In webpack.config.express.js under rules:

            {
                test: /\.less$/,
                use: [
                  {
                    loader: "style-loader"
                  },
                  {
                    loader: "css-loader",
                  },
                  {
                    loader: "less-loader"
                  }
                ]
            },

Actual Behaviour

Not seeing the styles appear.

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

node -v
v13.7.0
npm -v
6.13.6

Sample Code that illustrates the problem

full set of dependencies:

  "dependencies": {
    "@adobe/aem-core-components-react-base": "1.1.3",
    "@adobe/aem-core-components-react-spa": "1.1.3",
    "@adobe/aem-react-editable-components": "~1.1.2",
    "@adobe/aem-spa-component-mapping": "~1.1.0",
    "@adobe/aem-spa-page-model-manager": "~1.3.3",
    "chalk": "^4.1.2",
    "custom-event-polyfill": "^1.0.7",
    "dompurify": "^2.0.7",
    "history": "^4.10.1",
    "isomorphic-dompurify": "0.15.0",
    "node-fetch": "^2.6.0",
    "react": "^16.12.0",
    "react-app-polyfill": "^1.0.5",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "aem-clientlib-generator": "^1.5.0",
    "aemsync": "^4.0.0",
    "babel-core": "^6.26.2",
    "babel-plugin-universal-import": "^4.0.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "body-parser": "^1.19.0",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^5.2.7",
    "dotenv": "10.0.0",
    "dotenv-webpack": "7.0.2",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.15.1",
    "express": "^4.17.1",
    "less": "^4.1.2",
    "less-loader": "^7.3.0",
    "sinon": "^7.5.0",
    "style-loader": "^2.0.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.1.7",
    "webpack-node-externals": "^1.7.2",
    "webpack-shell-plugin": "^0.5.0"
  },

Logs taken while reproducing problem

React/custom-component-solution: Models not working

I checked out React/custom-component-solution as is, built and deployed, but the model is not working. As you can see in the JSON included below, it is not uppercasing the text. I've banged my head against the wall, but am not really sure where to start looking in to why the model won't be applied with the component.

"custom_component":{":type":"wknd-spa-react/components/custom-component","message":"Hello World"}

[Angular] npm test fails

Error occurs when npm test is run:

ERROR in src/app/components/page/page.component.spec.ts:42:49 - error TS2345: Argument of type '() => Promise<{}>' is not assignable to parameter of type '<M extends Model>(config?: string | ModelManagerConfiguration) => Promise<M>'.
  Type 'Promise<{}>' is not assignable to type 'Promise<M>'.
    Type '{}' is not assignable to type 'M'.
      '{}' is assignable to the constraint of type 'M', but 'M' could be instantiated with a different subtype of constraint 'Model'.

CSS not being applied to Layout Container

Expected Behaviour

After adding a custom css class in Layout Container's policy (step-1.png) and choosing the custom css styles under Styles button (step-2.png), the css class is applied to the layout container

Step 1

Step 2

Actual Behaviour

The css class is NOT being applied to the layout container (actual-behavior.png)

Reproduce Scenario (including but not limited to)

N/A

Steps to Reproduce

Go to SPA Page template
Enter Layout Container's Policy settings
Head to Styles tab and add a css
Save Policy and go back to SPA Page template
Apply the css to the Layout Container with the Styles button

Platform and Version

Windows 10 with AEM 6.5.5
React - WKND SPA 1.0.3 Latest

Sample Code that illustrates the problem

N/A

Logs taken while reproducing problem

N/A

Any help is appreciated. Thanks! :)

[React] NPM Module re-naming causes build failure

Recently @adobe/cq-react-editable-components was deprecated and renamed to @adobe/aem-react-editable-components

Code branches need to be updated to use the new library name otherwise failures like the following occur:

[ERROR] Error: Cannot find module '/code/aem-guides-wknd-spa/ui.frontend/node_modules/@adobe/cq-react-editable-components/deprecated.js'
[ERROR]     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
[ERROR]     at Function.Module._load (internal/modules/cjs/loader.js:862:27)
[ERROR]     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
[ERROR]     at internal/main/run_main_module.js:17:47 {
[ERROR]   code: 'MODULE_NOT_FOUND',
[ERROR]   requireStack: []
[ERROR] }

adobe / aem-guides-wknd-spa Goto Github PK

aem-guides-wknd-spa's Introduction

AEM Guides - WKND SPA Project

Latest Code

React

Tutorial Branches

React Tutorials

aem-guides-wknd-spa's People

Contributors

Stargazers

Watchers

Forkers

aem-guides-wknd-spa's Issues

Expected Behaviour

Actual Behaviour

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

Expected Behaviour header component should be there as described here https://experienceleague.adobe.com/docs/experience-manager-learn/spa-angular-tutorial/navigation-routing.html?lang=en#inspect-header

Actual Behaviour navigate to ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components the header component is missing

Reproduce Scenario (including but not limited to)

Steps to Reproduce I am following this link : https://experienceleague.adobe.com/docs/experience-manager-learn/spa-angular-tutorial/overview.html?lang=en

Expected Behaviour

Actual Behaviour

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

Actual Behaviour

Steps to Reproduce

Platform and Version

Logs taken while reproducing problem

Expected Behaviour

Actual Behaviour

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

Expected Behaviour

Actual Behaviour

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

Expected Behaviour

Actual Behaviour

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

Recommend Projects

Recommend Topics

Recommend Org