Coder Social home page Coder Social logo

adobe / aem-spa-project-archetype Goto Github PK

View Code? Open in Web Editor NEW
61.0 19.0 32.0 1.32 MB

Maven Archetype for creating new AEM SPA projects

License: Apache License 2.0

Groovy 0.21% JavaScript 13.01% TypeScript 14.78% CSS 70.24% HTML 1.75%
aem aem-spa adobe maven-archetype spa

aem-spa-project-archetype's Introduction

Error in user YAML: (<unknown>): did not find expected alphabetic or numeric character while scanning an alias at line 1 column 1
---

**IMPORTANT:** The SPA archetype has been merged into the [AEM Project Archetype](https://github.com/adobe/aem-project-archetype). This repository is no longer maintained.

---

AEM SPA Project Archetype

This archetype creates a minimal Adobe Experience Manager project as a starting point for your own SPA project.

See the WKND Events Tutorial on the Adobe Help Center website for an example of how to use it.

Usage

Requirements

  • Java 8 or higher
  • Maven 3.5 or higher
  • AEM 6.4.7+ or 6.5.3+

Generating a project

Run the following command to generate a project from the archetype:

mvn archetype:generate \
  -DarchetypeCatalog=remote \
  -DarchetypeGroupId=com.adobe.cq.spa.archetypes \
  -DarchetypeArtifactId=aem-spa-project-archetype \
  -DarchetypeVersion=4.0.0

Maven will prompt you for the following parameters:

  • projectTitle: Descriptive project name (e.g. My App)
  • projectName: Technical project name, used for building AEM paths (like /content/${projectName}/en, e.g. myapp)
  • groupId: ID which uniquely identifies your group and project, should start with a reversed domain name you control (e.g. com.mycompany)
  • optionFrontend: Frontend framework to use in the generated project (either angular or react)

See archetype-metadata.xml for the full list possible parameters.

Documentation

Development

Building

To make modifications to this archetype and use it locally, follow these steps:

  1. Clone the repository: git clone REPO_URL
  2. Navigate into the project directory: cd aem-spa-project-archetype
  3. Switch to the development branch: git checkout development
  4. Add the archetype to the local archetype catalog: mvn clean install archetype:update-local-catalog
  5. Navigate into a different directory where you want to generate a project from the archetype
  6. Update the list of locally available archetypes: mvn archetype:crawl
  7. Generate a project from the local archetype:
mvn archetype:generate \
  -DarchetypeCatalog=local \
  -DarchetypeGroupId=com.adobe.cq.spa.archetypes \
  -DarchetypeArtifactId=aem-spa-project-archetype \
  -DarchetypeVersion=4.0.1-SNAPSHOT

Docs

Contributing

Contributions are welcome! Read the Contributing Guide for more information.

Releasing

To create a release and have CI deploy it to the Central Repository, follow these steps:

  1. Decide on the version number of the new release (e.g. v1.2.3)

  2. Update the archetype:generate commands in this README file with the new version number (so users install the latest version of the archetype)

  3. Run the following commands to create the release. If the tests pass on CI, this will deploy the project to OSSRH and automatically release it to the Central Repository:

    NEW_VERSION="1.2.3"  # Replace with your version number
    
    # Update the version in all POM files
    mvn versions:set -DnewVersion=$NEW_VERSION
    
    # Commit and tag the change
    git commit -am "v${NEW_VERSION}"
    git tag "v${NEW_VERSION}"
    git push && git push --tags
  4. After successfully creating the release, create a new snapshot version which will be used for further development:

    # Increase and add "-SNAPSHOT" to the version number in the POM file
    mvn versions:set -DnextSnapshot
    
    # Commit the changes
    git commit -am "Prepare next development iteration"
    git push
  5. Update the changelog on the Releases page

aem-spa-project-archetype's People

Contributors

bohnertchris avatar filmaj avatar fistakus avatar godanny86 avatar grubyak avatar habansal avatar ittaibaratz avatar lydiapuric avatar norbiorb avatar parikshit-hooda avatar pawan-mittal avatar pfauchere avatar samuelmeuli avatar sharanyavinod avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

aem-spa-project-archetype's Issues

Sling mapping url shortening support

This is a question rather than a feature request/bug.

There is no sling mapping support in the outputted json, is that right? The outputted model.json; if it has any internal link which starts form /content/mysite/en/newpage , will it respect the sling mapping and out put the html with the domain name appended and the url shortened asper the sling mapping? As per my understanding for static page load html parsing happens at run time via sling rewriters transformers which rewrite the links. But since the html is formed on the fly via react, sling rewriters transformers won't come into picture and the outputted json(and the html formed from it) will alwyas have full links starting from content.

Please let me know if my understanding is right.

Fix flaky tests on macOS CI

CI tests on macOS are temporarily disabled because they are flaky.

Stack trace: https://github.com/adobe/aem-spa-project-archetype/pull/94/checks?check_run_id=260497228#step:4:5220

Lines that might be relevant:

2019-10-15T10:22:46.6726090Z [INFO] [ERROR] [ERROR] Some problems were encountered while processing the POMs:
2019-10-15T10:22:46.6733330Z [INFO] [ERROR] Unresolveable build extension: Plugin com.day.jcr.vault:content-package-maven-plugin:0.0.24 or one of its dependencies could not be resolved: Failed to read artifact descriptor for com.day.jcr.vault:content-package-maven-plugin:jar:0.0.24 @ 
...
2019-10-15T10:22:46.7430030Z [INFO] Caused by: org.apache.maven.wagon.TransferFailedException: Connect to repo.adobe.com:443 [repo.adobe.com/192.147.130.162] failed: Operation timed out (Connection timed out)

Might be related to https://stackoverflow.com/questions/30861293/maven-not-working-when-mvn-package-command-is-run/32514413#32514413

Internal issue: CQ-4281649

[Angular] CustomModelClient purpose unclear

It appears that the CustomModelClient was accidentally left over (it is floating outside the /app folder). This file is also ~undocumented making it confusing as to its purpose and/or how/when to use it.

I'd recommend moving sample snippets into documentation, and documenting them well.

See how the angular project tackles exposing sample/illustrative code for ideas: https://angular.io/guide/http#intercepting-requests-and-responses

Security alert for cryptiles

karma-webdriver-launcher uses cryptiles 3.1.2. Upgrade to cryptiles to version 4.1.2 or later is recommended to get rid of this security vulnerability.

Cleanup the maven dependencies

6.3.1.2 version of the uber jar. AFAIK the SPA editor is only supported on 6.4 + SP2 [1]
Direct embeds of SPA editor dependencies. Seems like updating the uber jar would help?
Core Components are not embedded as a subpackage, it should be embedded as part of ui.apps like the AEM Project Archetype

[Angular] Pre-compiled AEM responsive grid included

While removing the AEM dependency for the responsive grid is great, AEM's responsive grid is generated via parameterized inputs (IIRC gutter, and columns?). It appears a pre-baked grid is included that as generated using opaque params.

It would be better if AEM Responsive Grid can be pulled out into an NPM module that can be included and parameterized to the customer's needs.

Build Failing while Creating project

Hey, this is really cool archetype to get started with AEM SPA editor. I am happy to see it available, earlier I used a shell script to modify references in reference spa app for generating custom SPA project which was provided in the BETA release. Excited to use in my next demo soon :) .

