Skill Exchange Event Aug 2023 - AEM Developer Track - AEM Developer Starter Kit

Hello, everybody. Welcome to a new Skill Exchange. Today’s topic will be about AEM Developer Starter Kit. Your host today is myself. My name is Rami Ilgamal. I am a Senior Solutions Consultant. I am also the Director of Renee Consulting, a small firm that has to do with everything AEM. I started developing on AEM about 12 years ago. That was back when it was CQ 4.4. It was all blue. I’ve also done work with Adobe Analytics, Target Customer Journey, Adobe Commerce, etc. So essentially the entirety of the Adobe stack. I was lucky enough to be part of the 2022 Experience Manager Champion Program. It’s a fantastic program. I recommend everybody to apply to it. And also I am a certified AEM architect, developer, and business practitioners. The biggest point out of all these is I’m a Disney fan. My entire family is because it’s the way. Last but not least, here’s my LinkedIn account. So please feel free to add me if you need to reach out. So let me start with the agenda. There are four different buckets that we’re going to be talking about today. They’re all very, very important. And we can go for a very long time talking about each one. So we’re going to do some quick touches on each one to give you an idea on how those work. So the first one is your code repository and development. That’s very essential. Once you are ready to develop, how do you deploy? So that’s bucket number two. And then we will talk about Adobe IO, which is used for integration with the cloud. And last but not least, and I think this is my favorite topic. It is Rapid Development Environment, also known as RDE. So let’s go ahead with code repository. So the first thing that you do when you’re starting a brand new vanilla project on AEM is what we call install an archetype or AEM project archetype. Why? An archetype is essentially a template. It’s a Maven template that allows you to create an AEM project, a vanilla AEM project that has code examples, all the modules that you would need. So your dispatcher, your front end module, your core components. And you probably heard the word core components multiple times. That includes normal core components, forms, core components, editable templates. It also is cloud ready. So it allows you to install this vanilla code on the cloud very easily. And it has unit tests. Do not forget about your unit tests. So the minimum on Adobe cloud is 50%. However, we recommend about 80% for your Java code, but you also have functional unit tests. And the last point is it has example codes. I personally still use the example codes in the example code in the archetype because it just gives you an idea servlet. How do you write a sling model, et cetera. Now we will be starting a quick demo. Most of this is going to be all about demoing and hands-on. So you get an idea. So if you’re on your computer and you want to follow, please follow along. Cause I think it would be amazing if you could do the same things we’re doing here. So we’re going to start with our AEM instance. And from there, let me go right ahead to our software distribution. So once you log into your experience, adobe.com. So right up here, what you need to do is you need to go to the right side here, click on this three by three hamburger bun. I then go down to software distribution. Now software distribution has everything to do with the Adobe software. So you’re going to find your AEM jar files, your forms, add-ons, et cetera. Once you go in here, today’s demo is all about AEM as a cloud service. So we’re going to click on AEM as a cloud service and we’re going to download the latest SDK. Now there’s also your normal Adobe sort of jar files, the non-container ones or the non AEM as a cloud service ones. But again, for today’s demo, we’re going to be focusing on the cloud. Once it’s downloaded, let me show you my command line. Now there’s a couple of different ways you can do the setup. I’ll tell you my sort of favorite or personal way that I always do it. However, like I said, there’s a couple of different ways. Once the jar is downloaded, you can just double click on the jar and that will open it up and expand it and start AEM. Not my favorite way of doing it. I actually like to create two folders. One is for your author instance. One is for your publish instance. So right now I have two of them and then let’s play around with the author instance. So in there I have my jar file. So the first thing that I’m going to do is to extract it. So I am going to extract it by using the unpack command. Now the unpack command will extract it. So now I have an instance ready to be started. If you look in here now I have my CRX quick start. So I’m going to go in there and then there should be a bin folder. And here’s all of your scripts. So you have your start script, your stop script, and your status. The reason I like this approach is because now you have access to the actual script. You can go in there and do a whole bunch of changes, whether it’s run mode, so you have the publish run mode and the author run mode, or even if you’re doing development and you want to have the dev run mode or stage or prod. Also you can even define the different Java versions because you’re right on the command line. So you are substantially more in control. So let me give you an example here on how this file looks like. So as you can see here, here is our starting script. So let me go through it really quickly to give you an idea what’s in here. So first of all the port. So the default port for author in AEM is 4502. For publish it’s 4503. Because this is meant to be an author instance we will keep it at 4502. Going from there we have your run mode. So this could be author or publish. You can even combine multiples. So if you want author dev you can do that. If you want author prod you can do that as well. The next part I rarely touch. It’s talking about how much heap you want, the memory use, etc. In all honesty, just leave it as is. Really the most essential part here is my run mode and my port. Once I’m ready all I need to do now is to go back to my command line and just hit the start script. What this will do is it’s going to start your AEM instance and then once it’s ready it’ll be good to go on the browser. Now as this is happening, let me just go back here quickly. So we’ve talked about the software distribution. We’ve talked about the extracting the jar and starting the script as well as the run mode configurations. Let me take you through the archetype. Now as I said before the archetype is essentially a little Maven command that you use that allows you to go ahead and create a fresh project which is great for developers at the start because you create the vanilla project and then you start creating your components. You have code examples, etc. So what I’m going to do here is I am going to go into my folder and then I’m going to run the command. But before I do I also want to take you through that command to sort of see the breakdown. So here’s the example. What this command says is using Maven generate the archetype and this is the latest archetype so it’s archetype 43 and it gives a title to the application. It gives the application id as well as the group id which is eventually going to be your path or namespace when it comes to the Java code. Keep in mind that there is multiple flags that you can use. So when you’re at an archetype you have to decide what type of project you’re going to have because you can have let’s say a single page application with a spot editor. That’s a different flag. You can have let’s say just your normal htl. You can have server-side rendering. So there is a list of different flags that you can use multi-language etc. So once that’s done I’m just going to hit enter and what this will do like I said is it’s going to create the project for me and just like success. I just created the code base for AEM to start developing. I am going to open up my code base. So let me take you through the code base really quickly. As you can see this is all created from archetype. All I did is I ran this command and I have the full application. So ui apps is where your components will go. Ui frontend is where your frontend code would go. You have the dispatcher. You have core. It is where your Java code would go as well. Okay let’s see if our AEM instance has started. So 4502 and here we go and the secret username and password is admin admin and just like that I have my AEM instance. Okay so now we have our code base right. We have our AEM instance up and running. I am going to start developing. Here’s how it works when it comes to cloud manager. You are essentially going to have two different code repositories. They’re always in sync. They’re always the same but one is used for what we call cicd or continuous integration or continuous development and one is where you’re going to do your work and that’s typically owned by your organization. So on the left here on the powerpoint you’ll see your customer get. So that’s where you do your prs, mrs, whatever you want to call it and once you’re ready that branch gets pushed to the cloud manager. Typically there’s two main branches. One is called the develop branch which goes to your dev environment and then one you can call master main release whatever that there’s depends on how you do it today and that will go to your stage environment and eventually it will go to your production environment as well. Now you have already deployed your code. How do you debug it? So the next demo that I’m going to take you through is through cloud manager. We will look at how to debug, how to download different log files as well as your developer console. On your local console represents your system console so when you go in there and we can compare the two as well as we go through the different functionality. So let’s go ahead and do that. I’m gonna go back to my experience.adobe.com. I am going to the experience manager, cloud manager. We have a whole bunch of programs here. I’m just gonna focus on my RDE. So once you have an instance or once you go under your overview you’re gonna see all of your environments. So in this case I have my stage environment, my dev environment. So typically as I said before the dev environment is where the dev branch is gonna go. The stage and the prod environment will take from the same branch because they’re actually sequential steps. It will deploy to stage then it’s going to deploy to production.

