|
| 1 | +# Default build configuration by Grafana |
| 2 | + |
| 3 | +**This is an auto-generated directory and is not intended to be changed! ⚠️** |
| 4 | + |
| 5 | +The `.config/` directory holds basic configuration for the different tools |
| 6 | +that are used to develop, test and build the project. In order to make it updates easier we ask you to |
| 7 | +not edit files in this folder to extend configuration. |
| 8 | + |
| 9 | +## How to extend the basic configs? |
| 10 | + |
| 11 | +Bear in mind that you are doing it at your own risk, and that extending any of the basic configuration can lead |
| 12 | +to issues around working with the project. |
| 13 | + |
| 14 | +### Extending the ESLint config |
| 15 | + |
| 16 | +Edit the `eslint.config.mjs` file in the project root to extend the ESLint configuration. The following example disables deprecation notices for source files. |
| 17 | + |
| 18 | +**Example:** |
| 19 | + |
| 20 | +```javascript |
| 21 | +import { defineConfig } from 'eslint/config'; |
| 22 | +import baseConfig from './.config/eslint.config.mjs'; |
| 23 | + |
| 24 | +export default defineConfig([ |
| 25 | + { |
| 26 | + ignores: [ |
| 27 | + //... |
| 28 | + ], |
| 29 | + }, |
| 30 | + ...baseConfig, |
| 31 | + { |
| 32 | + files: ['src/**/*.{ts,tsx}'], |
| 33 | + rules: { |
| 34 | + '@typescript-eslint/no-deprecated': 'off', |
| 35 | + }, |
| 36 | + }, |
| 37 | +]); |
| 38 | +``` |
| 39 | + |
| 40 | +--- |
| 41 | + |
| 42 | +### Extending the Prettier config |
| 43 | + |
| 44 | +Edit the `.prettierrc.js` file in the project root in order to extend the Prettier configuration. |
| 45 | + |
| 46 | +**Example:** |
| 47 | + |
| 48 | +```javascript |
| 49 | +module.exports = { |
| 50 | + // Prettier configuration provided by Grafana scaffolding |
| 51 | + ...require('./.config/.prettierrc.js'), |
| 52 | + |
| 53 | + semi: false, |
| 54 | +}; |
| 55 | +``` |
| 56 | + |
| 57 | +--- |
| 58 | + |
| 59 | +### Extending the Jest config |
| 60 | + |
| 61 | +There are two configuration in the project root that belong to Jest: `jest-setup.js` and `jest.config.js`. |
| 62 | + |
| 63 | +**`jest-setup.js`:** A file that is run before each test file in the suite is executed. We are using it to |
| 64 | +set up the Jest DOM for the testing library and to apply some polyfills. ([link to Jest docs](https://jestjs.io/docs/configuration#setupfilesafterenv-array)) |
| 65 | + |
| 66 | +**`jest.config.js`:** The main Jest configuration file that extends the Grafana recommended setup. ([link to Jest docs](https://jestjs.io/docs/configuration)) |
| 67 | + |
| 68 | +#### ESM errors with Jest |
| 69 | + |
| 70 | +A common issue with the current jest config involves importing an npm package that 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: |
| 71 | + |
| 72 | +```javascript |
| 73 | +process.env.TZ = 'UTC'; |
| 74 | +const { grafanaESModules, nodeModulesToTransform } = require('./config/jest/utils'); |
| 75 | + |
| 76 | +module.exports = { |
| 77 | + // Jest configuration provided by Grafana |
| 78 | + ...require('./.config/jest.config'), |
| 79 | + // Inform jest to only transform specific node_module packages. |
| 80 | + transformIgnorePatterns: [nodeModulesToTransform([...grafanaESModules, 'packageName'])], |
| 81 | +}; |
| 82 | +``` |
| 83 | + |
| 84 | +--- |
| 85 | + |
| 86 | +### Extending the TypeScript config |
| 87 | + |
| 88 | +Edit the `tsconfig.json` file in the project root in order to extend the TypeScript configuration. |
| 89 | + |
| 90 | +**Example:** |
| 91 | + |
| 92 | +```json |
| 93 | +{ |
| 94 | + "extends": "./.config/tsconfig.json", |
| 95 | + "compilerOptions": { |
| 96 | + "preserveConstEnums": true |
| 97 | + } |
| 98 | +} |
| 99 | +``` |
| 100 | + |
| 101 | +--- |
| 102 | + |
| 103 | +### Extending the Webpack config |
| 104 | + |
| 105 | +Follow these steps to extend the basic Webpack configuration that lives under `.config/`: |
| 106 | + |
| 107 | +#### 1. Create a new Webpack configuration file |
| 108 | + |
| 109 | +Create a new config file that is going to extend the basic one provided by Grafana. |
| 110 | +It can live in the project root, e.g. `webpack.config.ts`. |
| 111 | + |
| 112 | +#### 2. Merge the basic config provided by Grafana and your custom setup |
| 113 | + |
| 114 | +We are going to use [`webpack-merge`](https://github.com/survivejs/webpack-merge) for this. |
| 115 | + |
| 116 | +```typescript |
| 117 | +// webpack.config.ts |
| 118 | +import type { Configuration } from 'webpack'; |
| 119 | +import { merge } from 'webpack-merge'; |
| 120 | +import grafanaConfig, { type Env } from './.config/webpack/webpack.config'; |
| 121 | + |
| 122 | +const config = async (env: Env): Promise<Configuration> => { |
| 123 | + const baseConfig = await grafanaConfig(env); |
| 124 | + |
| 125 | + return merge(baseConfig, { |
| 126 | + // Add custom config here... |
| 127 | + output: { |
| 128 | + asyncChunks: true, |
| 129 | + }, |
| 130 | + }); |
| 131 | +}; |
| 132 | + |
| 133 | +export default config; |
| 134 | +``` |
| 135 | + |
| 136 | +#### 3. Update the `package.json` to use the new Webpack config |
| 137 | + |
| 138 | +We need to update the `scripts` in the `package.json` to use the extended Webpack configuration. |
| 139 | + |
| 140 | +**Update for `build`:** |
| 141 | + |
| 142 | +```diff |
| 143 | +-"build": "webpack -c ./.config/webpack/webpack.config.ts --env production", |
| 144 | ++"build": "webpack -c ./webpack.config.ts --env production", |
| 145 | +``` |
| 146 | + |
| 147 | +**Update for `dev`:** |
| 148 | + |
| 149 | +```diff |
| 150 | +-"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development", |
| 151 | ++"dev": "webpack -w -c ./webpack.config.ts --env development", |
| 152 | +``` |
| 153 | + |
| 154 | +### Configure grafana image to use when running docker |
| 155 | + |
| 156 | +By default, `grafana-enterprise` will be used as the docker image for all docker related commands. If you want to override this behavior, simply alter the `docker-compose.yaml` by adding the following build arg `grafana_image`. |
| 157 | + |
| 158 | +**Example:** |
| 159 | + |
| 160 | +```yaml |
| 161 | +version: '3.7' |
| 162 | + |
| 163 | +services: |
| 164 | + grafana: |
| 165 | + extends: |
| 166 | + file: .config/docker-compose-base.yaml |
| 167 | + service: grafana |
| 168 | + build: |
| 169 | + args: |
| 170 | + grafana_version: ${GRAFANA_VERSION:-9.1.2} |
| 171 | + grafana_image: ${GRAFANA_IMAGE:-grafana} |
| 172 | +``` |
| 173 | +
|
| 174 | +In this example, we assign the environment variable `GRAFANA_IMAGE` to the build arg `grafana_image` with a default value of `grafana`. This will allow you to set the value while running the docker compose commands, which might be convenient in some scenarios. |
| 175 | + |
| 176 | +--- |
0 commit comments