Another side -

Issue 1 - please update README.md file with latest version 1.0.3-SNAPSHOT but currently it's set -DarchetypeVersion=1.0.0-SNAPSHOT. Updating version fixed build issue.

Issue 2- while Creating project in interactive mode, projectName and projectTitle are set always with default values, My Sample SPA and mysamplespa

automatically created java packageName contains hyphen and package build fails

Steps to reproduce

  1. Archetype setup:
    Follow Building SPA Starter Kit Archetype of README.md file
  2. Create a project in batch mode (see Using SPA Starter Kit Archetype in README.md) using the following command
    (Remark: this is the current minimal set of properties required to define)
mvn archetype:generate -B \
    -DarchetypeCatalog=local  \
     -DarchetypeGroupId=com.adobe.cq.spa.archetypes  \
     -DarchetypeArtifactId=aem-spa-project-archetype  \
     -DarchetypeVersion=1.0.0-SNAPSHOT \
     -DgroupId=com.adobe.spa.testing 
  1. go into the created project folder and build it with mvn clean install

Experienced

The build fails

Expected

The build passes successfully

The desired archetype does not exist (com.adobe.cq.spa.archetypes:aem-spa-project-archetype:1.0.5-SNAPSHOT)

Bug Report

Current Behavior

I have been following the instructions in the readme, cloned this repo, ran mvn clean install archetype:update-local-catalog and then mvn archetype:crawl, then created a new folder and ran

