Skip to content

Commit ed7f2d5

Browse files
author
rehanvandermerwe
committed
docs: review
1 parent 3477e0e commit ed7f2d5

File tree

8 files changed

+110
-101
lines changed

8 files changed

+110
-101
lines changed

.husky/pre-commit

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
#!/usr/bin/env sh
22
. "$(dirname -- "$0")/_/husky.sh"
33

4-
npm run default
5-
npm run eslint
6-
node_modules/.bin/ts-node ./scripts/index.ts -c validate-src
7-
npm run build-jsii
8-
npm run docgen
4+
npm run pre-commit-check
95
git add -u

.projenrc.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const project = new awscdk.AwsCdkConstructLibrary({
1414
packageManager: javascript.NodePackageManager.NPM,
1515
releaseToNpm: true,
1616
npmAccess: NpmAccess.PUBLIC,
17-
repositoryUrl: 'https://github.com/rehan.merwe/serverless-website-analytics.git',
17+
repositoryUrl: 'https://github.com/rehanvdm/serverless-website-analytics.git',
1818
excludeTypescript: ['src/src/**/*'],
1919
devDeps: ['husky', 'execa@5', 'fs-extra', '@types/fs-extra', 'esbuild', 'yargs', 'esbuild-runner'],
2020
eslint: true,

README.md

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Serverless Website Analytics
22

3-
This is a CDK serverless website analytics solution that can be deployed to AWS. This construct creates backend,
3+
This is a CDK serverless website analytics construct that can be deployed to AWS. This construct creates backend,
44
frontend and the ingestion APIs.
55

66
This solution was designed for multiple websites with low to moderate traffic. It is designed to be as cheap as
@@ -14,7 +14,7 @@ You can see a LIVE DEMO [HERE](https://demo.serverless-website-analytics.com/).
1414
- The target audience is small to medium websites with low to moderate traffic (less than 10M views)
1515
- Lowest possible cost
1616
- KISS
17-
- No direct server side state
17+
- No direct server-side state
1818
- Low maintenance
1919

2020
The main objective is to keep it simple and the operational cost low, keeping true to "scale to 0" tenants of serverless,
@@ -24,7 +24,7 @@ even if it goes against "best practices".
2424

2525
### Serverside setup
2626

27-
> ⚠️ Requires your project `aws-cdk` and `aws-cdk-lib` > 2.79.1
27+
> ⚠️ Requires your project `aws-cdk` and `aws-cdk-lib` packages to be greater than 2.79.1
2828
2929
Install the [CDK construct library](https://www.npmjs.com/package/serverless-website-analytics) in your project:
3030
```
@@ -76,41 +76,42 @@ export class App extends cdk.Stack {
7676

7777
Quick option rundown:
7878
- `sites`: The list of allowed sites. This does not have to be a domain name, it can also be string. It can be anything
79-
you want to use to identify a site. The client side script that send analytics will have to specify one of these names.
79+
you want to use to identify a site. The client-side script that sends analytics will have to specify one of these names.
8080
- `allowedOrigins`: The origins that are allowed to make requests to the backend Ingest API. This CORS check is done as an extra
8181
security measure to prevent other sites from making requests to your backend. It must include the protocol and
8282
full domain. Ex: If your site is `example.com` and it can be accessed using `https://example.com` and
83-
`https://www.example.com` then both need to be listed. A value of `*` is specifies all origins are allowed.
84-
- `auth`: The auth configuration which defaults to none. If you want to enable auth, you can specify either Basic Auth or
85-
Cognito auth but not both.
83+
`https://www.example.com` then both need to be listed. A value of `*` specifies all origins are allowed.
84+
- `auth`: Defaults to none. If you want to enable auth, you can specify either Basic Auth or Cognito auth but not both.
8685
- `undefined`: If not specified, then no authentication is applied, everything is publicly available.
8786
- `basicAuth`: Uses a CloudFront function to validate the Basic Auth credentials. The credentials are hard coded in
88-
the Lambda function. This is not the recommended for production, it also only secures the HTML page, the API is still
87+
the Lambda function. This is not recommended for production, it also only secures the HTML page abd API is still
8988
accessible without auth.
9089
- `cognito`: Uses an AWS Cognito user pool. Users will get a temporary password via email after deployment. They will
91-
then be prompted to change their password on first login. This is the recommended option for production as it uses
90+
then be prompted to change their password on the first login. This is the recommended option for production as it uses
9291
JWT tokens to secure the API as well.
9392
- `domain`: If specified, it will create the CloudFront and Cognito resources at the specified domain and optionally
9493
create the DNS records in the specified Route53 hosted zone. If not specified, it uses the default autogenerated
9594
CloudFront(`cloudfront.net`) and Cognito(`auth.us-east-1.amazoncognito.com`) domains. You can read the website URL
9695
from the stack output.
9796

98-
For a full list of options see the [API.md](docs/API.md) docs.
97+
For a full list of options see the [API.md](https://github.com/rehanvdm/serverless-website-analytics/blob/main/docs/API.md#api-reference-) docs.
98+
99+
You can see an example implementation of the demo site [here](https://github.com/rehanvdm/serverless-website-analytics-test)
99100

100101
### Client side setup
101102

102-
> ⚠️ IMPORTANT! **After** the client sent the first data, you have to click on the "Add Partitions" button in the
103-
> frontend to auto discover and add the site, month, day partitions. Otherwise, the data will not show up in the charts.
103+
> ⚠️ IMPORTANT! **After** the client sent the first page data, you have to click on the "Add Partitions" button in the
104+
> frontend to auto-discover and add the site, month and day partitions. Otherwise, the data will not show up in the charts.
104105
> This operation has to be repeated at the beginning of every month.
105106
106-
Install the [client side library](https://www.npmjs.com/package/serverless-website-analytics-client):
107+
Install the [client-side library](https://www.npmjs.com/package/serverless-website-analytics-client):
107108
```
108109
npm install serverless-website-analytics-client
109110
```
110111

111112
Irrelevant of the framework, you have to do the following to track page views on your site:
112113

113-
1. Initialize the client only once with `analyticsPageInit`. The site name must correspond with one that you specified
114+
1. Initialize the client only once with `analyticsPageInit`. The site name must correspond with the one that you specified
114115
when deploying the `serverless-website-analytics` backend. You also need the URL to the backend. Make sure your frontend
115116
site's `Origin` is whitelisted in the backend config.
116117
2. On each route change call the `analyticsPageChange` function with the name of the new page.
@@ -145,21 +146,26 @@ app.mount('#app');
145146

146147
The architecture consists of four components: frontend, backend, ingestion API and the client JS library.
147148

148-
![serverless-website-analytics.drawio.png](docs%2Fimgs%2Fserverless-website-analytics.drawio.png)
149+
![serverless-website-analytics.drawio.png](https://github.com/rehanvdm/serverless-website-analytics/blob/main/docs%2Fimgs%2Fserverless-website-analytics.drawio.png)
150+
151+
See the [highlights](https://github.com/rehanvdm/serverless-website-analytics/blob/main/docs/CONTRIBUTING.md#highlights)
152+
and [design decisions](https://github.com/rehanvdm/serverless-website-analytics/blob/main/docs/CONTRIBUTING.md#design-decisions)
153+
sections in the [CONTRIBUTING](https://github.com/rehanvdm/serverless-website-analytics/blob/main/docs/CONTRIBUTING.md#design-decisions)
154+
file for detailed info.
149155

150156
### Frontend
151157

152-
AWS CloudFront is used to host the frontend. The frontend is a SPA Vue 3 app that is hosted on S3 and served through
158+
AWS CloudFront is used to host the frontend. The frontend is a Vue 3 SPA app that is hosted on S3 and served through
153159
CloudFront. The [Element UI Plus](https://element-plus.org/en-US/) frontend framework is used for the UI components
154-
and https://plotly.com/javascript/ for the charts.
160+
and [Plotly.js](https://plotly.com/javascript/) for the charts.
155161

156-
![frontend_1.png](docs/imgs/frontend_1.png)
157-
![frontend_2.png](docs/imgs/frontend_2.png)
158-
![frontend_3.png](docs/imgs/frontend_3.png)
162+
![frontend_1.png](https://github.com/rehanvdm/serverless-website-analytics/blob/main/docs/imgs/frontend_1.png)
163+
![frontend_2.png](https://github.com/rehanvdm/serverless-website-analytics/blob/main/docs/imgs/frontend_2.png)
164+
![frontend_3.png](https://github.com/rehanvdm/serverless-website-analytics/blob/main/docs/imgs/frontend_3.png)
159165

160166
### Backend
161167

162-
This is a Lambda-lith hit through the Lambda Function URLs (FURL) by reverse proxing through CloudFront. It is written
168+
This is a Lambda-lith hit through the Lambda Function URLs (FURL) by reverse proxying through CloudFront. It is written
163169
in TypeScript and uses [tRPC](https://trpc.io/) to handle API requests.
164170

165171
The Queries to Athena are synchronous, the connection timeout between CloudFront and the FURL has been increased
@@ -171,20 +177,22 @@ There are three available authentication configurations:
171177
- **AWS Cogntio**, recommended for production
172178

173179
⚠️ Partitions are not automatically created in Athena, they have to be created manually by the user by clicking the
174-
"Create/Refresh Partitions" button in the frontend. This has to be done when ever a new site is added or a new month
180+
"Create/Refresh Partitions" button in the frontend. This has to be done whenever a new site is added or a new month
175181
starts.
176182

177183
### Ingestion API
178184

179-
Similarly to the backend, it is also a TS Lambda-lith that is hit through the FURL by reverse proxing through CloudFront.
185+
Similarly to the backend, it is also a TS Lambda-lith that is hit through the FURL by reverse proxying through CloudFront.
180186
It also uses [tRPC](https://trpc.io/) but uses the [trpc-openapi](https://github.com/jlalmes/trpc-openapi) package to
181187
generate an OpenAPI spec. This is used to generate the API types used in the [client JS package](https://www.npmjs.com/package/serverless-website-analytics-client).
182188
and can also be used to generate other language client libraries.
183189

184190
The lambda function then saves the data to S3 through a Kinesis Firehose. The Firehose is configured to save the data
185-
in a partitioned manner, by site, year and month. The data is saved in parquet format. Location data is obtained by
186-
looking the IP address up in the [MaxMind GeoLite2](https://dev.maxmind.com/geoip/geoip2/geolite2/) database. We don't
187-
store any Personally Identifiable Information (PII) in the logs, the IP address is never stored.
191+
in a partitioned manner, by site, year and month. The data is saved in parquet format, buffered for 1 minute, which means
192+
the date will be stored after about 1min ± 1min.
193+
194+
Location data is obtained by looking the IP address up in the [MaxMind GeoLite2](https://dev.maxmind.com/geoip/geoip2/geolite2/) database.
195+
We don't store any Personally Identifiable Information (PII) in the logs or S3, the IP address is never stored.
188196

189197
## Sponsors
190198

@@ -193,7 +201,6 @@ Proudly sponsored by:
193201
all your AWS credentials and more.
194202
- Interested in [sponsoring](https://rehanvdm.com/contact-me)?
195203

196-
197204
## Contributing
198205

199206
See [CONTRIBUTING.md](docs/CONTRIBUTING.md) for more info on how to contribute + design decisions.

0 commit comments

Comments
 (0)