Summary
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.
I took the guestbook (https://nickvanhoof.com/a-lambda-guestbook) and decided to also make it available as an Angular app here.
As usual you can find the source code on Github : https://github.com/Nxtra/angular-simple-guestbook.
About
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
Dockerfile
FROM nginx:alpine COPY nginx.conf /etc/nginx/nginx.conf WORKDIR /usr/share/nginx/html COPY dist/ .
nginx.conf
worker_processes 1;
events {
worker_connections 1024;
}
http {
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html/guestbook;
index index.html index.htm;
include /etc/nginx/mime.types;
gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
location / {
try_files $uri $uri/ /index.html;
}
}
}
Build and Run
build files:
ng build --prod
build image:
docker build -t guestbook .
run container:
docker run -p 4200:80 --name guestbook guestbook
exec into the container :
docker exec -it guestbook /bin/sh
