My main site was horribly outdated (I didn’t even update it for my last job search) so I spent last month modernizing it. Here’s a summary of the changes I made:
Creating an Angular Project
In order to migrate my website, I first needed to be accustomed to developing in Angular on my machine. Angular runs off of Node, so I used NVM to install Node. I used this page as a reference for installing and using NVM: https://github.com/nvm-sh/nvm/blob/master/README.md. Then, I used the instructions on https://angular.io/guide/setup-local both to install Angular on my machine and to initialize a new Angular project.
At some point I’ll figure out how initialize a Node project using Docker alone, without installing frameworks on my host machine beforehand.
Local Development Using Docker
After generating a
package.json file with the dependencies listed I set up a Docker container for hosting the Angular site on localhost while I worked on the code. I used a blog post for a reference for creating the Dockerfile and docker-compose file. Here is the final Dockerfile below:
FROM node:lts WORKDIR /app COPY . . RUN npm install CMD ["npm", "run", "start"]
Additionally, here’s the docker-compose file:
version: '3' services: angular-ui: build: context: ./web dockerfile: Dockerfile ports: - "4200:4200" container_name: angular-ui volumes: - ./web/src:/app/src
I had trouble exposing the Angular app, so I did some research and ran into this article. Long story short, I had to swap out the default
start method on the package.json with the following:
ng serve --host 0.0.0.0 --port 4200.
Switch from Bootstrap to Angular Material
I used Bootstrap as the design system on the previous iteration of the website. In a past attempt to upgrade the website, I tried combining Bootstrap with Angular but I ran into issues with the layout. I had a much easier time switching over to Angular Material to handle the styling.
Rather than spin up an Angular server, I hosted the website on a static S3 bucket with a CloudFront instance for handling the SSL and caching. In order to verify that the setup works, I tested the new website in a staging environment before pushing it to production. Years ago, I wrote a blog post for setting up AWS infrastructure for an image server, I just had to modify the instructions slightly to have it work for a static website:
- Turn on static website hosting on the S3 bucket by going to Properties > Edit static website hosting
- In CloudFront, set the origin domain to the web hosting domain (staging.dandelarosa.net.s3-website-us-east-1.amazonaws.com) instead of the S3 bucket itself
All of the code changes can be viewed on this pull request.