Workleap Netlify Skew Protection

https://github.com/workleap/wl-netlify-skew-protection
Admin
A library designed to enable Skew Protection for Netlify sites, ensuring consistent version delivery...
Tokens:2,364
Snippets:36
Trust Score:9.7
License:Apache-2.0
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Netlify Skew Protection Package

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/getting-started.md

Installs the Netlify Skew Protection package as a development dependency using pnpm.

```bash
pnpm add -D @workleap/netlify-skew-protection
```

--------------------------------

### Install Rslib Dependency

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/getting-started.md

Installs the Rslib core dependency as a development dependency using pnpm.

```bash
pnpm add -D @rslib/core
```

--------------------------------

### Project Structure Example

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/getting-started.md

Illustrates the project directory structure with the Netlify folder and the skew-protection.ts file.

```tree
web-project
├── netlify
├──── skew-protection.ts
├── package.json
```

--------------------------------

### Package.json Scripts for Building

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/getting-started.md

Updates the package.json to include scripts for building the application and the Netlify Edge Function sequentially.

```json
"scripts": {
    "build": "pnpm run --sequential \"/^build:.*/\"",
    "build:cdn": "rsbuild build --config rsbuild.build.ts",
    "build:edge-functions": "rslib build --config rslib.edge-functions.ts"
}
```

--------------------------------

### Project Structure with Netlify Configuration

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/getting-started.md

Shows the updated project structure including the netlify.toml file for Edge Function registration.

```tree
web-project
├── netlify
├──── skew-protection.ts
├── netlify.toml
├── package.json
```

--------------------------------

### Start Watch Process for SPA Sample Application

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Starts a development server with watch capabilities for the 'spa' sample application. This allows for real-time updates during development.

```bash
pnpm dev-spa
```

--------------------------------

### Serve SPA Sample Application Locally

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Builds the 'spa' sample application for deployment and starts a local web server to serve it. This is useful for testing the production build locally.

```bash
pnpm serve-spa
```

--------------------------------

### Serve Manifest Sample Application Locally

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Builds the 'manifest' sample application for deployment and starts a local web server to serve it. This allows testing the production build of the manifest app.

```bash
pnpm serve-manifest
```

--------------------------------

### Netlify TOML Configuration

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/getting-started.md

Configures Netlify's build settings to specify the location of the edge functions and routes requests to the 'skew-protection' function.

```toml
[build]
    edge_functions = "web-project/dist/netlify/edge-functions"

[[edge_functions]]
    path = "/*"
    function = "skew-protection"
```

--------------------------------

### Install Project Dependencies with PNPM

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Installs all project dependencies after PNPM is installed globally. This command should be run from the root of the project.

```bash
pnpm install
```

--------------------------------

### Netlify TOML Configuration for Edge Functions

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/getting-started.md

Configures Netlify to use the specified directory for edge functions and registers the 'skew-protection' function for all paths.

```toml
[build]
    edge_functions = "web-project/netlify/edge-functions"

[[edge_functions]]
    path = "/*"
    function = "skew-protection"
```

--------------------------------

### Rslib Edge Function Configuration

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/getting-started.md

Defines the Rslib configuration for building Netlify Edge Functions, specifying module formats, entry points, and output paths.

```typescript
import {
    defineConfig
} from "@rslib/core";

export default defineConfig({
    lib: [{
        format: "esm",
        autoExternal: false
    }],
    source: {
        entry: {
            "skew-protection": "./netlify/edge-functions/skew-protection.ts"
        }
    },
    output: {
        distPath: {
            root: "./dist/netlify/edge-functions",
            js: ""
        },
        filename: {
            js: "[name].js"
        }
    }
});
```

--------------------------------

### Generate Skew Protection Secret

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/getting-started.md

Generates a strong, random secret key using OpenSSL for securing the HMAC signature.

```bash
openssl rand -base64 32
```

--------------------------------

### Import Skew Protection via esm.sh

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/getting-started.md

Imports the Skew Protection functionality directly from esm.sh CDN in the Edge Function code.

```typescript
import {
    config,
    createSkewProtectionFunction
} from "https://esm.sh/@workleap/netlify-skew-protection";
```

--------------------------------

### Start Watch Process for Manifest Sample Application

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Starts a development server with watch capabilities for the 'manifest' sample application. This is useful for iterative development on the manifest application.

```bash
pnpm dev-manifest
```

--------------------------------

### Install PNPM Globally

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Installs the PNPM package manager globally using npm. This is a prerequisite for managing the project's dependencies.

```bash
npm install -g pnpm
```

--------------------------------

### Entrypoints Mode Edge Function Configuration

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/getting-started.md

