4a2f9f6a75
* Manual changes to support using openapi
.devcontainer/Dockerfile
- Install java in devcontainer
.devcontainer/devcontainer.json
- Make devcontainer automatically install VSCode OpenAPI plugin mentioned in #2769
- Make devcontainer automatically install VSCode plugin for Lit
client-src/elements/chromedash-app.js
- Use the generated client in the frontend.
- Leverage lit-labs/context to provide the client.
- Docs about context and use-cases: https://lit.dev/docs/data/context/
client-src/elements/chromedash-app_test.js
- Add tests for the changes in client-src/elements/chromedash-app.js
client-src/contexts/openapi-context.js
- Declare a context for the openapi client.
framework/basehandlers.py
- add do_put function. previously, all other HTTP verbs had a `do_<verb>` version except PUT.
- Add put function that uses defensive_jsonify. This enables XSSI for PUT requests.
- This needed change is safe to do because the only route using PUT is the admin/blink page which I am migrating into the SPA.
gulpfile.babel.js
- Fix usage of rollupBabel. Previously, @rollup/plugin-node-resolve's default export was named rollupBabel. Which is the wrong package. Fixed to use @rollup/plugin-babel
- Using the correct parameters to rollupBabel from https://www.npmjs.com/package/@rollup/plugin-babel
- Add client-src/contexts/*.js to lint and watch targets
- Add custom onwarn for rollup that comes from using the generated frontend code. Check comment for explanation
package.json
- Add lit-labs/context. Needed for changes in client-src/contexts/openapi-context.js
- Tell NPM to use the generated javascript changes via the `workspaces` key.
- Instead of adding as a dependency like [I initially did here](
|
||
|---|---|---|
| .. | ||
| Dockerfile | ||
| README.md | ||
| devcontainer.json | ||
| docker-compose.yml | ||
README.md
Development Container For Chromium Dashboard
Devcontainers provide a way for developers with an IDE. Like regular containers, devcontainers can be packaged with the appropriate tool versions, extensions, build & test targets out of the box.
Currently, the devcontainer setup leverages docker compose to setup two containers:
- The main development container which contains:
- Node and Python
- Datastore Emulator
- Datastore Emulator viewer
Using the Devcontainer on macOS
An extra step is required for Devcontainer on Mac:
- Click on the Docker icon, go to
Preferences - Go to the Resources tab and select FILE SHARING
- Add
/workspacesto the mountable directories - Click on Apply & Restart
Using the Devcontainer
You can click on the appropriate badge to get the environment setup:
| Service | Click The Badge | Requirements | Pros | Cons |
|---|---|---|---|---|
| Visual Studio Code Remote - Containers |  |
Locally: Docker and Visual Studio Code | Runs locally. Have more resources | Need to have VS Code and Docker setup |
| GitHub Codespaces |
|
Access to Codespaces | Nothing to install locally | Limited resources: 4 cores, 8GB RAM, 32GB Storage |
Upon creating the devcontainer by clicking the appropriate badge, npm run setup is ran automatically.
Note: Sometimes when you open the terminal, it won't automatically activate
the python environment. Either 1) Open a new terminal (usually it works the
second time) or 2) manually activate it by running source cs-env/bin/activate
Most commands from the root README.md work as-is. There are some exceptions due to the database container being outside the main dev container.
| Local | DevContainer |
|---|---|
npm test |
npm run do-tests |
npm start |
npm run start-app |
Accessing the various services
To access the database, database viewer or the app when it is running, go to the "Ports" section next to the "Terminal". Find the Port you are looking for and click on the corresponding Local Address.
There are other ports needed for the IDE itself but mainly, you only need to watch:
| Port | Service |
|---|---|
| 15606 | Datastore Emulator |
| 8888 | Datastore Viewer |
| 8080 | Application (when running) |
| 8000 | Webtest (when running) |
Upgrading versions of Node and Python
In the docker-compose.yml file:
- For Python: Change the
VARIANTargument to the appropirate variant - For Node: Change the
NODE_VERSIONto the appropriate version used by nvm
Troubleshooting
When there are depedency changes and environment changes in requirements.txt or package.json, the Devcontainer needs to be rebuilt:
rm -rf node_modules cs-envin terminal- View -> Command Palette -> Rebuild container without cache