mvn archetype:generate \
 -DarchetypeCatalog=internal \
 -DarchetypeGroupId=com.adobe.cq.spa.archetypes  \
 -DarchetypeArtifactId=aem-spa-project-archetype  \
 -DarchetypeVersion=1.0.5-SNAPSHOT

and it failed with

[INFO] Generating project in Interactive mode
[WARNING] Archetype not found in any catalog. Falling back to central repository.
[WARNING] Add a repository with id 'archetype' in your settings.xml if archetype's repository is elsewhere.
[WARNING] The POM for com.adobe.cq.spa.archetypes:aem-spa-project-archetype:jar:1.0.5-SNAPSHOT is missing, no dependency information available
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  18.945 s
[INFO] Finished at: 2019-10-15T09:53:36+05:30
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-archetype-plugin:3.1.2:generate (default-cli) on project standalone-pom: The desired archetype does not exist (com.adobe.cq.spa.archetypes:aem-spa-project-archetype:1.0.5-SNAPSHOT) -> [Help 1]

Expected behavior/code

I expected a new project to be successfully generated

Environment

Possible Solution

No idea

Additional context / Screenshots

None

Java 11 not supported

The documentation talks about "Java 1.8 or higher", but I cannot compile with Java 11.0.2.
Changing to Java 1.8.121 it works

This is the detail of the error

[INFO] [ERROR] Tests run: 2, Failures: 0, Errors: 2, Skipped: 0, Time elapsed: 1.989 s <<< FAILURE! - in com.adobe.spa.test.projects.internal.models.PageImplTest
[INFO] [ERROR] testConfigChildPage(com.adobe.spa.test.projects.internal.models.PageImplTest) Time elapsed: 0.152 s <<< ERROR!
[INFO] java.lang.NoClassDefFoundError: javax/annotation/PostConstruct
[INFO] at com.adobe.spa.test.projects.internal.models.PageImplTest.testConfigChildPage(PageImplTest.java:213)
[INFO] Caused by: java.lang.ClassNotFoundException: javax.annotation.PostConstruct
[INFO] at com.adobe.spa.test.projects.internal.models.PageImplTest.testConfigChildPage(PageImplTest.java:213)
[INFO]
[INFO] [ERROR] testRequestFilteredNestedChildPages(com.adobe.spa.test.projects.internal.models.PageImplTest) Time elapsed: 0.012 s <<< ERROR!
[INFO] java.lang.NoClassDefFoundError: javax/annotation/PostConstruct
[INFO] at com.adobe.spa.test.projects.internal.models.PageImplTest.testRequestFilteredNestedChildPages(PageImplTest.java:235)
[INFO]
[INFO] [INFO]
[INFO] [INFO] Results:
[INFO] [INFO]
[INFO] [ERROR] Errors:
[INFO] [ERROR] PageImplTest.testConfigChildPage:213 ยป NoClassDefFound javax/annotation/PostCo...
[INFO] [ERROR] PageImplTest.testRequestFilteredNestedChildPages:235 ยป NoClassDefFound javax/a...
[INFO] [INFO]
[INFO] [ERROR] Tests run: 2, Failures: 0, Errors: 2, Skipped: 0
[INFO] [INFO]
[INFO] [INFO] ------------------------------------------------------------------------
[INFO] [INFO] Reactor Summary:
[INFO] [INFO]
[INFO] [INFO] Test SPA Angular Project Reactor ................... SUCCESS [ 0.403 s]
[INFO] [INFO] Test SPA Angular Project Core ...................... FAILURE [ 32.001 s]

[React] use Router instead of BrowserRouter

This is needed in order to allow using the history object to programmatically move between routes.

This is a simple change, and I'll provide a PR when I get to it. It is explained properly here.

