Skip to content

Commit f98f7d5

Browse files
Merge pull request #27 from workleap/docs/added-contributing-docs
docs: Added a contributing docs
2 parents 33125b9 + 1766fec commit f98f7d5

File tree

4 files changed

+270
-6
lines changed

4 files changed

+270
-6
lines changed

CONTRIBUTING.md

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
# Contributing
2+
3+
The following documentation is only for the maintainers of this repository.
4+
5+
- [Monorepo setup](#monorepo-setup)
6+
- [Project overview](#project-overview)
7+
- [Installation](#installation)
8+
- [Develop the library](#develop-the-library)
9+
- [Release the package](#release-the-package)
10+
- [Deploy the sample applications](#deploy-the-sample-applications)
11+
- [Available commands](#commands)
12+
- [CI](#ci)
13+
14+
## Monorepo setup
15+
16+
This repository is managed as a monorepo with [PNPM workspace](https://pnpm.io/workspaces) to handle the installation of the npm dependencies and manage the packages interdependencies.
17+
18+
It's important to note that PNPM workspace doesn't hoist the npm dependencies at the root of the workspace as most package manager does. Instead, it uses an advanced [symlinked node_modules structure](https://pnpm.io/symlinked-node-modules-structure). This means that you'll find a `node_modules` directory inside the packages folders as well as at the root of the repository.
19+
20+
The main difference to account for is that the `devDependencies` must now be installed locally in every package `package.json` file rather than in the root `package.json` file.
21+
22+
### Turborepo
23+
24+
This repository use [Turborepo](https://turbo.build/repo/docs) to execute it's commands. Turborepo help saving time with it's built-in cache but also ensure the packages topological order is respected when executing commands.
25+
26+
To be understand the relationships between the commands, have a look at this repository [turbo.json](./turbo.json) configuration file.
27+
28+
## Project overview
29+
30+
This project is split into two major sections, [lib/](lib/) and [samples/](samples/).
31+
32+
### Lib
33+
34+
Under [lib/](lib/) is the actual package for the Skew Protection Edge Function.
35+
36+
### Samples
37+
38+
Under [samples/](samples/) are applications to test the Skew Protection Edge Function functionalities while developing.
39+
40+
You'll find four samples:
41+
42+
- `spa`: A sample application showcasing the `spa` mode.
43+
- `manifest`: A sample application showcasing the `entrypoints` mode.
44+
- `cd`: A sample application testing that the proposed setup to deploy the Skew Protection with Netlify CD works as expected.
45+
46+
## Installation
47+
48+
This project uses PNPM, therefore, you must [install PNPM](https://pnpm.io/installation) first:
49+
50+
```bash
51+
npm install -g pnpm
52+
```
53+
54+
To install this project, open a terminal at the root of the project and execute the following command:
55+
56+
```bash
57+
pnpm install
58+
```
59+
60+
### Setup Retype
61+
62+
[Retype](https://retype.com/) is the documentation platform that the Skew Protection package is using for its documentation. As this project is leveraging a few [Pro features](https://retype.com/pro/) of Retype it is recommended to setup [Retype wallet](https://retype.com/guides/cli/#retype-wallet).
63+
64+
Everything should work fine without a wallet but there are a few limitations to use Retype Pro features without one. If you want to circumvent these limitations, you can optionally, setup your [Retype wallet](https://retype.com/guides/cli/#retype-wallet).
65+
66+
To do so, first make sure that you retrieve the Retype license from your Vault (or ask IT).
67+
68+
Then, open a terminal at the root of the project and execute the following command:
69+
70+
```bash
71+
npx retype wallet --add <your-license-key-here>
72+
```
73+
74+
## Release the package
75+
76+
When you are ready to release the package, you must follow the following steps:
77+
78+
1. Run `pnpm changeset` and follow the prompt. For versioning, always follow the [SemVer standard](https://semver.org/).
79+
2. Commit the newly generated file in your branch and submit a new Pull Request (PR). Changesets will automatically detect the changes and post a message in your pull request telling you that once the PR closes, the versions will be released.
80+
3. Find someone to review your PR.
81+
4. Merge the Pull request into `main`. A GitHub action will automatically trigger and update the version of the packages and publish them to [npm](https://www.npmjs.com/). A tag will also be created on GitHub tagging your PR merge commit.
82+
83+
### Troubleshooting
84+
85+
#### Github
86+
87+
Make sure you're Git is clean (No pending changes).
88+
89+
#### NPM
90+
91+
Make sure GitHub Action has **write access** to the selected npm packages.
92+
93+
#### Compilation
94+
95+
If the packages failed to compile, it's easier to debug without executing the full release flow every time. To do so, instead, execute the following command:
96+
97+
```bash
98+
pnpm build-lib
99+
```
100+
101+
By default, the package compilation output will be in their respective *dist* directory.
102+
103+
#### Linting errors
104+
105+
If you got linting error, most of the time, they can be fixed automatically using `eslint . --fix`, if not, follow the report provided by `pnpm lint`.
106+
107+
## Deploy the sample applications
108+
109+
### The "spa" sample application
110+
111+
The site for the "spa" sample application is [hosted on Netlify](https://nf-skew-protection-spa-sample.netlify.app/).
112+
113+
To deploy the sample application, open a terminal at the root of the repository and execute the following script:
114+
115+
```bash
116+
pnpm deploy-spa
117+
```
118+
119+
### The "manifest" sample application
120+
121+
The site for the "manifest" sample application is [hosted on Netlify](https://nf-skew-protection-manifest-sample.netlify.app/).
122+
123+
To deploy the sample application, open a terminal at the root of the repository and execute the following script:
124+
125+
```bash
126+
pnpm deploy-manifest
127+
```
128+
129+
### The "netlify-cd" sample application
130+
131+
The site for the "manifest" sample application is [hosted on Netlify](https://nf-skew-protection-cd-sample.netlify.app/).
132+
133+
The site is automatically deployed whenever a PR is merged.
134+
135+
## Commands
136+
137+
From the project root, you have access to many commands. The most important ones are:
138+
139+
### dev-spa
140+
141+
Start a watch process for the "spa" sample application.
142+
143+
```bash
144+
pnpm dev-spa
145+
```
146+
147+
### dev-manifest
148+
149+
Start a watch process for the "manifest" sample application.
150+
151+
```bash
152+
pnpm dev-manifest
153+
```
154+
155+
#### build-lib
156+
157+
Build the library.
158+
159+
```bash
160+
pnpm build-lib
161+
```
162+
163+
### serve-spa
164+
165+
Build the sample "spa" sample application for deployment and start a local web server to serve the application.
166+
167+
```bash
168+
pnpm serve-spa
169+
```
170+
171+
### serve-manifest
172+
173+
Build the sample "manifest" sample application for deployment and start a local web server to serve the application.
174+
175+
```bash
176+
pnpm serve-manifest
177+
```
178+
179+
### deploy-spa
180+
181+
Deploy the "spa" sample application.
182+
183+
```bash
184+
pnpm deploy-spa
185+
```
186+
187+
### deploy-manifest
188+
189+
Deploy the "manifest" sample application.
190+
191+
```bash
192+
pnpm deploy-manifest
193+
```
194+
195+
#### lint
196+
197+
Lint the files (ESLint, StyleLint and TS types).
198+
199+
```bash
200+
pnpm lint
201+
```
202+
203+
### changeset
204+
205+
To use when you want to publish a new package version. Will display a prompt to fill in the information about your new release.
206+
207+
```bash
208+
pnpm changeset
209+
```
210+
211+
#### clean
212+
213+
Clean the shell packages and the sample application (delete `dist` folder, clear caches, etc..).
214+
215+
```bash
216+
pnpm clean
217+
```
218+
219+
#### reset
220+
221+
Reset the monorepo installation (delete `dist` folders, clear caches, delete `node_modules` folders, etc..).
222+
223+
```bash
224+
pnpm reset
225+
```
226+
227+
#### list-outdated-deps
228+
229+
Checks for outdated dependencies. For more information, view [PNPM documentation](https://pnpm.io/cli/outdated).
230+
231+
```bash
232+
pnpm list-outdated-deps
233+
```
234+
235+
#### update-outdated-deps
236+
237+
Update outdated dependencies to their latest version. For more information, view [PNPM documentation](https://pnpm.io/cli/update).
238+
239+
```bash
240+
pnpm update-outdated-deps
241+
```
242+
243+
## CI
244+
245+
We use [GitHub Actions](https://github.com/features/actions) for this repository.
246+
247+
You can find the configuration in the [.github/workflows](.github/workflows/) folder and the build results are available [here](https://github.com/workleap/wl-squide/actions).
248+
249+
We currently have 3 builds configured:
250+
251+
### Changesets
252+
253+
This action runs on a push on the `main` branch. If there is a file present in the `.changeset` folder, it will publish the new package version on npm.
254+
255+
### CI
256+
257+
This action will trigger when a commit is done in a PR to `main` or after a push to `main` and will run `build`, `lint-ci` and `test` commands on the source code.
258+
259+
### Retype
260+
261+
This action will trigger when a commit is done in a PR to `main` or after a push to `main`. The action will generate the documentation website into the `retype` branch. This repository [Github Pages](https://github.com/workleap/wl-web-configs/settings/pages) is configured to automatically deploy the website from the `retype` branch.
262+
263+
If you are having issue with the Retype license, make sure the `RETYPE_API_KEY` Github secret contains a valid Retype license.
264+
265+
### Netlify CD application deployment
266+
267+
Whenever a PR is opened, the [netlify-cd](./samples/netlify-cd/) sample will be automatically deployed to a preview environment. This deployment ensure that the Edge Function can be build and deployed by Netlify CD.

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# netlify-skew-protection
22

3-
A library to enable [Skew Protection](https://vercel.com/blog/version-skew-protection) for a Netlify site.
3+
A library to enable [Skew Protection](https://vercel.com/blog/version-skew-protection) for a [Netlify](https://www.netlify.com/) site.
44

55
[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](./LICENSE)
66
[![CI](https://github.com/workleap/wl-netlify-skew-protection/actions/workflows/ci.yml/badge.svg)](https://github.com/workleap/wl-netlify-skew-protection/actions/workflows/ci.yml)

lib/src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ export function createSkewProtectionFunction(mode: Mode, options: CreateSkewProt
159159
}
160160

161161
logDebug(`The edge function is operating in "${mode}" mode.`);
162-
logDebug("The HMAC secret has been retrieved successfully from the site environment variables.");
162+
logDebug(`The HMAC secret has been retrieved successfully from the site "${secretEnvironmentVariableName}" environment variable.`);
163163

164164
const url = new URL(request.url);
165165

retype.yml

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,7 @@ toc:
1717

1818
hub:
1919
link: https://workleap.github.io/wl-idp-docs-hub/
20-
alt: Workleap's IDP homepage
21-
22-
nav:
23-
mode: stack
20+
alt: Workleap's Frontend Platform homepage
2421

2522
start:
2623
pro: true

0 commit comments

Comments
 (0)