DEV Community: Nico Schett

Announcing Pylon 2.0 with Multiple Runtime Support

Nico Schett — Wed, 18 Sep 2024 15:30:13 +0000

Welcome to @getcronit/pylon@2.0.0 release (September 2024)!

Pylon v2 introduces the support for different runtimes, a new create command, and an improved development server.
The official supported runtimes by the npm create pylon command are Bun, Node.js and Cloudflare Workers. Other runtimes are also supported but require manual setup.
We’ve tried to make migration smooth. Please refer to the migration guide and let us know if you encounter any issues when migrating.

Key highlights of this release:

New Runtimes: Pylon now supports multiple runtimes, including Bun, Node.js and Cloudflare Workers.
Unified Create Command: The new npm create pylon command provides a consistent way to create new Pylon projects.
Improved Development Server: The new pylon dev command provides a unified development experience across different runtimes.
Drop of pylon-cli and pylon-server: The @getcronit/pylon-cli and @getcronit/pylon-server packages are no longer required and replaced by the @getcronit/pylon-dev package.

Breaking Changes

If you’re looking for an overview of all breaking changes and how to migrate, please see the migrating from v1 to v2 guide.

If you have any questions or need help, please don’t hesitate to reach out to us on Discord. We’re happy to assist you with the migration process.

Overview Video

Watch how we use the new npm create pylon command to create a new Pylon project and deploy it to Cloudflare Workers in less than 1 minute:

pylon.cronit.io

New Runtimes

Pylon now supports multiple runtimes, including Bun, Node.js and Cloudflare Workers. You can choose the runtime that best fits your use case and deploy your service with ease.

To create a new Pylon project with a specific runtime, use the npm create pylon command:

npm create pylon --runtime cf-workers

This command creates a new Pylon project with the Cloudflare Workers runtime. You can also specify other runtimes, such as Node.js or Cloudflare Workers, by passing the --runtime flag.

Pylon also supports various other runtimes:

Be aware that those runtimes require manual setup and configuration.

Cloudflare Pages
Deno
Fastly Compute
Vercel
Netlify
AWS Lambda
Lambda@Edge
Azure Functions
Supabase Functions
Ali Function Compute
Service Worker

Unified Create Command

The new npm create pylon command provides a consistent way to create new Pylon projects with different runtimes, templates, client generation and more.
This command streamlines the project creation process and ensures that you have everything you need to get started with Pylon.

To create a new Pylon project, run the following command:

npm create pylon

This command will prompt you to select the runtime, template, and other options for your project. Once you’ve made your selections, the command will create a new Pylon project in the specified directory.

Improved Development Server

Pylon v2 introduces a new pylon dev command that provides a unified development experience across different runtimes.

The pylon dev command starts the development server and automatically reloads your service when you make changes to your code. This command is designed to streamline the development process and make it easier to build and test your services.
To support different runtimes, you can specify the runtime-specific start command using the -c flag:

pylon dev -c 'bun run .pylon/index.js'

This command starts the development server with the specified start command for the Bun runtime. You can replace the command with the appropriate start command for your chosen runtime.

For example, if you’re using Cloudflare Workers, you can start the development server with the following command:

pylon dev -c 'wrangler dev'

This command starts the development server with the wrangler dev command, which is the recommended way to run Cloudflare Workers locally.

Drop of `pylon-cli` and `pylon-server`

The @getcronit/pylon-cli and @getcronit/pylon-server packages are no longer required and have been replaced by the @getcronit/pylon-dev package.

Why was the pylon-cli dropped?

The pylon-cli package was used to create new Pylon projects and manage the development server. With the introduction of the npm create pylon command and the pylon dev command, the functionality provided by the pylon-cli package is now handled by the create-pylon package and the pylon-dev package.

Why was the pylon-server dropped?

The pylon-server had only one purpose: to start the server using Bun. With the introduction of multiple runtimes, the pylon-server package became obsolete. The pylon-dev package now handles the development server for all runtimes.
For production, you can now directly execute .pylon/index.js with your runtime-specific command (e.g. bun run .pylon/index.js or node .pylon/index.js). This flexible approach allows you to choose the best deployment strategy for your use case.