Essentially we need to change the following in index.js:
<BrowserRouter> <App cqChildren=... /> </BrowserRouter>), document.getElementById('page'));

to
const history=createBrowserHistory(); ... <Router history={history}> <App history={history} cqChildren=... /> </Router>

This will give access to the history object, allowing it to update routes as a result of state changes.

Refactor structure of project sub-modules

Traditional AEM modules/naming conventions should be used. Something like:
core - java bundle (hierarchyImpl)
ui.apps - /apps
ui.content - /conf, /content
react-app or angular-app (depending on choice)
The above are well-understood conventions by AEM developer community and will help with adoption.
In the content module, the filter.xml for /conf and /content should have a mode set to merge to avoid overwriting authored changes on an AEM environment when deploying an update.

Core - Add maven-scr-plugin to pom.xml

In order to extract OSGi services from the core package created by the archetype, add maven-scr-plugin to the POM.

Use case - Create servlets to be consumed by the SPA, OSGi services consumed by Sling Models, etc.

Will provide a PR when I get a chance.

React app does not load on publish instance due to HierarchyPageImpl

When there is no access to /conf folder ( and hence the page policy) to anonymous user on publish instance, then content attribute is empty as it gets populated via HierarchyPageImpl and code is not able to access conf folder

so to fetch the model json it accesses the current page's model

image

But when anonymous user has access to 'conf' folder, then it is populated

and now there are two calls to for model.json

image

because of these two calls nothing gets loaded in the app. I know the call is originated by page model manager, but the app should load in case of two calls as well, or the page specific call should not be initiated when rootmodel url is populated.

For now I removed the content attribute in rootmodel meta tag altogether, please let me know the better and appropriate solution.

UTF-8 Missing in <head> tag

Hi, I have found <meta charset="utf-8" /> missing in public/index.html which broke my fonts and were not loaded on page and giving 304.

Before adding UTF-8

screenshot 2019-01-24 at 2 10 43 pm

After adding UTF-8
screenshot 2019-01-24 at 2 12 16 pm

Add a convenience NPM script to deploy the project into AEM locally

Feature Request

As a Frontend developer, I want to be able to push my project into a local AEM instance without having to use Maven.

Describe the solution you'd like
Create an additional script inside package.json which will call Maven to build and deploy the project onto AEM.

Are there alternatives?
The alternative is for frontend developers to use Maven directly.

Documentation
Users will simply run
npm run deploy-local

ui.apps - Wrong vault configuration

The /apps/APP folder should not use merge mode. This means that when we update our components, those updates will not reflect when we install a newer package.

<filter root="/apps/mysamplespa" mode="merge"/>

[React] Support static CRA assets

The Create React App used by this archetype will create JS, CSS and static assets under the build folder:

image

However, aem-clientlib-generator used by this library will only copy the JS and CSS files.
As a result, when static resources are used by the app (Fonts, background images, etc) - They will be broken in AEM.

[React] Support quick syncing to AEM

If I want to test my app in AEM, currently I have to run Maven at the top folder which completes in about 2 minutes.

As a Frontend developer, I want to be able to quickly synchronize the app into AEM without having to go through Maven. The workflow is going to be as simple as:

  1. "npm run sync" - This will run a listener which will watch the aem folder for changes
  2. "npm run build" - In order to build the app. This takes time but still much faster than running Maven.

Pull request coming shortly.

wrong path of filter.xml in pom.xml

In pom.xml of ui.apps and ui.content, the path of filter.xml in

<filterSource>${basedir}/META-INF/vault/filter.xml</filterSource>

tag is incorrect

so the packages deployed in AEM don't have filter.xml and can't be uninstalled.

The correct path is

<filterSource>${basedir}/src/main/content/META-INF/vault/filter.xml</filterSource>

This issue is in the latest 1.1.1-SNAPSHOT version from develop branch

Extra padding in React project UI

There is a sizeable gap/padding when editing the sample React app in the Site's Editor:

editorgap

When viewing in Preview or published mode the padding disappears:

gapgone

I believe this issue originates from the inclusion of a locked responsive grid at the root of the application: http://localhost:4502/content/mysamplespa/en.model.json

