|
| 1 | +# `webperf` buildchain |
| 2 | + |
| 3 | +This buildchain is a self-contained build system for the `webperf` JavaScript bundle. |
| 4 | + |
| 5 | +## Overview |
| 6 | + |
| 7 | +The buildchain builds & bundles all of the `webperf` TypeScript/JavaScript code, Vue components, CSS, and any other static resources via Vite via a Docker container. |
| 8 | + |
| 9 | +Source files: |
| 10 | + |
| 11 | +`buildchain/src/` |
| 12 | + |
| 13 | +Built distribution files: |
| 14 | + |
| 15 | +`src/web/assets/dist/` |
| 16 | + |
| 17 | +## Prerequisites |
| 18 | + |
| 19 | +To run the buildchain for development purposes: |
| 20 | + |
| 21 | +- You must have [Docker Desktop](https://www.docker.com/products/docker-desktop/) (or the equivalent) installed |
| 22 | +- We assume you're using the [`plugindev`](https://github.com/nystudio107/plugindev) development project. If you're not, see the **If you're not using `plugindev`** section below |
| 23 | + |
| 24 | +## Commands |
| 25 | + |
| 26 | +This buildchain uses `make` as an interface to the buildchain. The following commands are available from the `buildchain/` directory: |
| 27 | + |
| 28 | +- `make build` - Do a distribution build of the CantoDamAsset asset bundle resources into `src/web/assets/dist/` |
| 29 | +- `make dev` - Start Vite HMR dev server for local development |
| 30 | +- `make clean` - Remove `node_modules/` and `package-lock.json` to start clean (need to run `make image-build` after doing this, see below) |
| 31 | +- `make npm XXX` - Run an `npm` command inside the container, e.g.: `make npm run lint` or `make npm install` |
| 32 | +- `make ssh` - Open up a shell session into the buildchain Docker container |
| 33 | +- `make image-build` - Build the Docker image & run `npm install` |
| 34 | + |
| 35 | +### If you're not using `plugindev` |
| 36 | + |
| 37 | +If you're not using the [`plugindev`](https://github.com/nystudio107/plugindev) development project, you'll need to follow these steps in order to use the HMR for development in local dev: |
| 38 | + |
| 39 | +- For HMR during local development, you'll need the following variable set in your project's `.env` file: |
| 40 | +```dotenv |
| 41 | +VITE_PLUGIN_DEVSERVER=1 |
| 42 | +``` |
| 43 | +The [`craft-plugin-vite`](https://github.com/nystudio107/craft-plugin-vite) library looks for this environment variable to determine whether it should check for a running Vite dev server. |
| 44 | + |
| 45 | +#### If you're also using Docker |
| 46 | + |
| 47 | +- So your project can access the buildchain container over the [internal Docker network](https://docs.docker.com/compose/networking/), you'll need to set the `DOCKER_NETWORK` environment variable before running any buildchain `make` commands: |
| 48 | +```bash |
| 49 | +env DOCKER_NETWORK=myproject_default make dev |
| 50 | +``` |
| 51 | +...or use any other method for [setting environment variables](https://www.twilio.com/blog/how-to-set-environment-variables.html). This environment variable needs to be set in the shell where you run the buildchain's various `make` commands from, so setting it in your project's `.env` file won't work. |
| 52 | + |
| 53 | +The network your project uses is typically the project name with `_default` appended to it, but it can be explicitly set in the `docker-composer.yaml` like this: |
| 54 | +```yaml |
| 55 | +networks: |
| 56 | + default: |
| 57 | + name: someproject_default |
| 58 | +``` |
0 commit comments