Quick Setup

Quick setup is an expedited walk-through illustrating how to install and run the WKND App and as a Remote SPA, and author it using AEM SPA Editor.

Quick setup takes you directly to the end state of this tutorial.

A video walk-through of the quick setup

Prerequisites

This tutorial requires the following:

This tutorial assumes:

  • Microsoft® Visual Studio Code as the IDE
  • A working directory of ~/Code/wknd-app
  • Running the AEM SDK as an Author service on http://localhost:4502
  • Running the AEM SDK with the local admin account with password admin
  • Running the SPA on http://localhost:3000

Start the AEM SDK Quickstart

Download and install the AEM SDK Quickstart on port 4502, with default admin/admin credentials.

  1. Download latest AEM SDK

  2. Unzip the AEM SDK to ~/aem-sdk

  3. Run the AEM SDK Quickstart Jar

    $ java -jar aem-sdk-quickstart-xxx.jar
    
    # Provide `admin` as the admin user's password
    

AEM SDK will start and automatically launch on http://localhost:4502. Log in using the following credentials:

  • Username: admin
  • Password: admin

Download and install WKND Site package

This tutorial has a dependency on WKND 0.3.0+'s project (for content).

  1. Download the latest version of aem-guides-wknd.all.x.x.x.zip
  2. Log in to AEM SDK’s Package Manager at http://localhost:4502/crx/packmgr with the admin credentials.
  3. Upload the aem-guides-wknd.all.x.x.x.zip downloaded in step 1
  4. Tap the Install button for the entry aem-guides-wknd.all-x.x.x.zip

Download and install WKND App SPA packages

To perform a quick setup, AEM packages are provided that contain the tutorial’s final AEM configuration and content.

  1. Download wknd-app.all.x.x.x.zip
  2. Download wknd-app.ui.content.sample.x.x.x.zip
  3. Log in to AEM SDK’s Package Manager at http://localhost:4502/crx/packmgr with the admin credentials.
  4. Upload the wknd-app.all.x.x.x.zip downloaded in step 1
  5. Tap the Install button for the entry wknd-app.all.x.x.x.zip
  6. Upload the wknd-app.ui.content.sample.x.x.x.zip downloaded in step 2
  7. Tap the Install button for the entry wknd-app.ui.content.sample.x.x.x.zip

Download the WKND App source

Download the WKND App’s source code by from Github.com, and switch the branch containing the changes to the SPA performed in this tutorial.

$ mkdir -p ~/Code/wknd-app
$ cd ~/Code/wknd-app
$ git clone --branch feature/spa-editor https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql

Start the SPA application

From the project’s root, install the SPA projects npm dependencies and run the application.

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

If there are errors when running npm install try the following steps:

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ rm -f package-lock.json
$ npm install --legacy-peer-deps
$ npm run start

Verify that the SPA is running at http://localhost:3000.

Author content in AEM SPA Editor

Before authoring content arrange your browser windows such that AEM Author (http://localhost:4502) is on the left, and the remote SPA (http://localhost:3000) runs on the right. This arrangement allows you to see how changes to AEM-sourced content are immediately reflected in the SPA.

  1. Log in to AEM SDK Author service as admin
  2. Navigate to Sites > WKND App > us > en
  3. Edit WKND App Home Page
  4. Switch to Edit mode

Author the Home view’s fixed component

  1. Tap on the text WKND Adventures to activate the fixed Title component (hardcoded into the SPA’s Home view)
  2. Tap the wrench icon on the Title component’s action bar
  3. Changes the Title component’s content and save
  4. Refresh the SPA running on http://localhost:3000 and see that the changes reflected

Author the Home view’s container component

  1. While still editing the WKND App Home Page
  2. Expand the SPA Editor’s sidebar (on the left)
  3. Tap the Components icons
  4. Add, change, or remove components from the container component that sits beneath the WKND logo and above the fixed Title component
  5. Refresh the SPA running on http://localhost:3000 and see that the changes reflected

Author a container component on a dynamic route

  1. Switch to Preview mode in SPA Editor
  2. Tap on the Bali Surf Camp card and navigate to its dynamic route
  3. Add, change, or remove components from the container component that sites above the Itinerary heading
  4. Refresh the SPA running on http://localhost:3000 and see that the changes reflected

New AEM pages under the WKND App Home page > Adventure must have an AEM page name that matches the corresponding adventure’s Content Fragment’s name. This is because the SPA route to AEM Page mapping is based off the last segment of the route, which is the Content Fragment’s name.

Congratulations!

You just got quick taste of how AEM SPA Editor can enhance your SPA with controlled, editable areas! If you’re interested - check out the rest of the tutorial, but make sure to start fresh, since in this quick setup your local development environment is now in end state of the tutorial!

On this page