Acknowledgements

A big thank you to all who helped with this release 💛

@kleberbaum for his dream that we’ll support Cloudflare Workers, and now we do!
@dave-calleja for the initial request for multiple runtime support, that led us realise that this is crucial for the future of Pylon.
@schettn for coding all of this ;)

Building a Simple CRUD Service with Pylon

Nico Schett — Mon, 15 Jul 2024 10:28:59 +0000

In the dynamic world of web development, creating robust and scalable APIs is essential. The challenge lies in managing schema definitions and ensuring consistency as the application evolves. Pylon simplifies this process by automating GraphQL schema generation based on TypeScript functions. In this article, we’ll walk through building a simple CRUD (Create, Read, Update, Delete) service using Pylon.

What is Pylon?

Pylon is a tool that automates the generation of GraphQL schemas directly from TypeScript functions. It leverages TypeScript’s type annotations to create a GraphQL schema that is always in sync with your application logic. This eliminates manual schema definitions, reducing errors and improving maintainability.

Setting Up Pylon

Step 1: Install Pylon CLI

First, install the Pylon CLI globally using npm:

npm install -g @getcronit/pylon-cli

Step 2: Create a New Pylon Project

Initialize a new Pylon project:

pylon new my-crud-project

Building the CRUD Service

We’ll create a simple service to manage a list of books. Each book will have an ID, title, author, and publication year.

Step 3: Define TypeScript Functions

In your Pylon project, define a class to manage the book records. Annotate the functions with Pylon directives to specify GraphQL queries and mutations.

import { defineService } from "@getcronit/pylon";

class BookStore {
  private books = [
    { id: 1, title: "1984", author: "George Orwell", year: 1949 },
    { id: 2, title: "Brave New World", author: "Aldous Huxley", year: 1932 },
  ];

  constructor() {
    this.getBook = this.getBook.bind(this);
    this.getBooks = this.getBooks.bind(this);
    this.addBook = this.addBook.bind(this);
    this.updateBook = this.updateBook.bind(this);
    this.deleteBook = this.deleteBook.bind(this);
  }

  getBook(id: number) {
    return this.books.find((book) => book.id === id);
  }

  getBooks() {
    return this.books;
  }

  addBook(title: string, author: string, year: number) {
    const id = this.books.length + 1;
    const newBook = { id, title, author, year };
    this.books.push(newBook);
    return newBook;
  }

  updateBook(id: number, title?: string, author?: string, year?: number) {
    const book = this.getBook(id);
    if (book) {
      if (title) book.title = title;
      if (author) book.author = author;
      if (year) book.year = year;
      return book;
    }
    return null;
  }

  deleteBook(id: number) {
    const book = this.getBook(id);
    if (book) {
      this.books = this.books.filter((b) => b.id !== id);
      return book;
    }
    return null;
  }
}

const store = new BookStore();

export default defineService({
  Query: {
    book: store.getBook,
    books: store.getBooks,
  },
  Mutation: {
    addBook: store.addBook,
    updateBook: store.updateBook,
    deleteBook: store.deleteBook,
  },
});

In this example, BookStore manages the CRUD operations for books. The defineService function from Pylon defines GraphQL queries and mutations based on the methods of BookStore.

Step 4: Run the Development Server

Start the development server to launch your GraphQL API with the generated schema:

bun run develop

Exploring Your CRUD API

With the development server running, you can interact with your API using GraphQL Playground or any other GraphQL client.

GraphQL Playground: Access at http://localhost:3000/graphql to run queries and mutations.
GraphQL Viewer: Visualize the schema at http://localhost:3000/viewer.

Example Queries and Mutations

Query: Get All Books

query {
  books {
    id
    title
    author
    year
  }
}

Mutation: Add a New Book

mutation {
  addBook(title: "The Great Gatsby", author: "F. Scott Fitzgerald", year: 1925) {
    id
    title
    author
    year
  }
}

Mutation: Update a Book

