|
| 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 `.eslintrc` file in the project root in order to extend the ESLint configuration. |
| 17 | + |
| 18 | +**Example:** |
| 19 | + |
| 20 | +```json |
| 21 | +{ |
| 22 | + "extends": "./.config/.eslintrc", |
| 23 | + "rules": { |
| 24 | + "react/prop-types": "off" |
| 25 | + } |
| 26 | +} |
| 27 | +``` |
| 28 | + |
| 29 | +--- |
| 30 | + |
| 31 | +### Extending the Prettier config |
| 32 | + |
| 33 | +Edit the `.prettierrc.js` file in the project root in order to extend the Prettier configuration. |
| 34 | + |
| 35 | +**Example:** |
| 36 | + |
| 37 | +```javascript |
| 38 | +module.exports = { |
| 39 | + // Prettier configuration provided by Grafana scaffolding |
| 40 | + ...require('./.config/.prettierrc.js'), |
| 41 | + |
| 42 | + semi: false, |
| 43 | +}; |
| 44 | +``` |
| 45 | + |
| 46 | +--- |
| 47 | + |
| 48 | +### Extending the Jest config |
| 49 | + |
| 50 | +There are two configuration in the project root that belong to Jest: `jest-setup.js` and `jest.config.js`. |
| 51 | + |
| 52 | +**`jest-setup.js`:** A file that is run before each test file in the suite is executed. We are using it to |
| 53 | +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)) |
| 54 | + |
| 55 | +**`jest.config.js`:** The main Jest configuration file that extends the Grafana recommended setup. ([link to Jest docs](https://jestjs.io/docs/configuration)) |
| 56 | + |
| 57 | +#### ESM errors with Jest |
| 58 | + |
| 59 | +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: |
| 60 | + |
| 61 | +```javascript |
| 62 | +process.env.TZ = 'UTC'; |
| 63 | +const { grafanaESModules, nodeModulesToTransform } = require('./config/jest/utils'); |
| 64 | + |
| 65 | +module.exports = { |
| 66 | + // Jest configuration provided by Grafana |
| 67 | + ...require('./.config/jest.config'), |
| 68 | + // Inform jest to only transform specific node_module packages. |
| 69 | + transformIgnorePatterns: [nodeModulesToTransform([...grafanaESModules, 'packageName'])], |
| 70 | +}; |
| 71 | +``` |
| 72 | + |
| 73 | +--- |
| 74 | + |
| 75 | +### Extending the TypeScript config |
| 76 | + |
| 77 | +Edit the `tsconfig.json` file in the project root in order to extend the TypeScript configuration. |
| 78 | + |
| 79 | +**Example:** |
| 80 | + |
| 81 | +```json |
| 82 | +{ |
| 83 | + "extends": "./.config/tsconfig.json", |
| 84 | + "compilerOptions": { |
| 85 | + "preserveConstEnums": true |
| 86 | + } |
| 87 | +} |
| 88 | +``` |
| 89 | + |
| 90 | +--- |
| 91 | + |
| 92 | +### Extending the Webpack config |
| 93 | + |
| 94 | +Follow these steps to extend the basic Webpack configuration that lives under `.config/`: |
| 95 | + |
| 96 | +#### 1. Create a new Webpack configuration file |
| 97 | + |
| 98 | +Create a new config file that is going to extend the basic one provided by Grafana. |
| 99 | +It can live in the project root, e.g. `webpack.config.ts`. |
| 100 | + |
| 101 | +#### 2. Merge the basic config provided by Grafana and your custom setup |
| 102 | + |
| 103 | +We are going to use [`webpack-merge`](https://github.com/survivejs/webpack-merge) for this. |
| 104 | + |
| 105 | +```typescript |
| 106 | +// webpack.config.ts |
| 107 | +import type { Configuration } from 'webpack'; |
| 108 | +import { merge } from 'webpack-merge'; |
| 109 | +import grafanaConfig from './.config/webpack/webpack.config'; |
| 110 | + |
| 111 | +const config = async (env): Promise<Configuration> => { |
| 112 | + const baseConfig = await grafanaConfig(env); |
| 113 | + |
| 114 | + return merge(baseConfig, { |
| 115 | + // Add custom config here... |
| 116 | + output: { |
| 117 | + asyncChunks: true, |
| 118 | + }, |
| 119 | + }); |
| 120 | +}; |
| 121 | + |
| 122 | +export default config; |
| 123 | +``` |
| 124 | + |
| 125 | +#### 3. Update the `package.json` to use the new Webpack config |
| 126 | + |
| 127 | +We need to update the `scripts` in the `package.json` to use the extended Webpack configuration. |
| 128 | + |
| 129 | +**Update for `build`:** |
| 130 | + |
| 131 | +```diff |
| 132 | +-"build": "webpack -c ./.config/webpack/webpack.config.ts --env production", |
| 133 | ++"build": "webpack -c ./webpack.config.ts --env production", |
| 134 | +``` |
| 135 | + |
| 136 | +**Update for `dev`:** |
| 137 | + |
| 138 | +```diff |
| 139 | +-"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development", |
| 140 | ++"dev": "webpack -w -c ./webpack.config.ts --env development", |
| 141 | +``` |
| 142 | + |
| 143 | +### Configure grafana image to use when running docker |
| 144 | + |
| 145 | +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`. |
| 146 | + |
| 147 | +**Example:** |
| 148 | + |
| 149 | +```yaml |
| 150 | +version: '3.7' |
| 151 | + |
| 152 | +services: |
| 153 | + grafana: |
| 154 | + container_name: 'myorg-basic-app' |
| 155 | + build: |
| 156 | + context: ./.config |
| 157 | + args: |
| 158 | + grafana_version: ${GRAFANA_VERSION:-9.1.2} |
| 159 | + grafana_image: ${GRAFANA_IMAGE:-grafana} |
| 160 | +``` |
| 161 | +
|
| 162 | +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. |
| 163 | + |
| 164 | +--- |
0 commit comments