> ## Documentation Index
> Fetch the complete documentation index at: https://aspect.build/llms.txt
> Use this file to discover all available pages before exploring further.

# Don’t disrupt workflows

> Avoid disrupting developer workflows during Bazel migration by preserving Makefiles, package scripts, and editor integrations that engineers rely on daily.

Keep the `Makefile`!

If the developer types `make test` or `yarn build` or `npm run serve` today, maybe they still can.
Avoid changing the topmost user-facing part of the tooling where possible.

Most product developers aren't interested in build system details and don't care about whatever change you've made, they don't want it reflected in what they need to type.
Retraining is expensive and burns goodwill.

Also remember that many workflows take place in an editor.
Bazel disrupts the paths on disk where editor extensions look for libraries.
Be aware of this problem and be proactive to find and advertise workarounds for keeping editors happy.

<Note>
  Aspect's rules\_py is a good example: it creates a standard Python virtualenv with a `site-packages` folder so that tools like editors find the structure they expect and keep working.
</Note>

## Watch Mode

As another example, provide a watch mode with bazel-watcher.

It's really nice to have a "live" development server where code changes are immediately visible.
To make this possible, we need Bazel to run in "watch mode" where changes to sources are automatically reflected in the `bazel-out` tree without us having to manually run `bazel` after every edit.

Bazel doesn't have a watch mode built-in, but [bazel-watcher](https://github.com/bazelbuild/bazel-watcher) adds this capability.
That project releases a tool named `ibazel`, short for "interactive Bazel".

Our example repo has `ibazel` installed and on the `PATH`, thanks to `direnv`.

We have a podcast episode on the technique used to manage the PATH:
[https://www.youtube.com/watch?v=TDyUvaXaZrc\&list=PLLU28e\_DRwdtpojOqWM5UeFyxad7m9gCF\&index=2](https://www.youtube.com/watch?v=TDyUvaXaZrc\&list=PLLU28e_DRwdtpojOqWM5UeFyxad7m9gCF\&index=2)

It can also be installed in these alternative ways:

* Mac: `brew install ibazel`
* If you have npm installed: `npm install -g @bazel/ibazel`
* Download a binary from the [releases page](https://github.com/bazelbuild/bazel-watcher/releases/)
  and install it as `ibazel` on your `$PATH`.

## Exercise: A live devserver

Let's practice using it for the frontend, since JavaScript engineers are accustomed to having watch mode.

If you didn't write a `BUILD` file for the frontend, you can checkout the `packages` branch.

The target we run has to be aware of the Bazel-watcher protocol:

* The target must be tagged to indicate its awareness: `tags = ["ibazel_notify_changes"]`
  This tag prevents the binary being restarted every time the files change.
* The program must read from `stdin` to find out when a build has finished.
  Bazel-watcher will write lines like `IBAZEL_BUILD_COMPLETED SUCCESS`

[`js_run_devserver`](https://github.com/aspect-build/rules_js/blob/main/docs/js_run_devserver.md) is one such rule that's aware of the protocol.

```
$ ibazel run logger/frontend
```

Click the link to open the site in the browser, then make some edits to `logger/frontend/index.ts`, for example change the `Get Server Logs` text that appears on the button.