Jetpack accepts some configuration via CLI.
$ jetpack --help
Usage: jetpack [options] [command] [path]
Options:
-V, --version output the version number
-p, --port <n> port, defaults to 3030
-d, --dir [path] run jetpack in the context of this directory
-x, --exec [path] execute an additional process, e.g. an api server
-j, --jsx <pragma> specify jsx pragma, defaults to React.createElement or Preact.h if preact is installed
-r, --no-hot disable hot reloading
-c, --config config file to use, defaults to jetpack.config.js
-q, --quiet log no output
-v, --verbose log verbose output
-h, --help output usage information
Commands:
build build for production
inspect analyze bundle
clean remove the dist dir
Jetpack can also be configured using jetpack.config.js file. Here are all of the available options.
module.exports = {
// directory to run jetpack in
dir: '.',
// entry module path relative to dir
// defaults to which ever is found first:
// index.js
// package.json#main
// src/index.js
entry: '.',
// port of the dev server
port: 3030,
// relative path to static assets file dir
// these are files that you don't want to process via webpack
// but want to serve as part of your application, these
// will get exposed under /assets/*
static: 'assets',
// build output path relative to dir
dist: 'dist',
// jsx pragma
// defaults to `React.createElement` if react is installed, `h` otherwise
jsx: 'React.createElement',
// hot reloading
hot: true,
// unified flag for source maps for js and css
// follows webpack naming, but can also be simply set to true
// it's true by default in development and false in production
sourceMaps: true,
// in you need to turn off minification in production for any reason
minify: false,
// command executed to run the server/api process
// this command is exucuted only if `-x` arg is passed to jetpack
// even if this option is configured
exec: 'node .',
// used for proxying certain requests to a different server
// e.g. { '/api/*': 'http://localhost:3000',
// '/api2/*': 'http://localhost:3001/:splat',
// '/api3/*': 'http://localhost:3002/custom/:splat' }
// it can also be a function that receives an express app
// e.g. (app) => app.get('/api/foo', (req, res) => {...})
proxy: {},
// disable any logging
quiet: false,
// enable more detailed logs
verbose: false,
// the index.html template generation
// defaults to package.json#name or 'jetpack' if not available
title: 'jetpack',
// useful for adding meta tags or scripts
// can be specified in handlebars template syntax
head: null,
// body
// can be specified in handlebars template syntax
body: `<div id='root'></div>`,
// the html template
// can be specified in handlebars template syntax
html: `see lib/template.hbs`,
// css options
css: {
// css modules
modules: false,
// a shortcut for setting postcss-preset-env features
// by default postcss-preset-env already autoprefixes your css
// and enables stage 2 features https://preset-env.cssdb.org/features#stage-2
// this allows you to turn on extra features
// e.g. { 'nesting-rules': true, 'custom-media-queries': true }
features: {}
},
// webpack transform fn
webpack: (config, options) => {
// config is the webpack config generated by jetpack
// options is this jetpack options object including defaults,
// but also includes a very handy options.production flag
// see 02-customizing-webpack.md for more details
}
}The default html template is the following:
You can override it completely using the html option or extend it by using head and body options.
Jetpack exports the following modules:
It's a middleware that can serve your assets in development and production. It proxies to jetpack dev server in development and serves files from dist in production. For example:
const express = require('express')
const jetpack = require('jetpack/serve')
const app = express();
app.get('/api/unicorns', (req, res) => {...})
app.get('*', jetpack)Receive all of the jepack config. Might be useful if you want to look at the port, dist, or generated assets in production if you're say generating your HTML server side, e.g.:
const options = require('jetpack/options')
options.production
options.entry
options.port
options.assets
options.assets.js.forEach(script => console.log(script))
options.assets.css.forEach(script => console.log(script))
options.assets.other
options.assets.runtime
A simple proxy helper, useful if you want to customize your proxy behaviour using a function. E.g.
const proxy = require('jetpack/proxy')
module.exports = {
proxy: (app) => {
app.post('/custom', (req, res) => res.send(422))
app.get('/api/*', proxy('http://localhost:3000'))
}
}An export of the webpack module used by jetpack. Useful to access webpack's plugins, etc.
Several PostCSS modules useful if you're overriding PostCSS config. See Customizing PostCSS for more details
For hot reloading React. See Hot reloading for more details