Configures the Edge Function for applications with multiple entry points or manifest files, using 'entrypoints' mode. It allows specifying custom entrypoint paths.

```typescript
import { config, createSkewProtectionFunction } from "@workleap/netlify-skew-protection";

const fct = createSkewProtectionFunction("entrypoints", {
    entrypoints: ["/"]
});

export { config, fct as default };
```

--------------------------------

### SPA Mode Edge Function Configuration

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/getting-started.md

Configures the Edge Function for Single Page Applications (SPA) using the createSkewProtectionFunction with 'spa' mode. It exports the config and the default function.

```typescript
import { config, createSkewProtectionFunction } from "@workleap/netlify-skew-protection";

const fct = createSkewProtectionFunction("spa");

export { config, fct as default };
```

--------------------------------

### Update Outdated Dependencies

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Updates outdated dependencies to their latest versions. The process is guided by PNPM's documentation for the 'update' command.

```bash
pnpm update-outdated-deps
```

--------------------------------

### Reset Monorepo Installation

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Resets the monorepo installation by deleting 'dist' folders, clearing caches, and removing 'node_modules' folders. This command performs a thorough cleanup.

```bash
pnpm reset
```

--------------------------------

### Deploy SPA Sample Application

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Deploys the 'spa' sample application to Netlify. This command should be executed from the project's root directory.

```bash
pnpm deploy-spa
```

--------------------------------

### Deploy Manifest Sample Application

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Deploys the 'manifest' sample application. This command is used to push the application to Netlify.

```bash
pnpm deploy-manifest
```

--------------------------------

### Publish New Package Version with Changesets

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Prepares and publishes a new version of a package using Changesets. This command prompts the user for release information.

```bash
pnpm changeset
```

--------------------------------

### Build the Library Package

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Compiles the library package. This command is useful for debugging compilation issues without running the full release flow.

```bash
pnpm build-lib
```

--------------------------------

### Add Retype License Key

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Adds a Retype license key to the Retype wallet for accessing Pro features. Replace '<your-license-key-here>' with the actual license key obtained from Vault.

```bash
npx retype wallet --add <your-license-key-here>
```

--------------------------------

### List Outdated Dependencies

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Checks for outdated dependencies in the project. It relies on PNPM's documentation for detailed information on the 'outdated' command.

```bash
pnpm list-outdated-deps
```

--------------------------------

### Clean Project Packages

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Cleans the shell packages and the sample application by deleting 'dist' folders and clearing caches. This command helps ensure a clean state for builds and development.

```bash
pnpm clean
```

--------------------------------

### Lint Files

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Lints the project files using ESLint, StyleLint, and TypeScript type checking. This command helps maintain code quality and consistency.

```bash
pnpm lint
```

--------------------------------

### Fix Linting Errors

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/CONTRIBUTING.md

Automatically fixes most linting errors in the project. If issues persist, the 'pnpm lint' command can provide detailed reports.

```bash
eslint . --fix
```

--------------------------------

### Enable Verbose Logging for Skew Protection

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/available-options.md

Activates detailed logging within Netlify's Edge Functions logs to aid in diagnosing and resolving potential issues with skew protection.

```typescript
createSkewProtectionFunction("spa", {
    verbose: true
});
```

--------------------------------

### Set Cookie Path for Skew Protection

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/available-options.md

Specifies the path for the cookie that holds the deployment ID, associating it with a specific part of the website. This is useful for organizing cookies across different site sections.

```typescript
createSkewProtectionFunction("spa", {
    cookiePath: "/my-app"
});
```

--------------------------------

### Set Cookie Max Age in Milliseconds for Skew Protection

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/available-options.md

Defines the expiration time for the deployment ID cookie in milliseconds. This allows precise control over how long session information is stored.

```typescript
createSkewProtectionFunction("spa", {
    cookieMaxAgeInMs: 1000 * 60 * 30 * 24
});
```

--------------------------------

### Set Secret Environment Variable for Skew Protection

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/available-options.md

Configures the environment variable name used for the HMAC secret to protect cookies from tampering. This ensures the integrity of session data.

```typescript
createSkewProtectionFunction("spa", {
    secretEnvironmentVariableName: "HMAC_SECRET"
});
```

--------------------------------

### Customize Cookie Name for Skew Protection

Source: https://github.com/workleap/wl-netlify-skew-protection/blob/main/docs/introduction/available-options.md

Allows changing the default name of the cookie that stores the user's session deployment ID. This helps in managing multiple applications or avoiding naming conflicts.

```typescript
createSkewProtectionFunction("spa", {
    cookieName: "my_app_sp"
});
```
Tokens:
Raw