mutation {
  updateBook(id: 1, title: "Nineteen Eighty-Four", year: 1949) {
    id
    title
    author
    year
  }
}

Mutation: Delete a Book

mutation {
  deleteBook(id: 2) {
    id
    title
    author
    year
  }
}

Advanced Features

Pylon also supports advanced features such as:

Built-in Authentication and Authorization: Pylon provides built-in support for authentication and authorization, allowing you to secure your GraphQL API with ease. By integrating with ZITADEL, Pylon simplifies user management and access control.
Logging and Monitoring: Pylon integrates with Sentry to provide real-time error monitoring and alerting for your Pylon service. Check out the guide on logging and monitoring for more details.
Context Management: Pylon allows you to access the request context anywhere in your service functions, enabling you to implement custom logic based on the incoming request. Learn more about context management in the Pylon documentation.
Deployment: To deploy your Pylon service, follow the deployment guide in the official documentation to get your service up and running in production.

Conclusion

Explore Pylon to enhance your GraphQL development process and make your projects more efficient and scalable. For more information, check out the official documentation or the GitHub repository.

How We Ditched Manual GraphQL Schema Definition with Pylon

Nico Schett — Mon, 01 Jul 2024 15:58:48 +0000

In the ever-evolving landscape of web development, efficiency and scalability are paramount. One of the significant challenges developers face is managing and composing GraphQL schemas, especially as projects grow in size and complexity. Manual schema composition can become a cumbersome task, prone to errors and difficult to maintain. Enter Pylon, a game-changer in the world of GraphQL.

The Challenge of Manual GraphQL Schema Definition

GraphQL, with its powerful query language and flexible APIs, has revolutionized how developers interact with data. However, constructing and maintaining the schema, which defines the types and relationships within the API, often requires meticulous manual effort. This process involves:

Defining Types and Resolvers: Manually writing type definitions and resolvers in a schema file.
Ensuring Consistency: Keeping the type definitions in sync with the underlying data models and resolvers.
Handling Scalability: As the application grows, the schema becomes more complex, making it harder to manage.
Reducing Errors: Avoiding typos and logical errors in the schema definition.

These challenges not only slow down development but also introduce potential bugs and inconsistencies.

Introducing Pylon

Pylon is a revolutionary tool that automates GraphQL schema composition based on your TypeScript functions. By leveraging the type annotations already present in your TypeScript code, Pylon generates a fully-formed GraphQL schema, reducing the need for manual intervention. Here’s how Pylon addresses the key challenges of manual schema composition:

1. Simplified Schema Definition

With Pylon, developers no longer need to manually define types and resolvers. Pylon scans your TypeScript functions, infers the types, and automatically generates the corresponding GraphQL schema. This eliminates the need for duplicative code and ensures that your GraphQL schema is always in sync with your application logic.

2. Consistency and Type Safety

Since Pylon relies on TypeScript’s type system, it ensures that the generated GraphQL schema is consistent with the types defined in your code. Any changes to your TypeScript types are automatically reflected in the GraphQL schema, reducing the risk of discrepancies. This tight coupling between TypeScript and GraphQL promotes type safety across your application.

3. Scalability and Maintainability

Pylon’s automated approach to schema generation significantly improves scalability. As your codebase grows, Pylon continues to generate and update the schema, handling the complexity behind the scenes. This makes it easier to manage large and evolving projects, freeing developers to focus on building features rather than maintaining schema files.

4. Error Reduction

By eliminating manual schema definitions, Pylon reduces the likelihood of errors. Developers can trust that the schema accurately represents the underlying data models and functions. This leads to fewer bugs and a more robust application overall.

How Pylon Works

Using Pylon is straightforward and simplifies your GraphQL development workflow. Here’s a quick overview of how to get started:

Step 1: Install Pylon CLI

To begin using Pylon, install the Pylon CLI globally using npm:

npm install -g @getcronit/pylon-cli

Step 2: Create a New Pylon Project

Create a new Pylon project using the CLI. This command initializes a new project structure with necessary configurations:

pylon new my-pylon-project

Step 3: Annotate TypeScript Functions