I also have an RDE. So if you go into the instance in question and you click on the three dots here you’re gonna find download logs. If you click on download logs it will give you access to your typical author publish and dispatcher. So you can go in and let’s say I want to have the log files for author and then voila you can just download the error log and then just like that you’re able to have that log and then you can go in and do your debugging. What’s more interesting is once you start going into the developer console. So the developer console gives you access to a lot of things actually. So like I said the developer console is a representation of what you would see today as your local host system console. So everything that you do in here so when you go into OSGI configurations for example there is a parallel to that. You go in here and then you’ll have your configurations. Same thing with bundles, same thing with components. So let’s take configurations as an example. So you can click on configuration you can get the status and what this will do is it will generate a file with all the configurations. Now keep in mind that you can actually search specific configuration. So let’s say I’m looking for mail. So it will show you everything that has mail services. So it sort of lessens instead of having to go through all the PIDs you can find the one that you want. You can also download it in text format. Same thing when it comes to bundles you’re able to download all the bundles etc. So that is pretty much it about status like I said it can cover bundles, components, configurations, indices etc. Another very important part is when it comes to the repository browser. So the repository browser is the parallel of CRXDE. This was a nowhere enhancement because for the longest time you couldn’t see CRXDE especially on the lower on the higher tiers so your stage and your production. But now you have access to it so you can actually go under your content, users, home, everything here. It’s anything that you’ve had access to through CRX in the past you now have access to it again. Okay so that is pretty much it when it comes to your developer console and your download logs. Other things to note if you look in here like I said you have all of your different environments from prod all the way to your RDE. So this was a quick overview on the different environments and how the environments look like within the cloud manager. We also have under environments more details about each one of them. You can also add configuration variables for each one of those environments under configuration you can add the different configuration values. You also have the pipelines which is your CI CD so it allows you to create different pipelines to deploy to different instances. You have repositories so remember when I mentioned you should have two different repositories one is owned by yourself one is the Adobe repository so that’s where the Adobe repository gets created and maintained. Okay so this is where the fun really starts when we start talking about I O or Adobe I O. So Adobe I O is many things it’s essentially a collection of APIs a collection of services events it’s a lot of things all at once that allows Adobe and Adobe technologies so think of something like Adobe Sensei think of something like Adobe Smart tagging to images etc. It uses Adobe I O.

