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 --production option
  • Environment Variables
  • FRONTITY_DEV_TARGET
  • FRONTITY_DEV_PORT
  • FRONTITY_DEV_HTTPS
  • FRONTITY_DEV_PRODUCTION
  • FRONTITY_DEV_PUBLIC_PATH
  • FRONTITY_DEV_DONT_OPEN_BROWSER

Was this helpful?

  1. CLI Commands
  2. Run commands

dev

Starts a development server.

npx frontity dev [options]

Arguments

[options]

Option

Description

--port <port>

--https

--dont-open-browser

--help

Output usage information

Examples

  • Starts a server in development mode using https and port 3002

npx frontity dev --https --port 3002
  • Starts a server in development mode using the folder assets as the path for statics

npx frontity dev --public-path="/assets"

The --production option

So, if you do:

npx frontity dev --production

The webpack bundler internally will do things like..

  • Enable certain webpack-specific optimizations and minify the code

  • Also disable hot-module reloading (HMR)

  • Not create source maps

  • Append hashes to filenames so for caching purposes

Normally, you would always use the development server in development mode, but sometimes you may want to check that everything works in production mode, or check the bundle analyzer (the files at /build/analyze) for the production bundle.

Environment Variables

FRONTITY_DEV_TARGET

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

Example:

FRONTITY_DEV_TARGET=module
FRONTITY_DEV_TARGET=es

FRONTITY_DEV_PORT

Runs the server on a custom port. Default is 3000.

Example:

FRONTITY_DEV_PORT=3002

FRONTITY_DEV_HTTPS

Runs the server using https.

Example:

FRONTITY_DEV_HTTPS=true

FRONTITY_DEV_PRODUCTION

frontity dev by default runs the server in "development mode" (no optimizations, uses the dev build of react, etc.). Setting this variable makes it run in "production mode".

Example:

FRONTITY_DEV_PRODUCTION=true

FRONTITY_DEV_PUBLIC_PATH

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

Example:

FRONTITY_DEV_PUBLIC_PATH=/assets/

FRONTITY_DEV_DONT_OPEN_BROWSER

Don't open a browser window after the Frontity server has been started.

Example:

FRONTITY_DEV_DONT_OPEN_BROWSER=true
PreviousRun commandsNextserve

Last updated 4 years ago

Was this helpful?

Builds the project for production. Related environment variable:

Runs the server on a custom port. Default is 3000. Related environment variable:

Runs the server using https. Related environment variable:

Don't open a browser window with the localhost. Related environment variable:

Create bundles with es5 or module. Default target is module. Related environment variable:

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

This flag correspond to so it will run webpack in the production mode as described before launching the development server.

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

If detected, and no --port <port> option is defined for Frontity command, this environment variable value will be applied.

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

💻
webpack’s mode parameter
there
dev
dev
dev
--production
FRONTITY_DEV_PRODUCTION
FRONTITY_DEV_PORT
FRONTITY_DEV_HTTPS
FRONTITY_DEV_DONT_OPEN_BROWSER
FRONTITY_DEV_TARGET
public path
FRONTITY_DEV_PUBLIC_PATH
--target <target>
--publicPath <path>