ÃÛ¶¹ÊÓƵ

Setup a local development environment

A local development environment is essential for quickly developing websites delivered by Edge Delivery Services. The environment uses locally developed code while sourcing content from Edge Delivery Services, allowing developers to instantly view code changes. Such a setup supports fast, iterative development and testing.

The development tools and processes for an Edge Delivery Services website project are designed to be familiar to web developers and provide a fast and efficient development experience.

Development topology

This video provides an overview of the development topology for an Edge Delivery Services website project that is editable with Universal Editor.

Prerequisites

Before starting development, install the following on your machine:

Clone the GitHub repository

Clone the GitHub repository created in the new code project chapter that contains the AEM Edge Delivery Services code project to your local development environment.

$ cd ~/Code
$ git clone git@github.com:<YOUR_ORG>/aem-wknd-eds-ue.git

A new aem-wknd-eds-ue folder is created in the Code directory, which serves as the project’s root. Although the project can be cloned to any location on the machine, this tutorial uses ~/Code as the root directory.

Install project dependencies

Navigate to the project folder and install the required dependencies with npm install. Although Edge Delivery Services projects don’t use traditional Node.js build systems like Webpack or Vite, they still require several dependencies for local development.

# ~/Code/aem-wknd-eds-ue

$ npm install

Install the AEM CLI

The AEM CLI is a Node.js command-line tool designed to streamline the development of Edge Delivery Services-based AEM websites, providing a local development server for rapid development and testing of your website.

To install the AEM CLI, run:

# ~/Code/aem-wknd-eds-ue

$ npm install @adobe/aem-cli

The AEM CLI can also be installed globally using npm install --global @adobe/aem-cli.

Start the local AEM development server

The aem up command starts the local development server and automatically opens a browser window to the server’s URL. This server acts as a reverse proxy to the Edge Delivery Services environment, serving content from there while using your local code base for development.

$ cd ~/Code/aem-wknd-eds-ue
$ aem up

    ___    ________  ___                          __      __
   /   |  / ____/  |/  /  _____(_)___ ___  __  __/ /___ _/ /_____  _____
  / /| | / __/ / /|_/ /  / ___/ / __ `__ \/ / / / / __ `/ __/ __ \/ ___/
 / ___ |/ /___/ /  / /  (__  ) / / / / / / /_/ / / /_/ / /_/ /_/ / /
/_/  |_/_____/_/  /_/  /____/_/_/ /_/ /_/\__,_/_/\__,_/\__/\____/_/

info: Starting AEM dev server version x.x.x
info: Local AEM dev server up and running: http://localhost:3000/
info: Enabled reverse proxy to https://main--aem-wknd-eds-ue--<YOUR_ORG>.aem.page

The AEM CLI opens the website in your browser at http://localhost:3000/. Changes in the project are automatically hot-reloaded in the web browser, while content changes require publishing to the preview environment and refreshing the web browser.

If the web site opens with a 404 page, it’s likely the fstab.yaml or paths.json updated in new code project are incorrectly configured, or the changes have not been committed to the main branch.

Build JSON fragments

Edge Delivery Services projects, created using the , rely on JSON configurations that enable block authoring in the Universal Editor.

The includes a pre-commit hook that detects changes to JSON fragments and compiles them into the appropriate component-*.json files upon git commit.

While the following NPM scripts can be run manually via npm run to build the JSON files, this is usually unnecessary since the husky pre-commit hook handles it automatically.

# ~/Code/aem-wknd-eds-ue

npm run build:json

Linting

Linting ensures code quality and consistency, which is required for Edge Delivery Services projects before merging changes into the main branch.

The NPM scripts can be run via npm run, for example:

# ~/Code/aem-wknd-eds-ue

$ npm run lint

Fix linting issues automatically

You can automatically resolve linting issues by adding the following scripts to the project’s package.json, and can be run via npm run:

# ~/Code/aem-wknd-eds-ue

$ npm run lint:fix

These scripts do not come pre-configured with the AEM Boilerplate XWalk template, but can be added to the package.json file:

{
  ...
  "scripts": [
    ...,
    "lint:js:fix": "npm run lint:js -- --fix",
    "lint:css:fix": "npm run lint:css -- --fix",
    "lint:fix": "npm run lint:js:fix && npm run lint:css:fix",
    ...
  ]
  ...
}