You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In devcontainer.json you'll see that I'm specifying a network. That's so the devcontainer and the Docker services can communicate with one another. For instance, from a shell within the devcontainer I can connect to the service running the Postgres test database.
29
+
In `devcontainer.json` you'll see that I'm specifying a network. That's so the devcontainer and the Docker services can communicate with one another. For instance, from a shell within the devcontainer I can connect to the service running the Postgres test database.
30
30
31
31
I also have some mounts so that
32
32
33
33
* git can authenticate with GitHub using the SSH agent on my laptop (the host machine)
34
34
* devcontainer can communicate with the host's Docker daemon
35
35
* the AWS credentials and configuration are available within the devcontainer.
36
36
37
+
### NOTE
37
38
38
-
39
-
### Frontend
40
-
41
-
How to run the frontend app:
42
-
43
-
1.`cd frontend`
44
-
1.`npm run start`
45
-
1. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
46
-
47
-
### Backend
48
-
49
-
How to run the backend app:
50
-
51
-
1.`cd backend`
52
-
1.`npm run dev` (The backend uses port 3000.)
53
-
54
-
## Building for Production
55
-
56
-
### Frontend
57
-
58
-
1.`cd frontend`
59
-
1.`npm run build` (The build artifacts will be stored in the `dist/` directory.)
60
-
61
-
### Backend
62
-
63
-
1.`cd backend`
64
-
1.`npm run build` (compiled app will be in `dist/`)
65
-
66
-
## Running unit tests for frontend
67
-
68
-
TO COME. Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
69
-
70
-
## Running end-to-end tests
71
-
72
-
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
73
-
74
-
## Further help
75
-
76
-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
77
-
78
-
## Run SSH Tunnel in Background
79
-
80
-
- Using port 5433 in order not to conflict with local db using standard 5432.
DB credentials and URLs are in `.env.local` and `.env.development`. Set the environment to be used: `export NODE_ENV=local` or `export NODE_ENV=production`.
88
-
89
-
Maybe obsolete:
90
-
91
-
You need an SSH tunnel to be able to run the migrations on the db in AWS. Check for a tunnel by using `ps aux | grep ssh`. It will look something like
92
-
39
+
I'm having a peculiar issue with bind mounts in `docker-compose.yml` when I try to use a relative reference. For example, the following *should* (I believe) bind the `backend` directory within root directory of my app (`interview-prep`) in the devcontainer to the `/app/backend` directory within the backend service:
The path /workspaces/interview-prep/backend is not shared from the host and is not known to Docker.
51
+
You can configure shared paths from Docker -> Preferences... -> Resources -> File Sharing.
52
+
See https://docs.docker.com/desktop/mac for more info.
53
+
```
54
+
That error isn't helpful, as `workspaces` isn't even a "real" directory and can't be added to shared paths. In any event, I wouldn't want every user of a project to have to specify a directory on his or her host machine; a devcontainer shouldn't require that. I can get around the error by supplying a full, absolute path, e.g., `/Users/davidsilva/Dev/interview-prep/backend:/app/backend`, or by doing what I'm doing until I can figure out the relative directory thing -- namely, setting an environment variable in `devcontainer.json`,
55
+
```json
56
+
"remoteEnv": {
57
+
"HOST_PROJECT_PATH": "${localWorkspaceFolder}"
58
+
},
59
+
```
60
+
and using `HOST_PROJECT_PATH` in `docker-compose.yml`:
61
+
```yaml
62
+
services:
63
+
backend:
64
+
volumes:
65
+
- ${HOST_PROJECT_PATH}/backend:/app/backend
95
66
```
96
67
97
-
# SSH into Bastion Host
98
-
99
-
The security group only allows SSH connections from my VPN IP address.
100
-
101
-
-`ssh -i <PATH TO KEY-PAIR PEM> [email protected]`, where `107.22.66.121` is the IP of the bastion host.
- Example command: `\d products` (output the structure of the "products" table).
107
-
108
-
# SSH into `interview-prep-app-instance` via Bastion Host
109
-
110
-
- Start ssh agent if it isn't already running: `eval "$(ssh-agent -s)"`.
111
-
- Add private key to the ssh agent: `ssh-add <PATH TO KEY-PAIR PEM>`.
112
-
- SSH into the bastion host with agent forwarding: `ssh -A -i <PATH TO KEY-PAIR PEM> [email protected]`, where `107.22.66.121` is the Elastic IP of the bastion host.
113
-
- SSH into app_instance `ssh [email protected]`, where `10.0.5.216` is the private IP address of `interview-prep-app-instance` (`i-06ce4967201932411`).
114
-
115
-
# How to Find Private IP Address of an EC2 Instance
116
-
117
-
`aws ec2 describe-instances --filters "Name=tag:Name,Values=<NAME OF YOUR INSTANCE>" --query 'Reservations[*].Instances[*].PrivateIpAddress' --output text`
118
-
119
-
# Steps to Dockerize Angular App, Push to AWS ECR Using AWS Copilot
120
-
121
-
- User/profile with AdministratorAccess. Options: Temporarily give the default user AdministratorAccess; create such a user for occassions like this; or (this would be hard) figure out exactly all the individual permissions you would need and create a user just with those permissions.
The frontend app, which uses Angular 18, is pretty simple: featurewise, it allows listing, creating and editing users and products.
180
71
181
-
# Remove Unused Docker Volume Usage
72
+
What are some technical aspects of Angular, Angular Material and RxJS that it demonstrates?
182
73
183
-
`docker network prune`
74
+
* [Built-in flow control](https://blog.angular.dev/introducing-angular-v17-4d7033312e4b), e.g., @if vs *ngIf. It's more readable and supposed to be more performant. New in Angular 17.
75
+
* [Angular Material 3](https://material.angular.io/guides) components.
The backend app uses NodeJS and Express to provide a REST API for getting, creating, updating and deleting products and users in a Postgres database. It uses Joi for validation. I added some middleware for handling errors and logging.
190
91
191
-
`docker volume inspect <VOLUME NAME>`
92
+
The PostgreSQL database is created using the official PostgreSQL Docker image. Environment variables can be provided from `.env.local` following the example of `.env.example`.
192
93
193
-
# Run Frontend Tests
94
+
Jest is used for testing.
194
95
195
-
`docker-compose --env-file .env.local up frontend-tests`
96
+
## Shared
196
97
197
-
Or to do a build, too:
98
+
Both the frontend and backend apps use an NPM package `@onyxdevtutorials/interview-prep-shared` that defines TypeScript interfaces for `product` and `user`. The source code for the package is in `shared`.
198
99
199
-
`docker-compose --env-file .env.local up --build frontend-tests`
100
+
## Workflow and Continuous Integration (CI)
200
101
201
-
Or:
102
+
`.gihub/workflows/ci.yml`runs the frontend and backend tests when there are pushes to or pull requests on specified branches. The results can be viewed in the GitHub UI.
`docker-compose --env-file .env.local up frontend-tests`
106
+
Prerequisites:
206
107
207
-
# Run Backend Tests
108
+
* [Docker desktop app](https://www.docker.com/) installed and running.
109
+
* [VSCode](https://code.visualstudio.com/) with the [Dev Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
`docker-compose --env-file .env.test up backend-tests`
111
+
1. Command-P and choose Dev Containers: Clone Repository in Container Volume...
112
+
1. Specify this repo and choose the Development branch.
113
+
1. Create `.env.local` and `.env.test` files based on `.env.example` and customize the values as necessary.
114
+
1. Open a terminal and run `docker-compose --env-file .env.local build`.
115
+
1. Run migrations to set up the database tables: `docker-compose --env-file .env.local up migrate`
211
116
212
-
Run outside of Docker container:
117
+
## Run the App
213
118
214
-
`npm run test`
119
+
1. `docker-compose --env-file .env.local up frontend` (The dependent services should come up automatically.)
120
+
1. Load `http://localhost:4200/` in a web browser. You should be able to add new users and products, edit them, and list them.
215
121
216
-
Could run in the background or in separate shell to have HTML reports loaded (and reloaded) in web browser:
122
+
## Running Tests
217
123
218
-
`npm run serve:report`
124
+
### Backend
219
125
220
-
# Shared
126
+
1. `docker-compose --env-file .env.test up backend-tests`
221
127
222
-
## Update, Build and Publish
128
+
To view test and coverage reports in a web browser:
223
129
224
-
1. Increase version number in `package.json`.
225
-
1.`npm run build`
226
-
1.`npm publish`
130
+
1. Bring up the backend with `docker-compose --env-file .env.test up backend`
131
+
1. In a separate terminal window, `cd` into `backend`.
132
+
1. `npm run test:coverage`. That will run all the tests and a coverage report.
133
+
1. `npm run serve:report`. This will bring up a pretty web page at `http://localhost:8080/` where you should be able to look at test and coverage reports.
227
134
228
-
#Run the Whole App in Docker Locally
135
+
#### Note
229
136
230
-
Everything except the tests will run because frontend is dependent upon backend, which is dependent upon db.
231
-
`docker-compose --env-file .env.local up --build frontend`
137
+
I thought it would be nice to have a *live* web display of test results and coverage but that's problematic. Practically speaking it's probably best or easiest just to run `npm run test:watch` as you make code changes; that will present the familiar terminal based interface to give you feedback on particular code you change and tests you write.
232
138
233
-
#Database
139
+
### Frontend
234
140
235
-
With `interview-prep-db-1`up and running, you can access the db via psql using...
141
+
1. `docker-compose --env-file .env.test up frontend-tests` (At the moment I don't have any pretty web reports set up.)
Tests can also be run in watch mode so that they will be re-run as you make changes to code and tests:
238
144
239
-
## Run Migrations
145
+
1. `docker-compose --env-file .env.local up backend` (to bring up the backend app and the db).
146
+
1. `cd frontend`
147
+
1. `npm run test:watch`
148
+
1. In another terminal, `cd frontend` and `npm run start` (now tests will be re-run and you can see changes reflected in the web browser as you make changes to code and tests).
240
149
241
-
`docker-compose --env-file .env.local up migrate`
150
+
## Version History
242
151
152
+
### 0.0.0
153
+
- Created a frontend app with views for adding and updating users and products, with services to talk to the REST API of the backend.
154
+
- Created a backend app to persist users and products in a PostgreSQL database and provide a REST API for the frontend.
155
+
- Created unit and integration tests for frontend and backend.
156
+
- Dockerized the application and set it up to use a devcontainer.
157
+
- Created a GitHub workflow to run tests when there push to or pull request on development, stage or production branches.
0 commit comments