This is an auto-generated directory and is not intended to be changed!
The .config/
directory holds basic configuration for the different tools
that are used to develop, test and build the project. In order to make it updates easier we ask you to
not edit files in this folder to extend configuration.
Bear in mind that you are doing it at your own risk, and that extending any of the basic configuration can lead to issues around working with the project.
Edit the .eslintrc
file in the project root in order to extend the ESLint configuration.
Example:
{
"extends": "./.config/.eslintrc",
"rules": {
"react/prop-types": "off"
}
}
Edit the .prettierrc.js
file in the project root in order to extend the Prettier configuration.
Example:
module.exports = {
// Prettier configuration provided by Grafana scaffolding
...require('./.config/.prettierrc.js'),
semi: false,
};
There are two configuration in the project root that belong to Jest: jest-setup.js
and jest.config.js
.
jest-setup.js
: A file that is run before each test file in the suite is executed. We are using it to
set up the Jest DOM for the testing library and to apply some polyfills. (link to Jest docs)
jest.config.js
: The main Jest configuration file that extends the Grafana recommended setup. (link to Jest docs)
A common issue found with the current jest config involves importing an npm package which only offers an ESM build. These packages cause jest to error with SyntaxError: Cannot use import statement outside a module
. To work around this we provide a list of known packages to pass to the [transformIgnorePatterns](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring)
jest configuration property. If need be this can be extended in the following way:
process.env.TZ = 'UTC';
const { grafanaESModules, nodeModulesToTransform } = require('./jest/utils');
module.exports = {
// Jest configuration provided by Grafana
...require('./.config/jest.config'),
// Inform jest to only transform specific node_module packages.
transformIgnorePatterns: [nodeModulesToTransform([...grafanaESModules, 'packageName'])],
};
Edit the tsconfig.json
file in the project root in order to extend the TypeScript configuration.
Example:
{
"extends": "./.config/tsconfig.json",
"compilerOptions": {
"preserveConstEnums": true
}
}
Follow these steps to extend the basic Webpack configuration that lives under .config/
:
Create a new config file that is going to extend the basic one provided by Grafana.
It can live in the project root, e.g. webpack.config.ts
.
We are going to use webpack-merge
for this.
// webpack.config.ts
import type { Configuration } from 'webpack';
import { merge } from 'webpack-merge';
import grafanaConfig from './.config/webpack/webpack.config';
const config = async (env): Promise<Configuration> => {
const baseConfig = await grafanaConfig(env);
return merge(baseConfig, {
// Add custom config here...
output: {
asyncChunks: true,
},
});
};
export default config;
We need to update the scripts
in the package.json
to use the extended Webpack configuration.
Update for build
:
-"build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
+"build": "webpack -c ./webpack.config.ts --env production",
Update for dev
:
-"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
+"dev": "webpack -w -c ./webpack.config.ts --env development",