If you’ve been following our step-by-step AWS Amplify blog series, the groundwork of your full stack web application should be completed. A strong foundation is integral if you want to build anything of value, so if you’ve skipped the previous few articles, chances are there’ll be cracks in the groundwork. Up to speed? Fantastic! By now, you should have a sturdy structure on which to build your application, and we can move on to the app layout and frontend presentation.‍

Getting Started‍

Angular is an application design framework and development platform which allows developers to easily create rich and efficient single-page applications. Our application is going to be an Angular app, and since our focus is on saving app development time, we’ll be using an admin template by CoreUI to simplify the layout and frontend presentation code. 

Let’s start by creating a new branch for adding the CoreUI for Angular template.

git checkout -b feature/coreui-admin-for-angular 

‍

Our application should already be set up with a repository, so the next step will be to extract the CoreUI for Angular template files to our project repository, instead of cloning the repo. 

Proceed to the GitHub page and download the zip version of the source files containing the CoreUi Angular template source code. 

After successfully extracting the files and copying them to your project folder, install the node modules and serve the app.

npm install 

ng serve --open 

‍

At this point you’ll be presented with the CoreUI for Angular admin template. We’ll be using this template for all our frontend views, so set aside a few minutes to poke around and familiarise yourself with it.‍

Wrapping Up‍

After familiarising yourself with the template, we can proceed with committing and pushing the newly added angular app to the repository. Most of these files will be new, but it’s always a good idea to deploy and create pull requests to see the changes that were committed, ultimately mitigating the risk of potential merge issues. 

git commit -am "Add CoreUI for Angular template" 
git push --set-upstream origin feature/coreui-admin-for-angular 

‍

Merge the files back into the develop branch and delete the feature/coreui-admin-for-angular branch.

git checkout develop 
git merge --no-ff feature/coreui-admin-for-angular 
git branch -d feature/coreui-admin-for-angular 

Where To From Here? ‍

Utilising Angular admin templates significantly cuts development time without having to sacrifice compatibility and overall app aesthetics. Our next post will focus on the process of adding backend and frontend authentication to full stack apps, so be sure to subscribe to our newsletter and stay up to date with our latest posts.