[US] Dockerize PostGOAT

[Alexicazana]

MoSCoW	Risk	Story Points
Must	High	13

Acceptance Criteria

Risks

• Requires reorganization of part of the stack's architecture (microservice-adjacent ish)
• Need to have solid understanding of Docker - creating an image to publish on Dockerhub and to be used by others (fault-free)
• Can be hard to define the expected behaviour since we are not yet super clear on the other moving parts (eg Postgoat website documentation and deployment, containerizing the application so that an application configurator may use it appropriately; how does an app configurator truly expect to use the platform?)

Pre-requisites

• Meet with the stakeholder to clarify the requirements
• Understand the types of users that will be involved - define their roles, what permissions do they have?
• Read Dockerization documentation (see links below) to ensure proper creation and deployment (risk of having to fix this later can have heavy consequences)

Tasks

• Read Docker docs about dockerizing a full stack app (https://milanwittpohl.com/projects/tutorials/Full-Stack-Web-App/dockerizing-our-front-and-backend)
• Create Dockerfile to define dependencies, base image, and any necessary configurations
• Create a self-contained docker image that has the front end deployed on it as well as all the required tooling (.sh scripts, and volume access to the "usecases") (created from dockerfile that uses an official base image + everything else needed)

[Alexicazana]

Technically, the new dockerfile should be correctly written, but there is a lot of confusion relating to the way the new dockerfile should overlap with the existing dockerfile for the other three services using containers. The dockerfile as is should technically live in the root of the application platform, but there's a bit of confusion with the compose.yml file... The other issue is that we have to copy the services existing on the development side for the application configurators, which raises a few concerns for me/creates a bit of messiness.

Note that I had a couple of issues relating to the other containers, which need to be replicated for the application configurator.

TLDR; I'm still figuring out how I should package this new docker service so that I can publish it to Dockerhub and then just churn out use cases by using this custom image. In the meantime, here's the dockerfile as is, so that there's at least some sense of progress visible:

[Alexicazana]

Second compose.yml with the new postgoat service added:

This needs additional integration and testing, as well as a better understanding on how to implement alongside existing compose.yml (existing containers).

[Alexicazana]

Last minute changes made to existing containers, need to resolve and account for this in new compose.yml for the new service

[Alexicazana]

Updates:

• Had to change dockerfile into a multi stage build; ran into a bunch of issues when trying to run npm run build (tsconfig and viteconfig were missing some stuff and had a couple of errors in them like the build target version; this took an entire day to debug as you can read in these GitHub issues about:
  Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1") vitejs/vite#6985
  vite build error -- Transform failed with 3 errors - Top-level await is not available in the configured target environment remix-run/remix#7969
  ). This along with having to modify parts of files that simply weren't respecting TypeScript rules and for which the dev environment was manually forced to allow, but this was not working during the build process obviously.
  -I'm getting somewhere but keep running into the following issue:
  

Working on a couple of fixes; here's a few breadcrumbs relating to the issues I am having:
moby/buildkit#4305
docker/buildx#1079

^Most recent update (4 days ago) on the issue...

[Alexicazana]

On the other hand, after almost two days of debugging, I finally managed to run a build to create JS out of all of our TS/TSX files locally! :D

This was the first step, because the image I have to create needs to be able to do this in a container, so it was necessary to get this working locally first.

[Alexicazana]

MAJOR UPDATES!

• The build files get created successfully, allowing the static web page to eventually be deployed using the minified js files inside of a folder called /build

• I finally managed to successfully create the image container:
  

• Got the container running!
  

Only issue is that it seems that the content of the web page is not displaying when I open localhost:8080 (it does however open correctly):

[lyubageorgieva]

This US is pushed to Iteration 9, since we are missing the demo video, as our Stakeholder requested to keep doing the videos for sign-off.

[TheOrangeDuke]

Looks good! Signing off!

[Alexicazana]

Included original software architecture diagram I had done for this story: