As a developer it is good to know about frontend and backend development.
Since I do mainly backend stuff during my day job, I decided to familiarise more with Angular.
As usual you can find the source code on Github : https://github.com/Nxtra/angular-simple-guestbook.
This angular app is using my guestbook-query lambda (more info: here) as backend. The app has a guestbook-component which is used to display the messages as cards. For each message that is returned from the call to the backend a bootstrap Card is created to visualise the content and the author. A message-service is used to make the call to the backend and turn the response into an array of json card objects that the component can use to build the cards.
Currently it is showing all messages of 2018 after July 1st. That is because the backend endpoint is configured this way. After building the app I dockerized it and deployed it on my ec2-instance.
It was nice to learn some more about the front-end world. If I find the time, I’ll add a second component to post messages to the guestbook. So that this page will be deprecated. But for the time being you can only check out the messages through this app and not post new ones.
Extra: Dockerize angular
Both the dockerfile and nginx.conf are in the root of my project
FROM nginx:alpine COPY nginx.conf /etc/nginx/nginx.conf WORKDIR /usr/share/nginx/html COPY dist/ .
Build and Run
ng build --prod
docker build -t guestbook .
docker run -p 4200:80 --name guestbook guestbook
exec into the container :
docker exec -it guestbook /bin/sh