Package Exports

@netlify/framework-info

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@netlify/framework-info) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Framework detection utility.

Detects which framework a specific website is using. The framework's build/watch commands, directories and server port are also returned.

The following frameworks are detected:

Static site generators: Gatsby, Hugo, Jekyll, Next.js, Nuxt, Hexo, Gridsome, Docusaurus, Eleventy, Middleman, Phenomic, React-static, Stencil, Vuepress
Front-end frameworks: create-react-app, Vue, Sapper, Angular, Ember, Svelte, Expo, Quasar
Build tools: Parcel, Brunch

Additions and updates are welcome!

Example (Node.js)

const { listFrameworks, hasFramework, getFramework } = require('@netlify/framework-info')

console.log(await listFrameworks({ projectDir: './path/to/gatsby/website' }))
// [
//   {
//     name: 'gatsby',
//     category: 'static_site_generator',
//     watch: {
//       commands: ['gatsby develop'],
//       directory: 'public',
//       port: 8000
//     },
//     env: { GATSBY_LOGGER: 'yurnalist' }
//   }
// ]

console.log(await listFrameworks({ projectDir: './path/to/vue/website' }))
// [
//   {
//     name: 'vue',
//     category: 'frontend_framework',
//     watch: {
//       commands: ['npm run serve'],
//       directory: 'dist',
//       port: 8080
//     },
//     env: {}
//   }
// ]

console.log(await hasFramework('vue', { projectDir: './path/to/vue/website' }))
// true

console.log(await getFramework('vue', { projectDir: './path/to/vue/website' }))
// {
//   name: 'vue',
//   category: 'frontend_framework',
//   watch: {
//     commands: ['npm run serve'],
//     directory: 'dist',
//     port: 8080
//   },
//   env: {}
// }

Example (CLI)

$ framework-info ./path/to/gatsby/website
gatsby

$ framework-info --long ./path/to/vue/website
[
  {
    "name": "vue",
    "category": "frontend_framework",
    "watch": {
      "commands": ["npm run serve"],
      "directory": "dist",
      "port": 8080
    },
    "env": {}
  }
]

Installation

npm install @netlify/framework-info

Usage (Node.js)

listFrameworks(options?)

options: object?
Return value: Promise<object[]>

Options

projectDir

Type: string
Default value: process.cwd()

Path to the website's directory.

Return value

This returns a Promise resolving to an array of objects describing each framework. The array can be empty, contain a single object or several objects.

Each object has the following properties.

name

Type: string

Name such as "gatsby".

watch

Type: object

Information about the build command, in watch mode.

commands

Type: string[]

Build command, in watch mode. There might be several alternatives.

port

Type: number

Server port.

env

Type: object

Environment variables that should be set when calling the watch command.

hasFramework(frameworkName, options?)

options: object?
Return value: Promise<boolean>

Same as listFramework() except only for a specific framework and returns a boolean.

getFramework(frameworkName, options?)

options: object?
Return value: Promise<object>

Same as listFramework() except the framework is passed as argument instead of being detected. A single framework object is returned.

Usage (CLI)

$ framework-info [projectDirectory]

This prints the names of each framework.

If known is found, unknown is printed.

Available flags:

--long: Show more information about each framework. The output will be a JSON array.

Add or update a framework

Each framework is a JSON file in the /src/frameworks/ directory. For example:

{
  "name": "gatsby",
  "category": "static_site_generator",
  "detect": {
    "npmDependencies": ["gatsby"],
    "excludedNpmDependencies": [],
    "configFiles": ["gatsby-config.js"]
  },
  "watch": {
    "command": "gatsby develop",
    "directory": "public",
    "port": 8000
  },
  "env": { "GATSBY_LOGGER": "yurnalist" }
}

All properties are required.

name

Type: string

Name of the framework, lowercase.

detect

Type: object

Information used to detect this framework

npmDependencies

Type: string[]

Framework's npm packages. Any project with one of those packages in their package.json (dependencies or devDependencies) will be considered as using the framework.

If empty, this is ignored.

excludedNpmDependencies

Type: string[]

Inverse of npmDependencies. If any project is using one of those packages, it will not be considered as using the framework.

If empty, this is ignored.

configFiles

Type: string[]

Framework's configuration files. Those should be paths relative to the project's directory. Any project with one of configuration files will be considered as using the framework.

If empty, this is ignored.

watch

Type: object

Parameters to detect the watch command.

command

Type: string

Default watch command.

port

Type: number

Local watch server port.

env

Type: object

Environment variables that should be set when running the watch command.