Let's explore WebDav..
Scenario: You have been tasked to create an AEM site but you need to use 3rd party frameworks like Bootstrap 4. The challenge is to get all the correct Bootstrap files uploaded to AEM in the correct file structure.
Everyone that has used AEM, know to get external JS and CSS files in your project structure can be a nightmare. There are a few ways, ie: create new .js file in CRXDE, and copy and paste the JS file from Bootstrap - but seeing that there are many JS files and many CSS files, it is not the best option.
This is where the power of the WebDav component from Adobe AEM comes into play. You can use an external FTP Program, like CyberDuck and you can connect to you localhost and you will be able to see the whole AEM file system. This works best on Mac. If you have a PC, you can remotely connect through the windows explorer window to get the same effect.
As Im working on a Mac, I will demonstrate how to use CyberDuck (you can do the same on a PC):
Step 1:
Download CyberDuck: https://cyberduck.io/?l=en and install it.
Step 2:
Make sure that you have started an AEM instance and that you are logged in.
Step 3:
Open CyberDuck and click on 'Open Connection'. And select from the drop down:
WebDAV (Web-based Distributed Authoring and Versioning)
Complete the fields:
Server: Localhost
Port: 4502 (Or whichever port you have selected AEM to start on)
Username: admin
Password: admin
Step 4:
Once you are connected, you will see the file structure of AEM. From here you can copy all JS and CSS file - like FTP - to you desired folder. (etc/designs/<yourprojectname>/clientlibs)
From here you can access your code on CRXDE or Eclipse and modify to suit your project settings and reference it in your code.
Note:
For more information about WebDAV access, see http://dev.day.com/docs/en/crx/current/how_to/webdav_access.html.
Happy Coding!!
Nice :)
ReplyDeleteninjas :)
ReplyDelete