Framework detection utility.
Detects which framework a specific website is using. The framework's build/dev 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, Assemble, DocPad, Harp, Metalsmith, Roots, Wintersmith
- Front-end frameworks: create-react-app, Vue, Sapper, Angular, Ember, Svelte, Expo, Quasar
- Build tools: Parcel, Brunch, Grunt, Gulp
If you're looking for a way to run framework-info via CLI check the
build-info project.
Additions and updates are welcome!
import { listFrameworks, hasFramework, getFramework, getFrameworkById } from '@netlify/framework-info'
console.log(await listFrameworks({ projectDir: './path/to/gatsby/website' }))
// [
// {
// id: 'gatsby',
// name: 'Gatsby',
// category: 'static_site_generator',
// dev: {
// commands: ['gatsby develop'],
// port: 8000,
// pollingStrategies: [{ name: 'TCP' }]
// },
// build: {
// commands: ['gatsby build'],
// directory: 'public'
// },
// staticAssetsDirectory: "static",
// env: { GATSBY_LOGGER: 'yurnalist' },
// plugins: []
// }
// ]
console.log(await listFrameworks({ projectDir: './path/to/vue/website' }))
// [
// {
// id: 'vue',
// name: 'Vue.js',
// category: 'frontend_framework',
// dev: {
// commands: ['npm run serve'],
// port: 8080,
// pollingStrategies: [{ name: 'TCP' }]
// },
// build: {
// commands: ['vue-cli-service build'],
// directory: 'dist'
// },
// env: {},
// plugins: []
// }
// ]
console.log(await hasFramework('vue', { projectDir: './path/to/vue/website' }))
// true
console.log(await getFramework('vue', { projectDir: './path/to/vue/website' }))
// {
// id: 'vue',
// name: 'Vue.js',
// category: 'frontend_framework',
// dev: {
// commands: ['npm run serve'],
// port: 8080,
// pollingStrategies: [{ name: 'TCP' }]
// },
// build: {
// commands: ['vue-cli-service build'],
// directory: 'dist'
// },
// env: {},
// plugins: []
// }
console.log(getFrameworkById('vue'))
// {
// id: 'vue',
// name: 'Vue.js',
// category: 'frontend_framework',
// dev: {
// commands: ['npm run serve'],
// port: 8080,
// pollingStrategies: [{ name: 'TCP' }]
// },
// build: {
// commands: ['vue-cli-service build'],
// directory: 'dist'
// },
// env: {},
// plugins: []
// }npm install @netlify/framework-infooptions: object?
Return value: Promise<object[]>
Type: string
Default value: process.cwd()
Path to the website's directory.
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.
Type: string
Id such as "gatsby".
Type: string
Framework name such as "Gatsby".
Type: string
Category among "static_site_generator", "frontend_framework" and "build_tool".
Type: object
Information about the dev command.
Type: string[]
Dev command. There might be several alternatives.
Type: number
Server port.
Type: object[]
Polling strategies to use when checking if the dev server is ready.
Type: object
Information about the build command.
Type: string[]
Build command. There might be several alternatives.
Type: string
Relative path to the directory where files are built.
Type: string
Directory where the framework stores static assets. Can be undefined.
Type: object
Environment variables that should be set when calling the dev command.
Type: string[]
A list of recommend Netlify build plugins to install for the framework.
options: object?
Return value: Promise<boolean>
Same as listFramework() except only for a specific framework and returns a boolean.
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.
$ framework-info [projectDirectory]This prints the ids 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.
Each framework is a JSON file in the /src/frameworks/ directory. For example:
{
"id": "gatsby",
"name": "Gatsby",
"category": "static_site_generator",
"detect": {
"npmDependencies": ["gatsby"],
"excludedNpmDependencies": [],
"configFiles": ["gatsby-config.js"]
},
"dev": {
"command": "gatsby develop",
"port": 8000,
"pollingStrategies": [{ "name": "TCP" }, { "name": "HTTP" }]
},
"build": {
"command": "gatsby build",
"directory": "public"
},
"staticAssetsDirectory": "static",
"env": { "GATSBY_LOGGER": "yurnalist" },
"plugins": []
}All properties are required.
Type: string
Id of the framework.
Type: string
Name of the framework.
Type: string
One of "static_site_generator", "frontend_framework" or "build_tool".
Type: object
Information used to detect this framework
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.
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.
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.
Type: object
Parameters to detect the dev command.
Type: string
Default dev command.
Type: number
Local dev server port.
Type: object[]
Polling strategies to use when checking if the dev server is ready.
Type: object
Parameters to detect the build command.
Type: string
Default build command.
Type: string
Directory where built files are written to.
Type: string
Directory where the framework stores static assets where relevant for the framework.
Type: object
Environment variables that should be set when running the dev command.
Type: object[]
A list of Netlify build plugins package names and conditions. If a condition is met for a plugin it will be returned in the framework's plugin's list.
For example
{
"plugins": [
{
"packageName": "@netlify/plugin-nextjs",
"condition": { "minNodeVersion": "10.13.0" }
}
]
}