Implementation:Cypress io Cypress DetectFramework Setup

Knowledge Sources	Cypress
Domains	Configuration, Component_Testing
Last Updated	2026-02-12 00:00 GMT

Overview

Concrete tool for detecting project framework, bundler, and language during the Cypress setup wizard provided by the @packages/scaffold-config module.

Description

This implementation combines detectFramework (L35-82) and detectLanguage (L126-222) from packages/scaffold-config/src/detect.ts. The detectLanguage function checks for existing config file extensions, then falls back to inspecting package.json dependencies for TypeScript. Together, they provide the full technology stack detection needed for config scaffolding.

Usage

Called during the Launchpad setup wizard after testing type selection to auto-detect the project stack and present the user with configuration options.

Code Reference

Source Location

• Repository: cypress-io/cypress
• File: packages/scaffold-config/src/detect.ts
• Lines: L35-82 (detectFramework), L126-222 (detectLanguage)

Signature

export async function detectFramework(
  projectPath: string,
  frameworks: Cypress.ResolvedComponentFrameworkDefinition[]
): Promise<DetectFramework>

export async function detectLanguage(options: {
  projectRoot: string
  customConfigFile?: string
  pkgJson: { dependencies?: Record<string, string>, devDependencies?: Record<string, string> }
}): Promise<'js' | 'ts'>

Import

import { detectFramework, detectLanguage } from '@packages/scaffold-config'

I/O Contract

Inputs

Name	Type	Required	Description
projectPath	string	Yes	Absolute path to project root
frameworks	ResolvedComponentFrameworkDefinition[]	Yes	Known framework definitions
pkgJson	object	Yes	Parsed package.json with dependencies
customConfigFile	string	No	Custom config file path

Outputs

Name	Type	Description
framework	ResolvedComponentFrameworkDefinition	Detected framework (React, Vue, Angular, etc.)
bundler	'vite' or 'webpack'	Detected bundler
language	'js' or 'ts'	Detected project language

Usage Examples

Setup Wizard Detection

import { detectFramework, detectLanguage } from '@packages/scaffold-config'
import { CT_FRAMEWORKS } from '@packages/scaffold-config/src/frameworks'
import fs from 'fs-extra'

const pkgJson = await fs.readJson('/project/package.json')
const { framework, bundler } = await detectFramework('/project', CT_FRAMEWORKS)
const language = await detectLanguage({
  projectRoot: '/project',
  pkgJson,
})

console.log(`Stack: ${framework?.name} + ${bundler} (${language})`)

Related Pages

Implements Principle

• Principle:Cypress_io_Cypress_Framework_and_Bundler_Detection