API Reference
  • Introduction
  • 💻CLI Commands
    • Create commands
      • create
      • create-package
    • Run commands
      • dev
      • serve
    • Build commands
      • build
    • Extra commands
  • 🍱Packages
    • 💙Core package
      • frontity
    • ⚡Features packages
      • @frontity/wp-source
      • @frontity/tiny-router
      • @frontity/html2react
      • @frontity/head-tags
      • @frontity/yoast
      • @frontity/google-ad-manager
      • @frontity/smart-adserver
      • analytics packages
        • @frontity/google-analytics
        • @frontity/google-tag-manager-analytics
        • @frontity/comscore-analytics
      • @frontity/wp-comments
    • 📚Collections packages
      • @frontity/components
      • @frontity/hooks
        • Infinite Scroll Hooks
        • Intersection Observer Hooks
    • 🎨Themes Packages
      • @frontity/twentytwenty-theme
      • @frontity/mars-theme
  • 🔌WordPress Plugins
    • REST API - Head Tags
    • Frontity Embedded Mode
Powered by GitBook
On this page
  • Arguments
  • [options]
  • The --development option
  • The --target option
  • The --public-path option
  • Environment Variables
  • FRONTITY_BUILD_TARGET
  • FRONTITY_BUILD_DEVELOPMENT
  • FRONTITY_BUILD_PUBLIC_PATH

Was this helpful?

  1. CLI Commands
  2. Build commands

build

PreviousBuild commandsNextExtra commands

Last updated 4 years ago

Was this helpful?

Builds the project for production.

npx frontity build [options]

The command will use the files generated by this frontity build command.

Arguments

[options]

Option

Description

--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 so it will run webpack in the development mode as described .

For example, when running react in development mode (when process.env.NODE_ENV is set to development and NOT to production) you get 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",
    ],
  },

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.)

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.

Example:

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

Environment Variables

FRONTITY_BUILD_TARGET

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

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/.

Example:

FRONTITY_BUILD_PUBLIC_PATH=/assets/

Builds the project for development. Related environment variable:

Builds the project. Create bundles with "es5", "module" or "both". Default target is "both". Related environment variable:

Set the for static assets. Default path is "/static/". Related environment variable:

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 . This list comes from and it is to determine how to transpile the files.

With --target module, Frontity tell babel to

The and cannot be changed after that.

This option is also available for command

If detected, and no --target option is defined for Frontity command, this environment variable will be applied.

If detected, and no flag is defined for Frontity command, this environment variable value will be applied.

💻
frontity serve
webpack’s mode parameter
there
full error messages and warnings
built-in Proxy object
here
used by the @babel/preset-env
only support the browsers that support ESModules
public path is included in the generated files by webpack
dev
build
--public-path
build
--development
FRONTITY_BUILD_DEVELOPMENT
--target
FRONTITY_BUILD_TARGET
--publicPath
public path
FRONTITY_BUILD_PUBLIC_PATH