{
":items": {
"root": {
"gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
"columnCount": 12,
"columnClassNames": {},
":items": {},
":itemsOrder": [],
":type": "wcm/foundation/components/responsivegrid"
}
},
":itemsOrder": [
"root"
],
":children": {},
":hierarchyType": "page",
":path": "/content/mysamplespa/en",
"title": "Root Page My Sample SPA App",
":type": "mysamplespa/components/app"
}

I think* just removing the responsivegrid in the app template structure would avoid this issue. But perhaps there is another way?

Archetype should be published and publicly available

When attempting to generate a new SPA project the archetype doesn't seem to be found in any public catalogs. I assume it should be uploaded to nexus.adobe.com, i.e https://repo.adobe.com/nexus/content/groups/public/com/adobe/granite/archetypes/aem-project-archetype/

Command:

mvn archetype:generate 
-DarchetypeGroupId=com.adobe.cq.spa.archetypes     
-DarchetypeArtifactId=aem-spa-project-archetype       
-DarchetypeVersion=1.0.4

Error:

[INFO] Scanning for projects...
[INFO]                                                                         
[INFO] ------------------------------------------------------------------------
[INFO] Building Maven Stub Project (No POM) 1
[INFO] ------------------------------------------------------------------------
[INFO] 
[INFO] >>> maven-archetype-plugin:3.0.1:generate (default-cli) > generate-sources @ standalone-pom >>>
[INFO] 
[INFO] <<< maven-archetype-plugin:3.0.1:generate (default-cli) < generate-sources @ standalone-pom <<<
[INFO] 
[INFO] --- maven-archetype-plugin:3.0.1:generate (default-cli) @ standalone-pom ---
[INFO] Generating project in Interactive mode
[INFO] Archetype repository not defined. Using the one from [com.adobe.cq.spa.archetypes:aem-spa-project-archetype:1.0.3-SNAPSHOT] found in catalog local
[WARNING] The POM for com.adobe.cq.spa.archetypes:aem-spa-project-archetype:jar:1.0.4 is missing, no dependency information available
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 3.259 s
[INFO] Finished at: 2019-02-27T18:02:03-08:00
[INFO] Final Memory: 18M/316M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-archetype-plugin:3.0.1:generate (default-cli) on project standalone-pom: The desired archetype does not exist (com.adobe.cq.spa.archetypes:aem-spa-project-archetype:1.0.4) -> [Help 1]
[ERROR] 
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR] 
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException

requiredProperty with default value is not asked while building project in interactive mode

