DOCSEARCHbyAlgolia
Submit Docs

Gasket Framework

website·Indexed 33 days ago

https://gasket.dev/docs

A framework maker for JavaScript applications that provides a CLI, presets, and plugins to streamline the creation and configuration of apps. It includes specialized integrations for Next.js, Fastify, and Redux, and offers a modular system for authoring plugins and managing application lifecycles.

Tokens
96.9K
Snippets
612
Records
705
Agent score
69%

What's inside Gasket

  1. Overview of Gasket framework composition

    Gasket is a tool used to compose frameworks for delivering applications of various sizes. It allows developers to move away from manually copying boilerplate apps by using a modular system of plugins and presets. This approach ensures that common patterns and features are maintainable, versioned, and shareable across different projects.

  2. Overview of Gasket Framework Maker

    Gasket is a framework maker for JavaScript applications that allows developers to build custom frameworks using a combination of presets and plugins. It provides a modular system where commands, lifecycles, and structures are enabled by the specific plugins installed in the project.

  3. Overview of Gasket lint plugin

    The Gasket lint plugin enables code style linting configuration for Gasket apps. It is exclusively used by presets for create-gasket-app and is not installed directly into the resulting apps.

  4. Overview of Gasket and the API Preset

    Gasket is a plugin-based framework maker used to create JavaScript web applications and APIs. It uses 'Presets', which are predefined collections of plugins bundled together for specific project types. The @gasket/preset-api is specifically designed for creating APIs and includes plugins for Express, HTTP/HTTPS functionality, and Swagger API documentation generation.

  5. Overview of Gasket versioning with Changesets

    Gasket uses changesets to manage versioning and changelogs across its multi-package repository. This tool allows contributors to declare the intent to release packages, which then automates version bumping, changelog generation, and publishing to npm.

  6. Understand Gasket TypeScript plugin installation

    The Gasket plugin for TypeScript support is designed to be used by presets for create-gasket-app. It is not intended to be installed manually for individual apps.

  7. Create a new project using the Gasket Next.js App Router template

    Initialize a modern full-stack TypeScript web application with Next.js 15 (App Router), Gasket plugin architecture, React Intl for internationalization, and a built-in HTTPS development proxy.
    npx create-gasket-app@latest my-app --template @gasket/template-nextjs-app

  8. Understand Gasket Plugins and Presets

    In the Gasket ecosystem, a Plugin is a module that provides a specific unit of functionality. Plugins can be core to the application or optional. A Preset is a package that groups multiple Gasket plugin dependencies together, allowing them to be loaded as a single unit.

  9. Convert Express request middleware to native Fastify hooks

    Replace the Express-style middleware hook with the native fastify hook using app.addHook('preHandler', ...). This allows you to attach data to the request object using Fastify's native architecture.
    export default {
  name: 'my-plugin',
  hooks: {
    fastify: async function (gasket, app) {
      app.addHook('preHandler', async (request, reply) => {
        request.startTime = Date.now();
        request.customHeader = request.headers['x-custom'];
      });
    }
  }
};

  10. Define routes using the Next.js file system

    Next.js uses a file-system based router where the structure of the pages/ directory and the filenames directly map to the available route URLs. For example, a file at pages/about.js maps to /about, and a file at pages/blog/index.js maps to /blog.
    pages/
  blog/
    index.js  <-- maps to /blog
    1.js      <-- maps to /blog/1
    2.js      <-- maps to /blog/2
  about.js    <-- maps to /about
  index.js    <-- maps to /

  11. Contribute code to Gasket

    To contribute code or triage bugs, follow these steps:

    1. Fork the repository on GitHub.
    2. Make changes in your fork.
    3. Reference the relevant issue in your commit message and include a note about the fix.
    4. Add or update unit tests for your changes.
    5. Push changes to your fork and submit a pull request to the master branch.

    For large changes, discuss the proposal with core contributors to reach a consensus before implementation. When triaging, aim to reduce the bug to the smallest possible amount of code for easier reasoning.

  12. Use syncpack to manage dependency versions and package.json formatting

    Since pnpm update cannot be used on Catalog versions (as of PNPM@10.4.1), syncpack is used to find and fix dependency version mismatches, enforce a single version policy, bump outdated versions from the npm registry, and consistently sort/format package.json files.