@netlify/framework-info
Advanced tools
@netlify/framework-info is an npm package designed to provide information about various web frameworks. It helps in detecting the framework used in a project and provides relevant details, which can be useful for deployment and configuration purposes.
Detect Framework
This feature allows you to detect the framework used in a given project directory. The `getFramework` function returns details about the detected framework, such as its name and version.
const { getFramework } = require('@netlify/framework-info');
async function detectFramework() {
const framework = await getFramework({
projectDir: process.cwd(),
});
console.log(framework);
}
detectFramework();List All Frameworks
This feature provides a list of all frameworks that the package can detect. The `listFrameworks` function returns an array of framework objects, each containing details like name, category, and detection criteria.
const { listFrameworks } = require('@netlify/framework-info');
async function listAllFrameworks() {
const frameworks = await listFrameworks();
console.log(frameworks);
}
listAllFrameworks();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:
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 } 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' }, { name: 'HTTP' }]
// },
// 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' }, { name: 'HTTP' }]
// },
// 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' }, { name: 'HTTP' }]
// },
// build: {
// commands: ['vue-cli-service build'],
// directory: 'dist'
// },
// env: {},
// plugins: []
// }
npm install @netlify/framework-info
options: 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" }
}
]
}
FAQs
Framework detection utility
The npm package @netlify/framework-info receives a total of 83,206 weekly downloads. As such, @netlify/framework-info popularity was classified as popular.
We found that @netlify/framework-info demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 23 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.