<commit_before>---
layout: documentation
title: Building JavaScript Outputs
---

# Building JavaScript Outputs

This page describes the features, rules, and workflows related to building
and testing JavaScript outputs.

**Note:** The Bazel team has not fully verified and does not officially support
the features and workflows described on this page.

## Overview

Bazel supports an incremental and customizable means of building and
testing JavaScript outputs from JavaScript and TypeScript sources. Bazel also
supports build steps needed for frameworks such as Angular.

Bazel rules for building JavaScript outputs are split into three layers, since
you can use JavaScript without TypeScript, and TypeScript without Angular.
This page assumes you are already familiar with Bazel and uses the
[Angular for Bazel sample project](https://github.com/angular/angular-bazel-example)
to illustrate the recommended configuration. You can use the sample project as a
starting point and add your own code to it to start building with Bazel.

If you're new to Bazel, take a look at the ["Getting
Started"](getting-started.html) material before proceeding.

## Setting up your environment

To set up your environment for building JavaScript outputs with Bazel, do the
following:

### Installing Bazel

You can either [Install Bazel](install.html) following the same steps that you
would for backend development, or you can install NodeJS with npm and run
`npm install -g @bazel/bazelisk`.

### Installing iBazel

iBazel, or iterative Bazel, is a "watchdog" version of Bazel that automatically
runs whenever your source files change. Use it to auto-run your tests and
auto-refresh the code served by the development server.

[Install iBazel](https://github.com/bazelbuild/bazel-watcher) globally using
your package manager of choice. The global installation is required so that
iBazel is in your PATH variable. Also install a specific version of iBazel into
your project so that your whole team updates together. For example:

```
npm install --save-dev @bazel/ibazel
npm install --global @bazel/ibazel
```
or

```
yarn add -D @bazel/ibazel
yarn global add @bazel/ibazel
```

To use `ibazel`, simply replace `bazel` with `ibazel` in your Bazel commands.

### Configuring the `bazel.rc` file

Any Bazel build flag or option that can be placed on the command line can also
be set in the project's [`bazel.rc` file](guide.html#bazelrc)
so that it is applied every time Bazel builds or tests the project.

Based on how you want to share Bazel settings across your project and team(s),
you can use any combination of the following techniques:

*   **To use the same Bazel settings for the project**, create a `tools/bazel.rc`
    file at the root of the Bazel workspace. Adding it to the workspace will
    check the file into version control and propagate it to others working on
    the project as well as the CI system.

*   **To personalize Bazel settings for the project but not share them,**
    create a `.bazel.rc` file at the root of the project and add the file to
    your `.gitignore` list.

*   **To personalize Bazel settings for all of your projects on your
    local machine,** create a `.bazel.rc` file in your home directory.

Here's an example `tools/bazel.rc` file to share with your team. Modify this
template as needed.

```
###############################<commit_msg>Replace tools/bazel.rc with .bazelrc<commit_after>---
layout: documentation
title: Building JavaScript Outputs
---

# Building JavaScript Outputs

This page describes the features, rules, and workflows related to building
and testing JavaScript outputs.

**Note:** The Bazel team has not fully verified and does not officially support
the features and workflows described on this page.

## Overview

Bazel supports an incremental and customizable means of building and
testing JavaScript outputs from JavaScript and TypeScript sources. Bazel also
supports build steps needed for frameworks such as Angular.

Bazel rules for building JavaScript outputs are split into three layers, since
you can use JavaScript without TypeScript, and TypeScript without Angular.
This page assumes you are already familiar with Bazel and uses the
[Angular for Bazel sample project](https://github.com/angular/angular-bazel-example)
to illustrate the recommended configuration. You can use the sample project as a
starting point and add your own code to it to start building with Bazel.

If you're new to Bazel, take a look at the ["Getting
Started"](getting-started.html) material before proceeding.

## Setting up your environment

To set up your environment for building JavaScript outputs with Bazel, do the
following:

### Installing Bazel

You can either [Install Bazel](install.html) following the same steps that you
would for backend development, or you can install NodeJS with npm and run
`npm install -g @bazel/bazelisk`.

### Installing iBazel

iBazel, or iterative Bazel, is a "watchdog" version of Bazel that automatically
runs whenever your source files change. Use it to auto-run your tests and
auto-refresh the code served by the development server.

[Install iBazel](https://github.com/bazelbuild/bazel-watcher) globally using
your package manager of choice. The global installation is required so that
iBazel is in your PATH variable. Also install a specific version of iBazel into
your project so that your whole team updates together. For example:

```
npm install --save-dev @bazel/ibazel
npm install --global @bazel/ibazel
```
or

```
yarn add -D @bazel/ibazel
yarn global add @bazel/ibazel
```

To use `ibazel`, simply replace `bazel` with `ibazel` in your Bazel commands.

### Configuring the `.bazelrc` file

Any Bazel build flag or option that can be placed on the command line can also
be set in the project's [`.bazelrc` file](guide.html#bazelrc)
so that it is applied every time Bazel builds or tests the project.

Based on how you want to share Bazel settings across your project and team(s),
you can use any combination of the following techniques:

*   **To use the same Bazel settings for the project**, create a `.bazelrc`
    file at the root of the Bazel workspace. Adding it to the workspace will
    check the file into version control and propagate it to others working on
    the project as well as the CI system.

*   **To personalize Bazel settings for the project but not share them,**
    create a `.bazelrc` file at the root of the project and add the file to
    your `.gitignore` list.

*   **To personalize Bazel settings for all of your projects on your
    local machine,** create a `.bazelrc` file in your home directory.

Here's an example `.bazelrc` file to share with your team. Modify this
template as needed.

```
###############################
{'fraction_non_alphanumeric': 0.0682255438804203, 'fraction_numerical': 0.0, 'mean_word_length': 4.393455706304868, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2109186', 'n_tokens_mistral': 1898, 'n_tokens_neox': 1789, 'n_words': 973}