# build

Builds the project for production.

```
npx frontity build [options]
```

The [`frontity serve`](https://api.frontity.org/frontity-cli/run-commands/serve) command will use the files generated by this `frontity build` command.

## Arguments

### **`[options]`**

| Option                                     | Description                                                                                                                                                                                                |
| ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`--development`](#the-development-option) | Builds the project for development. Related environment variable: [`FRONTITY_BUILD_DEVELOPMENT`](#frontity_build_development)                                                                              |
| [`--target`](#the-target-option)           | Builds the project. Create bundles with "es5", "module" or "both". Default target is "both". Related environment variable: [`FRONTITY_BUILD_TARGET`](#frontity_build_target)                               |
| [`--publicPath`](#the-public-path-option)  | Set the [public path](https://webpack.js.org/guides/public-path/) for static assets. Default path is "/static/". Related environment variable: [`FRONTITY_BUILD_PUBLIC_PATH`](#frontity_build_public_path) |
| `--help`                                   | Output usage information                                                                                                                                                                                   |

**Examples**

* Builds the project for production using an external domain `https://external-domain.com/static` as the path for static files

```
npx frontity build --public-path="https://external-domain.com/static"
```

### The `--development` option

This flag correspond to [webpack’s mode parameter](https://webpack.js.org/configuration/mode/) so it will run webpack in the development mode as described [there](https://webpack.js.org/configuration/mode/).

For example, when running react in development mode (when `process.env.NODE_ENV` is set to `development` and NOT to `production`) you get [full error messages and warnings](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build) from React but at the cost of slower performance.

```
npx frontity build --development
```

So, it’s basically the same as just running `frontity dev` except that it will only build the project `once` and will **not run the development server**.

### The `--target` option

The target option allows to decide what features will be transpiled with babel.

With `--target es5`, the support of the following browsers as the minimum is:

```
es5: {
    browsers: [
      "and_chr >= 67",
      "and_ff >= 18",
      "and_uc >= 11.8",
      "android >= 67",
      "not android <= 4.4.4",
      "chrome >= 49",
      "edge >= 12",
      "firefox >= 18",
      "ios_saf >= 10",
      "not op_mini all",
      "op_mob >= 46",
      "opera >= 36",
      "safari >= 10",
      "samsung >= 5",
    ],
  },
```

So, Frontity **don't** transpile any features that those browsers already support. In particular Frontity aim to support only the browsers that ship with the [built-in `Proxy` object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) . This list comes from [here](https://github.com/frontity/frontity/blob/107d3543ce5463186809b7e6f50ca31ffbdc107d/packages/core/src/config/babel/index.ts#L20-L37) and it is [used by the @babel/preset-env](https://babeljs.io/docs/en/babel-preset-env#targets) to determine how to transpile the files.

With `--target module`, Frontity tell babel to [only support the browsers that support ESModules](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules)

### The `--public-path` option

By default Frontity will look for static assets in the path `<YOUR-DOMAIN>/static`

With the `--public-path` option you can change the path from where you are serving the statics assets (i.e. js chunk files, fonts, images, etc.)

The [public path is included in the generated files by webpack](https://webpack.js.org/guides/public-path/) and cannot be changed after that.

In case some people need to change it (because of constrains in their site architecture) they would need an option to do so just before generating the Frontity bundle with `npx frontity build`.

{% hint style="info" %}
This option is also available for [`dev`](https://api.frontity.org/frontity-cli/run-commands/dev) command
{% endhint %}

*Example:*

```
npx frontity build --public-path="/other/folder"
```

## Environment Variables

### `FRONTITY_BUILD_TARGET`

Create bundles with `es5`, `module` or `both`. Default target is `both`.

If detected, and no `--target` option is defined for [`build`](#build) Frontity command, this environment variable will be applied.

*Example:*

```
FRONTITY_BUILD_TARGET=module
FRONTITY_BUILD_TARGET=es
```

### `FRONTITY_BUILD_DEVELOPMENT`

Frontity by default builds the server in "production mode". Setting this variable makes it run in "development mode" (with disabled optimizations, etc.)

*Example:*

```
FRONTITY_BUILD_DEVELOPMENT=true
```

### `FRONTITY_BUILD_PUBLIC_PATH`

Set the public path for static assets. Default path is `/static/`.

If detected, and no [`--public-path`](#the-publicpath-option) flag is defined for [`build`](#build) Frontity command, this environment variable value will be applied.

*Example:*

```
FRONTITY_BUILD_PUBLIC_PATH=/assets/
```