Skip to content
EvolveEvolveEvolve

Mastering Evolve technologies

This page lists the technologies an Evolve project uses, grouped by area, with official documentation and training to learn them. Use it to find the skills a team needs, or to plan onboarding for a new developer.

An Evolve project is a Next.js storefront and a set of GraphQL services behind a federation gateway. Most of the code comes from published packages: @evolve-framework/* for the backend and @evolve-storefront/* for the storefront. Your project pins their versions in the pnpm catalog and composes them, so an upgrade is a version bump. See How Evolve fits together and the upgrade model.

flowchart TB
  site["Storefront<br/>Next.js, React, Tailwind CSS, next-intl"]
  gateway["Gateway<br/>Hive Router"]
  services["Services: discover, purchase, and more<br/>Node.js, GraphQL Yoga, Fastify"]
  vendors["Vendors<br/>commercetools, CMS, payment, search"]
  cloud["Cloud<br/>containers, Redis, message bus, Terraform"]
  site -- GraphQL --> gateway --> services
  services --> vendors
  services --> cloud

Frontend

Section titled “Frontend”

The storefront is a Next.js app. Its features (cart, account, orders, shopping lists, and for B2B quotes and organizations) come as headless @evolve-storefront/feature-* packages, rendered with the presentational components of @evolve-storefront/ui. Your site composes them into pages and gives them your brand. See the storefront packages.

Technologies

Section titled “Technologies”
  • Framework: Next.js 16 with the App Router, React 19
  • Browsers: Chrome and Edge 111, Safari 16.4, and Firefox 128 or later. See Which browsers does Evolve support?
  • UI components: React Aria Components, through @evolve-storefront/ui. The reference sites also use Radix UI for a few site-specific parts, such as the navigation menu and the range slider.
  • Styling: Tailwind CSS 4, class-variance-authority for component variants, and data-component attributes for theming. See Style and brand.
  • Data: GraphQL with typed documents from GraphQL Code Generator, @labdigital/graphql-fetcher with persisted documents, and TanStack Query
  • State: TanStack Query for server data, nuqs for state in the URL (such as filters), and React transitions with useOptimistic
  • Forms: React Aria Components with Zod. One Zod schema validates on the client and on the server.
  • Internationalization: next-intl. Every package with text ships its messages in English, Dutch, German, French, and Spanish. See Add a language.
  • Testing: Storybook 10 with story tests in Vitest browser mode and Playwright (in the storefront packages), Vitest with Testing Library, and Playwright end-to-end tests (in the reference sites)
  • Icons: Lucide, through the icon set of @evolve-storefront/ui

Training & certification resources

Section titled “Training & certification resources”

Backend

Section titled “Backend”

The backend is a federated GraphQL API. A gateway joins the schemas of your services (subgraphs) into one API. Each service is a Node.js process that composes framework modules for its domain: discover for the catalog and content, purchase for everything from the cart onward. See How Evolve fits together.

Technologies

Section titled “Technologies”
  • Runtime: Node.js 26. Services run their TypeScript sources directly, with Node.js type stripping, so the backend has no build step.
  • GraphQL federation: Hive Router (written in Rust) as the gateway, published as the Evolve gateway image, and GraphQL Yoga in every subgraph
  • HTTP server: Fastify 5
  • Data loading: DataLoader, to batch and cache calls to the vendors per request
  • Authentication: federated tokens in cookies that only the gateway can read, and JWTs with jose. See Authentication.
  • Caching: Redis, with Keyv and an in-memory LRU cache. See Caching.
  • Events: an internal event bus with one adapter per cloud. See React to events.
  • Email: React Email templates, sent by the notify service. See Send emails.
  • AI assistants: a Model Context Protocol (MCP) server from @evolve-framework/mcp-core. See Expose your API to AI assistants.

Training & certification resources

Section titled “Training & certification resources”

Commerce & vendors

Section titled “Commerce & vendors”

Evolve connects your storefront to the commerce engine, CMS, search, and payment providers you choose. Each vendor is a framework package. The engines and CMSs serve the same GraphQL schema, so the storefront’s queries do not depend on the vendor behind them. See Engines and capabilities.

Technologies

Section titled “Technologies”
  • Commerce engines: commercetools (in both reference sites), Medusa, and Salesforce B2C Commerce Cloud. See Switch commerce engine.
  • Payment providers (on commercetools): Adyen, Mollie, Stripe, Buckaroo, Pay.nl, and pay on account. See Add a payment provider.
  • Search: the commerce engine’s own search (B2C reference site), Algolia (B2B reference site), and Meilisearch. See Add search.
  • CMS: Storyblok (B2C reference site), Contentful (B2B reference site), and Payload. See Add a CMS.

Training & certification resources

Section titled “Training & certification resources”

Cloud infrastructure & DevOps

Section titled “Cloud infrastructure & DevOps”

An Evolve project runs on Google Cloud, Azure, or AWS. Each service picks its cloud through a cloud-adapter-* package, and Terraform sets up both the cloud resources and the vendors. The B2C reference site runs on Google Cloud, the B2B reference site on Azure. See Infrastructure and Deploying.

Technologies

Section titled “Technologies”
  • Clouds: Google Cloud, Azure, and AWS, with the cloud-adapter-gcp, cloud-adapter-azure, and cloud-adapter-aws packages
  • Runtimes: Cloud Run services and jobs on Google Cloud; Container Apps, Container App jobs, and Azure Functions on Azure; Lambda on AWS
  • Messaging: Pub/Sub on Google Cloud; Event Grid and Service Bus on Azure; SQS and EventBridge on AWS
  • Caching: Redis (Memorystore, Azure Managed Redis, or ElastiCache)
  • Infrastructure as code: Terraform, for the cloud resources and for the setup of commercetools and the CMS, with Evolve Terraform modules
  • Containers: Docker, with one image per service, and Docker Compose for the local services (gateway, Redis, OpenTelemetry Collector, Jaeger, Prometheus, and Mailpit)
  • Deployment: GitHub Actions, rolling out with evolve-deploy

Training & certification resources

Section titled “Training & certification resources”

Observability & monitoring

Section titled “Observability & monitoring”

Every service reports traces, logs, and errors, and the storefront reports the same from your site’s own code. Traces go to any backend that accepts OTLP. See Observability.

Technologies

Section titled “Technologies”
  • Tracing and metrics: OpenTelemetry, started by @evolve-framework/core in the services and by @vercel/otel in the site, exported over OTLP
  • Logging: the framework’s logger, built on Pino, writing JSON lines to stdout
  • Error tracking: Sentry for Next.js and Node.js
  • Telemetry backends: Honeycomb for the deployed reference sites; on your machine, Jaeger for traces and Prometheus for metrics
  • Schema registry: Hive. The gateway reads the composed supergraph from Hive, and hive schema:check checks a subgraph’s schema change before it ships.

Training & certification resources

Section titled “Training & certification resources”

Development tools & quality

Section titled “Development tools & quality”

A project is a pnpm monorepo. The same checks run on your machine and in CI: formatting, linting, type checks, unused code, dependency versions, and tests. See Testing and the Evolve CLI.

Technologies

Section titled “Technologies”
  • Package management: pnpm workspaces with a strict catalog for every shared version, syncpack to keep versions consistent, and a minimum release age of seven days for new dependency versions
  • Build orchestration: Turborepo
  • Code quality: Biome for linting and formatting. In the reference sites, Prettier formats the files Biome does not, such as YAML and Markdown.
  • Language: TypeScript 7, written so Node.js can strip the types (no enums or namespaces)
  • Code generation: GraphQL Code Generator, for resolver types in the services and typed documents in the site
  • Testing: Vitest, MSW to mock HTTP APIs, and @labdigital/commercetools-mock to mock the commercetools API
  • Dead code: Knip, for unused files, exports, and dependencies
  • Releases: Changesets
  • Task runner: Task, for tasks such as decrypting secrets and starting the local services
  • Dependency security: pnpm audit in the CI of the framework and storefront packages

Training & certification resources

Section titled “Training & certification resources”

Source control & collaboration

Section titled “Source control & collaboration”

Projects live on GitHub, and GitHub Actions validates, builds, and deploys every change. Secrets are encrypted in the repository, so a new developer needs access to the key, not a copy of the secrets.

Technologies

Section titled “Technologies”
  • Version control: Git with GitHub, and Conventional Commits for commit messages
  • CI/CD: GitHub Actions, with workflows to validate code, build images, release, and run end-to-end smoke tests
  • Secrets: SOPS. The .env file is encrypted with an age key. By default the key is kept in 1Password, and task env-decrypt reads it with the 1Password CLI; you can keep it somewhere else. Terraform secrets are SOPS files encrypted with Google Cloud KMS or Azure Key Vault.
  • Runtime configuration: the cloud’s config store and secret store (see Infrastructure)

Training & certification resources

Section titled “Training & certification resources”