Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Getting started with Sightly

Avatar

Level 2

Hi,

I got the AEM 6.0 today. Installed on Win7. Double clicked to install on port 4602.

Opened Geometrixx site on http://localhost:4602/editor.html/content/geometrixx/en.html

A couple issues: 

- Client context is not getting closed by clicking close icon. :-(

- In developer mode, viewed the scripts used to render home page (This is pretty cool). Clicked on topnav.jsp. My expectation was to see the sightly code but it opened up CRXDElite. In the demo I have seen the script being opened in another interface (Brackets may be, not sure... )

 

What did I miss?

1 Accepted Solution

Avatar

Correct answer by
Employee

We are still finishing the Brackets extension that you'll need to install for URLs of the Developer Mode to open in Brackets. Please give us a few more days for finalising that and releasing it. So stay tuned!

Just to be clear, an important thing to understand is that the goal of the Brackets extension is quite different from CRXDE Lite: It won't be about hacking potentially everything there is in the content repository, but about offering an efficient workflow for web developers when they work on a project. This is important, because you won't be able to edit things that aren't part of a project. A project consists in a list of paths from the content repository that have been serialized to the file system in the vault format (like in AEM packages). The Brackets plugin then offers a convenient way to edit these files, and on save immediately pushing the changes to a running instance, so that you can easily see the changes. The Developer Mode integration then offers a nice way to jump back into your project, to easily inspect and edit in Brackets the templates that rendered the current page.

View solution in original post

4 Replies

Avatar

Level 2

I don't think many of the existing geometrixx pages had been converted to sightly yet.  You can see a few example pages under /content/geometrixx-outdoors/en/activities, such as http://localhost:4502/editor.html/content/geometrixx-outdoors/en/activities/nairobi-runners-running....

This uses an overlayed page template at: /apps/geometrixx-outdoors/components/activities_page

There are some good component examples at: /libs/wcm/foundation/components

Avatar

Level 2

Thanks for the link, Matthew!

I clicked on body.html in the developer pane and it opened the following file in CRXDE Lite :-(

/apps/geometrixx-outdoors/components/activities_page/body.html

 

I want to use Brackets (if that's what the new sightly-editor is called). 

Avatar

Employee

Hi,

FYI, we've just released the Brackets extension for AEM and Sightly:
http://docs.adobe.com/docs/en/dev-tools/sightly-brackets.html

This version offers great sync features to allow front-end developers to be working productively on AEM projects. It also offers nice Sightly syntax highlighting and auto-completion. What it doesn't have yet is an integration with the Developer Mode so that when you click on a component it opens Brackets instead of CRXDE Lite; we'll need a bit more time for this one.

Enjoy,
Gabriel

Avatar

Correct answer by
Employee

We are still finishing the Brackets extension that you'll need to install for URLs of the Developer Mode to open in Brackets. Please give us a few more days for finalising that and releasing it. So stay tuned!

Just to be clear, an important thing to understand is that the goal of the Brackets extension is quite different from CRXDE Lite: It won't be about hacking potentially everything there is in the content repository, but about offering an efficient workflow for web developers when they work on a project. This is important, because you won't be able to edit things that aren't part of a project. A project consists in a list of paths from the content repository that have been serialized to the file system in the vault format (like in AEM packages). The Brackets plugin then offers a convenient way to edit these files, and on save immediately pushing the changes to a running instance, so that you can easily see the changes. The Developer Mode integration then offers a nice way to jump back into your project, to easily inspect and edit in Brackets the templates that rendered the current page.