Show AEM images and assets from a different server

Adobe Experience Manager (AEM) 6.5 is a great CMS and I absolutely love the features that it provides. One thing though, I have always struggled with is keeping my local environment’s content (assets, pages, and tags) in sync with the live environment. Particularly, AEM images are a hassle to keep them in the local environment because of the space it consumes.

Why AEM images are an issue to keep in your local environment?

In my project, we follow a regular practice of getting live content down to Stage and Development environment on a quarterly basis or on-need basis. Getting it to my local environment is mostly on-need basis. Even then, we get only the pages and tags and we hardly get the assets because of the sheer size that the package can become (we have multiple sites running)

So our local environment has the latest pages and tags but only a sprinkle of images here and there. So obviously, it doesn’t look like anywhere close to our live sites. It looks ugly!

It’s a bigger problem for the UI team. I have seen many of them choose to work directly in the development environment rather than in their local environment.

Does it sound familiar? Do you and your teammates also struggle with AEM images in your local environment?

Good! there is light at the end of the tunnel. Read on…

How can we resolve the issue with AEM images?

In the endeavor of solving this issue, I have searched for many solutions with zero success. Maybe, I am bad at searching (trust me, it’s a skillset). Unless you are using a virtual machine or something like that, you will always have size as an issue with the assets package.
This problem multiplies as the number of sites increase. Like my project has 50+ sites including regionals.

Of course, you could always give up and compromise or just simply ignore this as an issue. There are workarounds. Like, keep on pumping your local environment with all those GBs of assets. Or, work directly in the development environment. Or, start enjoying the ugly screens in your local so that you can appreciate the beauty of your live environment. It could be like smelling the coffee beans before trying out all the perfumes. Your choice, It’s a free world!

… or the solution could be simpler.

Steps to follow to fix AEM images issue

Get a browser plugin, which can take care of path redirection.

Logic: plugin captures the path of the images and then redirects it to a different server. So now, instead of serving the images from the local environment, you are serving it from some other server.

I followed the below steps:

Go to firefox web-store and search for “Redirector” add-on or click here
download and install the add-on to your Firefox browser
once installed, then go to “Edit Redirects”
Click on “Create new redirect”
“Example URL” field enter the final path that you want the add-on to create
“Include Pattern” field enter the regex of the path that you want to replace from your local environment
“Redirect to” field enter the domain path that you want to replace with
Select “Images” in “Apply to”
Now ensure the “Example result” that it generated would be the correct path that you desire
Save and load your AEM page

Let’s demonstrate the above steps with an example

My local server is at http://mylocal.aem.com and I want images (JPEG) to load from http://stage.aem.com

Open your local page and confirm that the path of the images being loaded are from your local server i.e. http://mylocal.aem.com

After you have installed Redirector (or any other similar functionality) plugin, open its configuration.

In “Include pattern” field let’s enter a regular expression, which captures the path of the images being loaded. So in my case, I want to include any URL pattern that starts with “/content” and ends with “jpeg”. Therefore I entered “./(content/./.*jpeg)”

In “Redirect to” enter the path of the server that you want to serve the images. So in my case, I want it to be served from “http://stage.aem.com” and “$1” means to copy the regex group as is. Therefore I entered “http://stage.aem.com/$1”

Selected “Images” in “Apply to” field

Ensure the “Example result” URL is now the same as “Example URL” that you had entered earlier. To be on the safer side, you should also copy and open this example URL value in the browser to ensure it’s being served correctly.

Redirector plugin configuration for loading images from Stage server

Save the configuration and load your page.

… And Bada bing bada boom … now all images should be loading from your desired server instead of loading from your local environment.

Additional information:

I found this plugin while I was doing some testing. For it, I had to load some JavaScript libraries from a different server. At the time, this solution didn’t click but like every great idea, this one clicked in the height of my frustration. I was downloading 1.2 GB worth of assets to my local.

Conclusion

Gone are the days of packaging all those assets and deploying them in your local environment and overloading it. The solution is simpler.

Now, you don’t need to love the thorn to appreciate the rose.

This solution is not restricted to AEM images or AEM for that matter. It can be applied to any platform where you need to serve resource from a different location. The possibilities are waiting to be explored by you.

Let me know in the comments below if you have a different way of handling this situation or a different approach.

If you implemented this solution in your project and that made your life a little happier, do share your joy in the comments below.

As always, let me know if you have any questions or queries.