preview-import

OverviewHistoryStatsSecurity

npx skills add adobe/skills --skill preview-import

Documentation

SKILL.md

npx skills add ...

Documentation

SKILL.md

Use this when you need to preview and verify content you imported into a local AEM Edge Delivery Services (EDS, Franklin, Helix) dev server on localhost. Starts the dev server against the imported HTML, checks block rendering, inspects DOM structure, compares against the original page, and troubleshoots broken references and 404s.

npx skills add adobe/skills --skill preview-import

Documentation

SKILL.mdView source

Preview Import

Open and verify imported content in local development server.

When to Use This Skill

Use this skill when:

You have generated HTML file (from generate-import-html)
Ready to preview in browser and verify rendering
Need to compare with original page structure

Invoked by: page-import skill (Step 5)

Prerequisites

From previous skills, you need:

✅ HTML file at correct path (from generate-import-html)
✅ Images folder in same directory
✅ screenshot.png from scrape-webpage (for comparison)
✅ documentPath from metadata.json (for URL construction)

page-import - Orchestrator that invokes this skill
generate-import-html - Provides HTML file to preview
scrape-webpage - Provides screenshot for comparison

Preview Workflow

Step 1: Start Development Server with HTML Folder Flag

Determine the folder from metadata.json:

Look at paths.dirPath from metadata.json (e.g., /us)
This is the root folder containing your imported HTML file

Command:

aem up --html-folder {dirPath}

Examples based on imported content location:

HTML File Location	Command	Preview URL
`us/en.plain.html`	`aem up --html-folder us`	`http://localhost:3000/us/en`
`products/widget.plain.html`	`aem up --html-folder products`	`http://localhost:3000/products/widget`
`blog/2024/post.plain.html`	`aem up --html-folder blog`	`http://localhost:3000/blog/2024/post`

Why this is required:

Without --html-folder, AEM CLI proxies requests to the remote server
The remote server doesn't have your locally imported content
Result: 404 "Page not found" errors

Step 2: Navigate in Browser

For most files, use the document path directly:

http://localhost:3000${documentPath}

Example:

HTML file: us/en/about.plain.html
URL: http://localhost:3000/us/en/about

IMPORTANT: For index files, use / instead of /index:

If file is: index.plain.html
Preview at: http://localhost:3000/
NOT: http://localhost:3000/index

Note: If you used --html-folder flag (e.g., aem up --html-folder drafts), prepend that folder to the URL:

File: drafts/test.plain.html
URL: http://localhost:3000/drafts/test

Use paths.documentPath from metadata.json, but for index files ensure the path is / not /index

Step 3: Verify Rendering

Check the following:

✅ Blocks render with correct styling
✅ Layout matches original page structure (compare to screenshot.png)
✅ Images load (or show appropriate placeholders)
✅ No raw HTML visible
✅ Metadata appears in page source (view source, check <meta> tags)
✅ Section styling applied correctly

Step 4: Compare with Original

Side-by-side comparison:

Open ./import-work/screenshot.png alongside browser preview
Check that content structure matches
Verify blocks decorated correctly
Confirm section boundaries align
Validate styling consistency

Troubleshooting

Blocks don't render correctly:

Check HTML structure matches expected format
Verify block names match exactly (case-sensitive)
Review ../content-driven-development/references/html-structure.md for format guidance

Images not loading:

Verify images folder is in same directory as HTML file
Check image paths are ./images/... format
Ensure images were copied correctly from ./import-work/images/

Raw HTML visible:

Block name might not match existing block in project
Check browser console for JavaScript errors
Verify block exists in blocks/ directory

Metadata not in page source:

Check metadata block is at end of HTML file
View page source and search for <meta> tags in <head>
Verify metadata properties match expected format

Dev server not running:

Start server with aem up
Check for port conflicts (default 3000)
Verify you're in correct project directory

Page not found (404):

Most common cause: Missing --html-folder flag - restart server with aem up --html-folder {dirPath}
Verify HTML file exists at expected path
Check documentPath from metadata.json matches URL
For index files, use / not /index
Check terminal output confirms "Serving HTML files from folder: {folder}"

Output

This skill provides:

✅ Verified preview that matches original page structure
✅ Visual confirmation of correct rendering
✅ Validated block decoration
✅ Confirmed metadata presence

Import complete when all verification points pass.

npx skills add adobe/skills --skill preview-import

Documentation

SKILL.md

npx skills add adobe/skills --skill preview-import

