Bootstrap your Alfresco Share Application with Angular 8

Hi, Y’all!

    This is my first blog! so I hope any naive statement could be forgiven. Being a fellow developer, I found it real tough grinding through web for customizing Share application with Angular 8 and I swear it was really difficult. Now that I have figured it out, I felt it should be shared so that anyone who comes across the same scenario doesn't go through the same phase. 

    

    Before we jump in to the deep concepts involved, you will need to have proper understanding on how SURF pages are configured in SHARE project. Following doc will help you figure out with all that is needed on understanding the concept. In our implementation this is an important aspect that will help us in achieving our end goal.

    As shown in the screenshot, we have created a surf page named index.ftl which will play the role of index.html(in Angular 2+ terms). If you have now got basic knowledge on how surf pages work then you have sailed through half distance of your journey.

The Angular Way!

    Now comes the most important part of this implementation - The Angular code

Folder structure

    As you know though Angular development is done with ts- TypeScript files, the build files that are generated are simply js files, which means we can make use of these files and load it as scripts in any of our HTML files.

    Your angular code configurations should be as follows, the build files that are generated can be kept as a static folder(dist) and provide the path as URL source path for scripts in the index.ftl file. This way you are incorporating your complete angular application build files into your surf page thus making your web client being run on Angular way.

    This image suggests the index file for angular code to be index.ftl, any reason? of-course YES! You can hard code hard-code the build files in local development as you wish but same cant be said for production build. Therefore you need a way of differentiating local development and production configuration. 

angular.json

index.ftl for local development

    Cache busting script files is key for any development if you plant any script files and hard-code the URL in index.ftl you will have a hard time trying to fix the latest changes in PROD build. So I came up with solution of maintaining two copies of index.ftl, one for local development which contains hard-coded URL's for script files and other without any script URL's(used in angular.json). 

    From deployment point of view you will need your index.ftl to contain all your script files loaded, this will be achieved by pointing your index file as index.ftl in angular.json config. In this way when the build is run index.ftl will be created with script files added and you make use of postbuild feature to move your newly created index.ftl into the original Surf page path(web-extension/site-webscripts/com/demo/pages)

    You may wonder how would cache issue be resolved? And the solution lies in angular-cli. We can make use of hashing feature to add a unique to each build generated file that will be referred in index.ftl and the deployment URL could be any cloud host that is supported by your hosting server.

    If this way of implementation is not your ideal way you can always lookup to ADF way.

Disclaimer: This is strictly a blog post based on my personal experiences with Alfresco Share project for own internal usage.