In our context today we’re going to use it to give us access to the developer console to have a unified interface for managing API integrations so essentially we’re going to use it to create our RDE be able to connect to the RDE once we know what that is. So to help you set up these are the first set of commands that you would need to start so first of all you actually have to install Adobe I O. Keep in mind that it’s required to have no JS in order to install Adobe I O. I O off login and logout would allow you to essentially log into your organization and log out from your organization. Once you do so you can then list the different orgs that you have and select whichever org so these are the different commands and we’ll go through them and we’ll actually test them right now. Once we have your Adobe I O all set up you go to the next part and the next part is the RDE or the rapid development environment. So what’s the RDE for? Now keep in mind that you typically have three different environments right so your prod your stage and your development environment and these are very static they’re very essential for the business so you start and then you push to your development branch that deploys the dev you have some typically developers in QA testing then you’ll push the stage where UAT gets involved and eventually you go to production.

The rapid development environment allows you to have an environment that is like dev that’s like stage but it’s for you you can go and deploy whatever you want it’s a lot quicker it doesn’t have to go through the container being rebuilt it doesn’t take 20 minutes it literally takes seconds and I’ll show you a demo right now so if you want to test a specific feature really quickly you can just push the code to the RDE go in and test it and voila you’re done but once you go through the demo it’ll make more sense it’s actually pretty cool. So again there are some commands that I put here in the powerpoint for your reference so it shows you how to install the actual package so the actual cloud manager package as well as the RDE plugin and the last command which is the most important out of the bunch is how to install code. Okay so let’s go through that demo as well now so now I am in my skill exchange demo which is my code repository so like I said if I want to know so I’m assuming that I’ve already installed my AIOC Li so I’m ready to write my commands so I can go and list out the different environments so this will do is it will show me all the environments that I have access to including my organization ID etc in order to get to this point though you have to set it up and in order we’ve already set up Adobe IO we’ve downloaded it we’ve installed the plugin we now need to connect the Adobe IO to our organization there’s a couple different ways you can do this the easiest way is through what we call a config.json so you create a config.json in it you’re going to have a client ID client secret JWT payload which would be downloaded from your Adobe IO console and then this last one is static that’s just the link to the token exchange where do you get the client ID and the client secret the client ID and the client secret are actually right where the instance is so if you go into your instance you will see your program ID is right here and your instance is right here so these are the numbers that you would need to use in my case it’s 100428 for my program and then 1144773 for my environment once I have that set up I can then like I said do the listing and you set them up by using your JWT auth authentication so make sure that those are in your JSON files and once that’s done you’re connected so in order to understand the status of your RDE you would use the following command it’s RDE status and what this will do is it’s going to go into your program it’s going to check the current status of your RDE and as you can see it showed everything that has to do with this RDE what code is being installed etc so once we confirm that our RDE is working now let’s start playing around with it so now let me show you a quick demo so we have like I said we’re going to be using the hello world component I am going to go into my code base and I’m just going to add another sentence here hello demo test to show the code being pushed so this is right in the hdl file so the short way is you can actually deploy one file at a time so I can just go install the file and you have to tell it where it actually lands when it comes to the jcr and then hit enter and what this will do is it’s going to upload the file as you can see it’s applying the update so we’ll wait for it okay now let’s go test and see if our new sentence is there here we go that’s to show the code being pushed now do you have to do it one file at a time no you can actually do it using the whole zip right so you can do install the entire zip just by aiming at the target so make sure you even clean package it will package it you can do the same thing even for the java files so if you want to do java changes you can go ahead and do the java change so in this case it says hello world demo showing upload and then the command accordingly will be aimed at the java file so first of all we need to go to core we’re going to do an even clean package to compile the java files and then from there we are going to go ahead and install the target jar so we’re going to go to aio target and then the jar so what this will do is we’ll upload the jar with all the java code install it there you go let’s see the final result here we go so it’s very rapid you no longer have to wait for a full deployment and that brings us to the end of this presentation so thank you for listening and watching and i am waiting for your questions excellent thank you so much ramy uh it’s great to have you here live thank you thank you for having me again absolutely so amazing to see that we have some great audience questions coming through so let’s dive right into them awesome the first question is from tino and it is what are thoughts on am compose and then there’s a github hyperlink we’re currently checking how usable it’ll be in our daily development tasks and so far it looks like an easy way to set up a dev environment including local publishing yeah that’s that’s a fantastic question i am pro things that would make your life easier um whether it’s an ide plugin that automatically deploys to aems i intelligent for example has one um essentially yes go for it the things that you want to be careful with is one if you notice it’s archetype related right so right now it’s up to 43 uh out of the documentation quickly just make sure that that’s the archetype that you want to go on um the second thing that i truly recommend is um remember way back in the day before they gave you a calculator they had to teach you what long division looks like and it was a pain it’s the same idea it’s good to use a tool that speeds up the process makes your life easier however it is also very good to understand the fundamentals so yes go ahead and use it just make sure your developers also understand the fundamentals excellent thank you our next question is from manav and it is is that your recommendation that refers to why two git repositories instead of just one git repository yeah so what this takes us back to is what does what right um so in a typical development environment you have your sort of continuous integration so you have multiple developers let’s go with a user example so you have four developers these developers are working on a new branch on your git repository so there is pull requests or merge requests that are happening these all this code is being merged with a singular instance or a single branch of the repository and you’re doing your local testing between all these five or four different developers until it’s ready to move on that is your own repository so that’s the company’s repository which is different from what adobe provides what adobe provides is a git repository for the deployment so can you have all these developers go directly to your adobe repository and just ignore it on your own yes it is not recommended for multiple reasons first of all you’re given all these developers access to your cloud manager which means all of them can deploy you’re essentially giving um um i’m pro having more security than anything else so you’re given them more power than they should have um you won’t have the ability to do prs or mrs so essentially do everything until the code is approved to be deployed on your own repository once it’s ready just push it in and deploy it that’s really what the git repository of adobe is meant for it’s to deploy to your different environments excellent thank you uh we now have two questions that are slightly related so i’m going to ask them both to you ramy uh the first one’s from karthik and it is are there any options for university students to get am sdk files for learning and practice and related to that is there a way to create a cloud manager sandbox to browse and learn more about pipelines and developer console okay so um interesting questions let me split this into two different hats right so am as a product let’s put that aside but let’s look at it as aem as building blocks um so am is based on dova on the back end right so there is sling models sling resource types everything on the back end even the even the jcr um there is um even cms is open source cms that are based on the jcr so anything that has to do with open source you can go in and learn right there is nothing stopping you from learning htl or css or sas or whatever how things compile um the product holistically however in order to get an sdk that requires a license um so the answer is yes and no you can learn everything about am whether it’s through experience um experience league open source products you can even do the certification but in order to have the actual gtk you would have the sorry the sdk you’d have to have the actual license with adobe um similar with the sandboxes um there’s no beta sandbox or like a trial sandbox however keep in mind and you’ve probably heard the word franklin before um which is sort of the next evolution to cms that is open source you can actually go in and and download franklin be able to push code test it on a on a demo domain as well um using and i won’t go there because it’s a little bit out of scope from this discussion um but it’s sort of an extension to am as a cms so that’s something you can go in and definitely um experiment with excellent thank you for answering those questions ramy and uh one of the resources you touched on experience league i will be discussing a little bit more uh towards the end of this session so thank you for that the next question is a best practice question so here we are what is the best practice using adobe io plugin to push changes from local repository to the am jcr or using vs code plugin am sync to sync the code into am um the answer the answer is um is either i i don’t think there’s a best practice on how you use your id i don’t think there is a best practice on how you do your development well overloaded no there are things you don’t want to do when you’re doing development however it’s it’s all about your comfort zone me personally i typically if i’m doing my development on my local environment um i don’t even use the the sort of the plugins for vs i actually will do the maven clean install on the specific set of things that i’m working on so let’s say if it’s under the core so the java core i’ll just do the maven clean install to that if it’s on the front um it it really depends on what your cycle is at the start when the code repository is fairly small and you have like 10 unit tests you can do it on the whole repository as things expand you might want to target what you’re trying to deploy um but like i said i am pro things that make your life easier when it comes to the development cycle so honestly let me give you an example i don’t use intelligent i tried before and i couldn’t ask for someone reason it didn’t work out for me i use vs code that doesn’t mean that one is better than the other it really depends on sort of your the life cycle of development that you like excellent thank you our next question is from vamsi and it is do you need to run maven clean install every time you make a change in a front-end folder or is there a specific way to run a single file for example js or css under front-end folder it would keep in mind that when you’re when you’re doing the deployment um it’s it’s based on maven so it’s based on pom files so even if you do the change on a single file within that pom file or that portion of the project you would have to do the maven clean install on an entire front end essentially now keep in mind that there are plugins from the earlier question there are plugins that have listeners like npm listeners that will go in and as you’re doing these changes it would automatically push that change to am as well so that’s another option so if we feel like okay i do 200 different css changes and every single time i have to do maven clean install that will get tedious then look for one of those plugins and it will definitely help again depends on your id they’re different excellent i i saw a question come in uh from murloc regarding um migrating from am managed service to the cloud i just wanted to address that it’s not a question for you ramy but murloc if you stay tuned for our next session from brett that is what he’s going to discuss is all about migration so stay tuned for the next session but for you ramy our next question is is there a way we can find out the archetype of the existing project yes um if you’ve done correctly underline um every time you actually run an archetype there’s a properties file right under the main folder and in there it will show you the command essentially the command that was used so in there you will find the version of the archetype as well look at that we’re just rolling through these questions keep them coming audience these are great our next question is can we use the cli deployment for prod also won’t it override the rule set for cicd so i want to make sure that i understand correctly so you want to use command line deployment to deploy to prod um cloud manager so in order to deploy to am as a cloud service because it is a containerized system so let me just draw the line between ams actually there’s three right so you can have your on-prem in which case it’s for your game you can actually write command lines i don’t know you can have scripts within your devops whether it’s microsoft or otherwise um in order to do the deployment at the end of the day you’re creating an artifact it gets uploaded and installed with ams um you can if you have access we typically don’t give administrative access when it comes to prod or stage so you still have to go through the pipeline or have a cap process with your csc ams cloud service is a different story though because it is containerized there are containers that get destroyed and rebuilt your only way of deployment to a container to ams a cloud service when it comes to actually all of the tiers not the rde the rte the rde is a different story it was meant to give developers more power and faster deployment it has to be done through the pipelines so you would have to go in and set up a pipeline to deploy a specific branch to your dev environment another branch to your stage and production cli would not be involved in here um however in cloud manager there are triggers that you can use so i did this for a couple of my clients where let’s say as soon as they push the code to their own get repository um once it passes its own internal build on jenkins it would push that code to the adobe repository that then automatically triggers a build to your stage environment for example and then hooked it up all to teams to give us notifications so that’s just a quick example of what you can do excellent we have time for a few more questions which is great uh so the next question is um can we install third-party packages with aio i would like a little bit more details on that question it depends on what type of package um also with these questions if you want to reach out to me after we can we can definitely talk and see what we’re trying to do absolutely or if you’d like to expand upon your question in the chat that would be great too we’ll try and come back to it so um our next question is how can dispatchers immutable files be managed in case of using cloud manager deployment pipelines so here’s how it works when it comes to the dispatcher there’s a reason you have files you cannot touch and files you can’t touch anything that you cannot touch you simply will not be able to touch it’s it’s it’s very system focused um so for example there’s the default files and it will actually say in there so if you if you used archetype well you have to use archetype and once you see the dispatcher files some of them will clearly state don’t touch this file create your own and then it will be included whether it’s through a sim link or the file directly etc um so again i wouldn’t say you need to manage the file if it is immutable if it’s not to be changed you just simply can’t manage it you only manage immutable files that can change thank you our next question is from rajarshi and it is is there any way to configure uh configuration in aem like csrf which sometimes is a little buggy when you create a factory configuration i will need a little bit more details on that one as well i’m not really sure what you’re like the relationship between csrf um and what what defines bugginess so if you want to expand on that question it’ll be great as well awesome no problem uh we have time for maybe two or three more questions um which is great because we have a couple more we can answer here um can we use the archetype to add a new site to an existing project yes okay so that will take us to a little bit of a different avenue if i understand the question correctly um if you’re thinking multi-tenancy in which case you have multiple code repositories deploying to the same am instance um so you can do that um now again keep in mind that when it comes to am as a cloud service you can only have a singular artifact being deployed so you can only deploy as single code repository as single branch now there are ways around it where um actually i’ve done think what like a year ago maybe we’ve discussed how you can use git to have multiple repositories eventually become a single repository and deploy my recommendation depends on the complexity of the project so let me put it this way let’s say you have a an older project that has been running for a while and then you want to add a new project so a new directory so slash app slash project one versus slash app slash project two um and you want to use a newer archetype by recommendation is create the new archetype migrate the code the existing code from the current repository to use the new archetype as well because that forces proper dependencies proper structure you get to use all the new ui front end and all this good stuff that they have um another option would be like i said and i’ll probably find that the recording as well where you can actually have multiple repositories eventually merge into a single repository that gets deployed into am as a cloud service all right i think we have time for two more questions um the first is how do you deploy front-end code to the development environment um when you say development i’m thinking you’re thinking of the rde um that’s actually part of the command set for adobe aio um so you can like i said you can deploy you can honestly deploy a css file an html file a jar file etc um so that would be part of the list of the commands for adobe iO um and yeah that’s that’s really it if you’re thinking for your local instance it’s maybe clean install to the ui front end and yeah that’s it excellent well this will be our last question so again ramy thank you so much for being here uh how can i troubleshoot and debug issues that arise during the deployment of am applications in a cloud environment um there are multiple ways you can do this now keep in mind that will come a point where you probably would need to create a ticket but every time you do a deployment there is a set of errors that will get created to the deployment and it depends on which level of the deployment you’re in so once the deployment starts really what you’re doing is you’re doing a maven clean install that maven clean install what it will do for you is it will create the artifact but at the same time it’s running tests right it is running ui front end tests as well if anything fails if any of those tests failed or let’s say you have a dependency or any issues that will cause it to fail there’s a csv that gets created there is an actual log that gets created that you can go through and go through everything in there to make sure that it works properly um part of it could be as simple as you’re not matching the 50 recommended unit tests so make sure that you have enough unit tests in there um especially when it comes to the sdk because these updates happen automatically uh different discussion i won’t derail um now going from there you go into the next step which is now that i have the artifact let’s create a new image a new container essentially with that new artifact as well um there are reasons for it to fail sometimes when it comes to the dispatcher for example it will go through the checks and balances i’ll think everything’s okay but then when the dispatcher starts to deploy it fails um also there’s a log in there if you can’t find anything just create an adobe ticket they should be able to help you as well awesome well thank you so much that was the last question for you ramy so really appreciate you being here and as always it’s awesome to have you share your insights with us awesome always thank you so much for having me