Due to limitation in archetype generator (see https://issues.apache.org/jira/browse/ARCHETYPE-308) user is not asked for a value of required property that have default value (unless it's a reference to another property).

The only workaround is to use another property and use it a reference in original property, but it would be confusing and with ARCHETYPE-308 fixed, user would get asked twice for the same property.

For now we need to document this limitation that occurs in interactive mode and suggest batch mode to have full control on generated project.

[Angular] Extracting all MapTo and EditConfigs into a single file is an anti-pattern

Extracting all EditConfigs and MapTo's into a single mappings.ts is confusing and breaks the separation of concerns (the concerns for a single component are both split up, and then partially consolidated into a single monolithic file). Ideally, each Component would define its own EditConfig as well as MapTo.

SPA does not work on publish instances due to missing ACLs.

Bug Report

Current Behavior
When creating an SPA with the Archetype, the SPA will not render properly on an AEM Publish instance.

The page model root url meta tag renders empty:
<meta property="cq:pagemodel_root_url"/>

This leads the SPA to load the model for the current page (i.e. myapp/en/home) instead of the parent page (i.e. myapp/en) and breaks navigation.

Expected behavior/code
SPA should render correctly on publish instances, loading the model for the parent page and not the current page.

Environment

  • AEM 6.5 L22
  • AEM SPA Archetype 1.0.5-SNAPSHOT
  • JRE version 1.8.0_151-b12

Possible Solution
Update the ACLs under /conf.
I can workaround the issue but giving the anonymous user read access to /conf.

Why have All-in-One module?

I understand this will serve a single package to AEM, which will include two sub-packages of ui.apps and core, but is there a significant advantage here?
It slightly complicates the archetype and differs from https://github.com/Adobe-Marketing-Cloud/aem-project-archetype. The two archetypes should be as closely aligned as possible. When not directly related to SPA capabilities, established conventions of the aem-project-archetype should be used.

SPA Principles in Multi Module Project?

I am wondering if there is any reason that I would not (or should not) be able to apply the way SPA project is setup to a more generic multi module project (say created from the archetype https://github.com/adobe/aem-project-archetype). I.E. I am trying to add a react-app module to a multi module project and make it so that any React components I implement can show up in the AEM touch UI editor as components that can be placed on any page by the AEM publisher. Therefore making it possible for React components and HTL components (the default of the multi module project) to be used on the same page along side each other.

I do realize this would be giving up some of the best advantages of using a single page app (correct me if I'm wrong) since each React component would end up reloading every time a new page is navigated to, whereas in a SPA project the page only ever loads once and keeps rendering UI during navigation (and also may use Redux to manage data in order to never get the same network data more than once). I have no say in this decision, it's unfortunately required that I somehow add React components to a non-SPA (multi module) project :/ Other than that I am thinking the React components should be interchangeable with the HTL components.

I'm using AEM 6.5

Any input, opinion or advice is appreciated. Thanks!

fyi @godanny86

[AEM 6.4 + SP2] - Jackson Dependency Issue

AEM version: AEM 6.4.2

The Core bundle relies on a dependency on com.fasterxm.jackson.* version 2.9.7.

However, on AEM 6.4 + SP2 the dependency included is 2.8.4. This causes the bundle to fail to start:

com.fasterxml.jackson.annotation,version=[2.9,3) -- Cannot be resolved

I understand there is a security issue with version 2.8.4, perhaps the latest version of the bundle can be embedded in the project? Or maybe in AEM 6.4 + SP3 this dependency can be updated?

Core Components are not embedded as a subpackage

It looks like ui.apps is expected to embed core.wcm.components.all but when deployed to AEM I don't see this subpackage embedded:

<!-- ui.apps/pom.xml -->
<subPackages>
                        <subPackage>
                            <groupId>com.adobe.cq</groupId>
                            <artifactId>core.wcm.components.all</artifactId>
                            <filter>true</filter>
                        </subPackage>
                    </subPackages>

image

Not sure if its easier to just move the core components subpackage to be added in all/pom.xml ?

Either way Core Components should be deployed as a subpackage.

Text component cannot be updated using the dialog after inline edit

This issue is the same as the one fixed for Sample Content via https://github.com/adobe/aem-sample-we-retail-journal/pull/16/files

Steps to reproduce:

  • Use the archetype to generate a starter kit and upload it on an AEM instance.
  • Navigate to any page generated by the archetype
  • Add a text component
  • Select the newly created text component
  • Open the dialog and edit once
  • Re-open the dialog and edit a second time
  • Start the inline edit
  • Cancel or save (The issue already occurred)
  • Re-open the dialog and edit a third time

Current
The text component isn't properly updated with the expected content

Expected
The text component is properly updated with the expected content

Default app fails due to malformed url

Bug Report

Current Behavior

I have generated a basic react single page app, adjusted the cors settings in the AEM Author environment, and launched the development server.

The app runs but I get the following error

Uncaught (in promise) Error: while fetching the model for url: http://localhost:4502/.model.json, status: Bad Request
    at index.js:50
(anonymous) @ index.js:50
Promise.then (async)
(anonymous) @ index.js:49

The issue seems to be that the url being fetched is incorrect.

I can go to http://localhost:4502/content/mysamplespa/en.model.json and the content loads correctly so it seems that /content/mysamplespa is missing from the url that React is trying to fetch.

Expected behavior/code

I expect an out of the box React app to work without errors.

Environment

  • AEM version AEM 6.5
  • AEM SPA Archetype 1.1.0
  • JRE version Java(TM) SE Runtime Environment (build 1.8.0_92-b14)

Possible Solution

I've had a look through the generated source code and can't see anywhere where fetch is actually being invoked.

Additional context / Screenshots

Screen Shot 2019-10-16 at 9 42 23 am

Remove all default values from archetype required properties

There is a known issue with required properties to set which have default values, see https://issues.apache.org/jira/browse/ARCHETYPE-308?attachmentSortBy=fileName.
As this issue is from 2015 and seems to needs some while to be fixed, remove all default values from archetype required properties

Note: With generate goal, the first time, no default value is asked for.
When you answer N to confirmation, then any property is asked for, proposing a default value.

[React] Provide a non-ejected version of the Create React App

Ideally, the starter kit should generate a react-app that is not ejected from the Create React App script. This will provide several benefits:

  • Simplifies the react-app project configuration and minimizes the dependencies to track
  • Starts the project using conventions recommended by Facebook
  • Easy for customers to update to the latest version or customize
  • Common starting point for React developers

Lighthouse checks with CircleCI

Feature Request

Is your feature request related to a problem? Please describe.

It would be nice to integrate Lighthouse into the CircleCI setup so we can test whether PRs decrease the PWA score before merging them.

Describe the solution you'd like

Lighthouse Bot currently only supports Travis CI, but there is an open PR adding CircleCI support (GoogleChromeLabs/lighthousebot#68). I suggest using this solution once the PR is merged.

Are there alternatives?

The lighthouse-ci package looks promising as well, but it would be preferable to use the solution from Google. Lighthouse Bot also provides a nice output of the scores on PRs.

.gitignore files are not created automatically

The archetype template contains default gitignore files, however they are not copied to the generated project.

The gitignore files should be automatically copied to the project to save developer efforts.

Remove SSR code

The Starter Kit should not have any reference to the SSR implementation in the code, poms, readme, ...

autoInstallBundle profile missing for Core Module

An established AEM convention is to use the profile autoInstallBundle to deploy just a project's OSGi bundles to a local AEM instance. Currently, this is done with the profile autoInstallPackage. In order to promote consistency across projects the autoInstallBundle profile should be used.

[React] Clientlib housekeeping

It seems like the clientlib deployment does not cleanup previous deployments as seen below:

image

This is a problem because webpack adds a hash to the resources to avoid over-caching.

mvn test fails for newly generated project

Bug Report

Current Behavior
Generated a new project using archetype 1.1.0, running mvn test will fail on the analyze-classes goal:

[ERROR] Failed to execute goal org.apache.jackrabbit:filevault-package-maven-plugin:1.0.1:analyze-classes (default-analyze-classes) on project care.all: Error while analysing imports: C:\src\aem-spa-sample\two\care\core\target\classes (Access is denied) -> [Help 1]

This is actually related to this issue: adobe/aem-project-archetype#161 which is fixed by bumping the filevault-package-maven-plugin to 1.0.3. (would need to be fixed in this archetype I guess)

After updating the version to 1.0.3 the generate-metadata step will now fail. Not sure if this is plugin related or something needs to be set in the configuration for the all module.

[ERROR] Failed to execute goal org.apache.jackrabbit:filevault-package-maven-plugin:1.0.3:generate-metadata (default-generate-metadata) on project care.all: Could not open subpackage 'C:\src\aem-spa-sample\two\care\ui.apps\target\classes' to extract metadata: C:\src\aem-spa-sample\two\care\ui.apps\target\classes (Access is denied) -> [Help 1]

Decided to open here (my first bug report in GitHub anywhere) since the version needs to be updated in this archetype project as well.

Expected behavior/code
Executing mvn test will succeed

Environment

  • AEM 6.4 SP3
  • AEM SPA Archetype 1.1.0
  • Java(TM) SE Runtime Environment (build 1.8.0_191)

Possible Solution
Bump version of filevault-package-maven-plugin to 1.0.3 (fixes one part of the problem)

Get rid of the CustomModelClient and set a server proxy

A cleaner solution could be to use: https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually

ex: react-app/src/setupProxy.js

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy(
      ['**/*.model.json', '**/*.jpg', '**/*.jpeg', '**/*.png'], 
      { 
          target: process.env.REACT_APP_API_HOST,
          auth: process.env.REACT_APP_AEM_ADMIN_AUTH
    }
    ));
};

By making this change we should be able to get rid of the following conditional step [0] and potentially the {{CustomModelClient}}. If necessary, the {{CustomModelClient}} could potentially be reintroduced in conjunction with an SSR setup.

[0] https://github.com/adobe/aem-spa-project-archetype/blob/development/src/main/resources/archetype-resources/react-app/src/index.js#L42-L47

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.