Documentation

SKILL.mdView source

Preview Import

Open and verify imported content in local development server.

When to Use This Skill

Use this skill when:

You have generated HTML file (from generate-import-html)
Ready to preview in browser and verify rendering
Need to compare with original page structure

Invoked by: page-import skill (Step 5)

Prerequisites

From previous skills, you need:

✅ HTML file at correct path (from generate-import-html)
✅ Images folder in same directory
✅ screenshot.png from scrape-webpage (for comparison)
✅ documentPath from metadata.json (for URL construction)

page-import - Orchestrator that invokes this skill
generate-import-html - Provides HTML file to preview
scrape-webpage - Provides screenshot for comparison

Preview Workflow

Step 1: Start Development Server with HTML Folder Flag

Determine the folder from metadata.json:

Look at paths.dirPath from metadata.json (e.g., /us)
This is the root folder containing your imported HTML file

Command:

aem up --html-folder {dirPath}

Examples based on imported content location:

HTML File Location	Command	Preview URL
`us/en.plain.html`	`aem up --html-folder us`	`http://localhost:3000/us/en`
`products/widget.plain.html`	`aem up --html-folder products`	`http://localhost:3000/products/widget`
`blog/2024/post.plain.html`	`aem up --html-folder blog`	`http://localhost:3000/blog/2024/post`

Why this is required:

Without --html-folder, AEM CLI proxies requests to the remote server
The remote server doesn't have your locally imported content
Result: 404 "Page not found" errors

Step 2: Navigate in Browser

For most files, use the document path directly:

http://localhost:3000${documentPath}

Example:

HTML file: us/en/about.plain.html
URL: http://localhost:3000/us/en/about

IMPORTANT: For index files, use / instead of /index:

If file is: index.plain.html
Preview at: http://localhost:3000/
NOT: http://localhost:3000/index

Note: If you used --html-folder flag (e.g., aem up --html-folder drafts), prepend that folder to the URL:

File: drafts/test.plain.html
URL: http://localhost:3000/drafts/test

Use paths.documentPath from metadata.json, but for index files ensure the path is / not /index

Step 3: Verify Rendering

Check the following:

✅ Blocks render with correct styling
✅ Layout matches original page structure (compare to screenshot.png)
✅ Images load (or show appropriate placeholders)
✅ No raw HTML visible
✅ Metadata appears in page source (view source, check <meta> tags)
✅ Section styling applied correctly

Step 4: Compare with Original

Side-by-side comparison:

Open ./import-work/screenshot.png alongside browser preview
Check that content structure matches
Verify blocks decorated correctly
Confirm section boundaries align
Validate styling consistency

Troubleshooting

Blocks don't render correctly:

Check HTML structure matches expected format
Verify block names match exactly (case-sensitive)
Review ../content-driven-development/references/html-structure.md for format guidance

Images not loading:

Verify images folder is in same directory as HTML file
Check image paths are ./images/... format
Ensure images were copied correctly from ./import-work/images/

Raw HTML visible:

Block name might not match existing block in project
Check browser console for JavaScript errors
Verify block exists in blocks/ directory

Metadata not in page source:

Check metadata block is at end of HTML file
View page source and search for <meta> tags in <head>
Verify metadata properties match expected format

Dev server not running:

Start server with aem up
Check for port conflicts (default 3000)
Verify you're in correct project directory

Page not found (404):

Most common cause: Missing --html-folder flag - restart server with aem up --html-folder {dirPath}
Verify HTML file exists at expected path
Check documentPath from metadata.json matches URL
For index files, use / not /index
Check terminal output confirms "Serving HTML files from folder: {folder}"

Output

This skill provides:

✅ Verified preview that matches original page structure
✅ Visual confirmation of correct rendering
✅ Validated block decoration
✅ Confirmed metadata presence

Import complete when all verification points pass.

preview-import

Documentation

Documentation

preview-import

Documentation

Preview Import

When to Use This Skill

Prerequisites

Related Skills

Preview Workflow

Step 1: Start Development Server with HTML Folder Flag

Step 2: Navigate in Browser

Step 3: Verify Rendering

Step 4: Compare with Original

Troubleshooting

Output

Documentation

Documentation

Preview Import

When to Use This Skill

Prerequisites

Related Skills

Preview Workflow

Step 1: Start Development Server with HTML Folder Flag

Step 2: Navigate in Browser

Step 3: Verify Rendering

Step 4: Compare with Original

Troubleshooting

Output