In your Pylon project, define TypeScript functions annotated with Pylon directives to specify GraphQL queries, mutations.

import { defineService } from "@getcronit/pylon";

class StarWarsStore {
  private characters = [
    { id: 1, name: "Luke Skywalker", height: 172 },
    { id: 2, name: "Darth Vader", height: 202 },
  ];

  constructor() {
    // Bind methods in order to access `this`
    this.getCharacter = this.getCharacter.bind(this);
    this.getCharacters = this.getCharacters.bind(this);
    this.addCharacter = this.addCharacter.bind(this);
    this.deleteCharacter = this.deleteCharacter.bind(this);
  }

  getCharacter(id: number) {
    return this.characters.find((character) => character.id === id);
  }

  getCharacters() {
    return this.characters;
  }

  addCharacter(name: string, height: number) {
    const id = this.characters.length + 1;
    this.characters.push({ id, name, height });
    return { id, name, height };
  }

  deleteCharacter(id: number) {
    const character = this.getCharacter(id);
    if (character) {
      this.characters = this.characters.filter((c) => c.id !== id);
      return character;
    }
    return null;
  }
}

const store = new StarWarsStore();

export default defineService({
  Query: {
    character: store.getCharacter,
    characters: store.getCharacters,
  },
  Mutation: {
    addCharacter: store.addCharacter,
    deleteCharacter: store.deleteCharacter,
  },
});

In this example, defineService from Pylon defines GraphQL queries (sum) and mutations (divide), which perform simple arithmetic operations.

Step 4: Run the Development Server

Start the development server using the provided command (bun run develop in this case) to launch your GraphQL API with the generated schema:

bun run develop

Step 5: Explore Your GraphQL API

With the development server running, you can explore your GraphQL API using the built-in GraphQL Playground, the GraphQL viewer, or any other GraphQL client.

GraphQL Playground: Access the GraphQL Playground at http://localhost:3000/graphql to interact with your API, run queries, and explore the schema.

GraphQL Viewer: Use the GraphQL viewer at http://localhost:3000/viewer to visualize the schema and understand the available queries and mutations.

Advanced usage

Built-in Authentication and Authorization: Pylon provides built-in support for authentication and authorization, allowing you to secure your GraphQL API with ease. By integrating with ZITADEL, Pylon simplifies user management and access control.
Logging and Monitoring: Pylon integrates with Sentry to provide real-time error monitoring and alerting for your Pylon service. Check out the guide on logging and monitoring for more details.
Context Management: Pylon allows you to access the request context anywhere in your service functions, enabling you to implement custom logic based on the incoming request. Learn more about context management in the Pylon documentation.
Deployment: To deploy your Pylon service, follow the deployment guide in the official documentation to get your service up and running in production.

Conclusion

Pylon has transformed our approach to GraphQL schema definition. By leveraging the power of TypeScript, it automates the generation of schemas, ensuring consistency, scalability, and error reduction. This shift from manual to automated schema definition has allowed us to focus more on developing features and less on maintaining boilerplate code. If you’re looking to streamline your GraphQL development process, Pylon is a tool worth exploring. It’s a testament to how modern tools can enhance productivity and maintainability in web development.

For more information on Pylon and its features, check out the official documentation or the GitHub repository to get started with Pylon today!

DEV Community: Nico Schett

Announcing Pylon 2.0 with Multiple Runtime Support

Breaking Changes

Overview Video

New Runtimes

Unified Create Command

Improved Development Server

Drop of pylon-cli and pylon-server

Acknowledgements

Building a Simple CRUD Service with Pylon

What is Pylon?

Setting Up Pylon

Step 1: Install Pylon CLI

Step 2: Create a New Pylon Project

Building the CRUD Service

Step 3: Define TypeScript Functions

Step 4: Run the Development Server

Exploring Your CRUD API

Example Queries and Mutations

Advanced Features

Conclusion

How We Ditched Manual GraphQL Schema Definition with Pylon

The Challenge of Manual GraphQL Schema Definition

Introducing Pylon

How Pylon Works

Advanced usage

Conclusion

Drop of `pylon-cli` and `pylon-server`