Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@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:
Additions and updates are welcome!
const { listFrameworks, hasFramework, getFramework } = require('@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
// },
// build: {
// commands: ['gatsby build'],
// directory: 'public'
// },
// 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
// },
// 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
// },
// build: {
// commands: ['vue-cli-service build'],
// directory: 'dist'
// },
// env: {},
// plugins: []
// }
$ framework-info ./path/to/gatsby/website
gatsby
$ framework-info --long ./path/to/vue/website
[
{
"id": "vue",
"name": 'Vue.js',
"category": "frontend_framework",
"dev": {
"commands": ["npm run serve"],
"port": 8080
},
"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
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: 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
},
"build": {
"command": "gatsby build",
"directory": "public"
},
"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
Parameters to detect the build command.
Type: string
Default build command.
Type: string
Directory where built files are written to.
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 126,842 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.