github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/README.md (about)

     1  # Webapp
     2  
     3  # Tests
     4  ## Snapshot tests
     5  Similar to what we do in cypress, we take snapshots of the canvas.
     6  
     7  To make the results reproducible, we run in `docker`
     8  
     9  To update the snapshots, run
    10  ```
    11  yarn test:ss
    12  ```
    13  
    14  To check the snapshots, run
    15  ```
    16  yarn test:ss:check
    17  ```
    18  
    19  Here ONLY tests matching the regex `group:snapshot` will run.
    20  And the opposite is true, when running `yarn test`, these tests with `group:snapshot` in the name will be ignored.
    21  
    22  # dependencies vs devDependencies
    23  When installing a new package, consider the following:
    24  Add to `dependencies` if it's **absolutely necessary to build** the application.
    25  Anything else (local dev, CI) add too `devDependencies`.
    26  
    27  The reasoning is that when building the docker image we install only `dependencies` required to build the application, by running `yarn install --production`.
    28  Linting, testing etc is assumed to be ran in a different CI step.
    29  
    30  # Using alias imports
    31  Alias imports allow importing as if it was an external package, for example:
    32  ```javascript
    33  import Button from '@ui/Button';
    34  ```
    35  
    36  To be able to do that, you need to add the alias to the following files:
    37  * `.storybook/main.js`
    38  * `scripts/webpack/shared.ts`
    39  * `tsconfig.json`
    40  * `jest.config.js`
    41  
    42  # Developing the webapp/templates page
    43  By default, developing pages other than the index require a bit of setup:
    44  
    45  
    46  For example, acessing http://locahlost:4040/forbidden won't work
    47  To be able to access it, update the variable `pages` in `scripts/webpack.common.ts` to allow building all pages when in dev mode.
    48  
    49  Beware, this will make the (local) build slower.
    50  
    51  # Investigating webpack speed
    52  Run with `--progress=profile` to get more info.
    53  
    54  for example `yarn dev --progress=profile`
    55  
    56  
    57  Another interesting flag is `--json`, which you can then analyze on https://chrisbateman.github.io/webpack-visualizer/
    58  
    59  # Testing baseURL
    60  It can be a bit of a pain in the ass.
    61  
    62  Install nginx
    63  ```
    64  nginx -c cypress/base-url/nginx.conf -g 'daemon off;'
    65  ```
    66  
    67  Then run the server with `PYROSCOPE_BASE_URL=/pyroscope`
    68  
    69  ## Testing baseURL + auth
    70  Same as before, but also run the `oauth2-mock-server`:
    71  ```
    72  node scripts/oauth-mock/oauth-mock.js
    73  ```
    74  
    75  Also run the server with
    76  ```
    77  make dev SERVERPARAMS=--config=scripts/oauth-mock/pyroscope-config-base-url.yml
    78  ```