style
content

Getting Started – DA Developer Tutorial

This tutorial will get you up-and-running with a new Adobe Experience Manager (AEM) project. In ten to twenty minutes, you will have created your own site and be able to create, preview, and publish your own content, styling, and add new blocks.

Prerequisites:

  1. You have a GitHub account, and understand Git basics.
  2. You understand the basics of HTML, CSS, and JavaScript.
  3. You have node / npm installed for local development.

This tutorial uses macOS, Chrome, and Visual Studio Code as the development environment and the screenshots and instructions reflect that setup. You can use a different operating system, browser, and code editor, but the UI you see and steps you must take may vary accordingly.

What makes Document Authoring different

Document Authoring (DA) is an alternative to SharePoint or Google Drive that provides a document-based authoring interface focused on the AEM Document model (Blocks, Sections, etc.). It provides an SDK, APIs, and built-in Adobe technologies.

Getting started

The fastest and easiest way to get started following AEM best practices is to create your repository using the AEM Block Collection GitHub repository as a template. You can find it here: https://github.com/aemsites/da-block-collection


Click the Use this template button and select Create a new repository, and select the user or org you would like to own this repository.

We recommend that the repository is set to public.

The only remaining step in GitHub is to install the AEM Code Sync GitHub App on your repository by visiting this link: https://github.com/apps/aem-code-sync/installations/new. This app will sync code changes to AEM.

In the Repository access settings of the AEM Code Sync App, make sure you select Only select Repositories (not All Repositories). Then select your newly created repository, and click Save.

Note: If you are using Github Enterprise with IP filtering, you can add the following IP to the allow list: 3.227.118.73

Congratulations! You have a new website running on https://<branch>--<repo>--<owner>.aem.page/ In the example above that’s https://main--da-tutorial--da-sites.aem.page/

Link your code and content

Copy your GitHub repo URL. In our example, this would be: https://github.com/da-sites/da-tutorial

Paste this URL into the https://da.live/start page and click Go.

You will be presented with a code snippet to place in your project. Click Copy to add the code to your clipboard. You will then be walked through the process of adding the snippet to your fstab.yaml.

Note: Firefox users may have to select the snippet and copy manually.

Clicking Copy will present an Open button. This button will take you directly to your fstab.yaml to paste your snippet.

Upon landing back in GitHub, paste the code snippet and commit the changes. You can close the GitHub tab when you are finished committing your changes.

After you have committed your changes, switch back to your https://da.live/start tab and click Done.

You will be presented with the option to create demo content. This is recommended for this tutorial.

Browse your content

After your demo content has been copied, you will be taken to DA’s browse view. Here you can:

  1. Browse your content
  2. Search & replace content
  3. Copy, rename, move, and delete content
  4. Create new docs, sheets, and media
  5. Access configurations for both DA and AEM.
  6. Drag and drop supported files from your computer or mobile device.

Check out the demo page by clicking on it.

Edit and preview your content

One of the unique features of DA is the ability to get a live preview of your document. Click the preview tab to expand the live preview pane.

Once the live preview pane is open, change the document. Below, we have changed the congrats text. You will see your changes reflected in the preview pane on the right.

Preview your content from DA

In addition to the AEM Sidekick, DA provides the ability to preview and publish your content. Select the paper airplane in the top right of the page and click preview.

Your page will open in a new tab with your changes. You are now looking at a staged, or preview, version of your page.

Publish your content using AEM Sidekick

The next step is to publish the page using AEM Sidekick. If you have not already done so, install the AEM Sidekick Chrome extension.

After adding the extension to Chrome, don’t forget to pin it, this will make it easier to find it.

Navigate back to your previewed page and toggle the Sidekick extension to see Sidekick at the bottom of your page. Click the Publish button to push your page live.

Start developing styling and functionality

https://main--helix-website--adobe.aem.page/developer/videos/tutorial-step4.mp4

To get started with development, it is easiest to install the AEM Command Line Interface (CLI) and clone your repo locally through using the following.

npm install -g @adobe/aem-cli
git clone https://github.com/<owner>/<repo>

From there change into your project folder and start your local development environment using the following.

cd <repo>
aem up



This opens http://localhost:3000/ and you are ready to make changes.
A good place to start is in the blocks folder which is where most of the styling and code lives for a project. Simply make a change in a .css or .js and you should see the changes in your browser immediately.

Once you are are ready to push your changes, simply use Git to add, commit, and push and your code to your preview (https://<branch>--<repo>--<owner>.aem.page/) and production (https://<branch>--<repo>--<owner>.aem.live/) sites.

That’s it, you made it! Congrats, your first site is up and running. If you need help in the tutorial, please join our Discord channel or get in touch with us.