Neutrino Preact Preset
@neutrinojs/preact is a Neutrino preset that supports building Preact web applications.
- Zero upfront configuration necessary to start developing and building a Preact web app
- Modern Babel compilation adding JSX, object rest spread syntax, and class properties.
- Write JSX in .js or .jsx files
- Automatic import of
Preact.h, no need to import
- Compatibility and pre-configured aliasing for React-based modules and packages
- Extends from @neutrinojs/web
- Modern Babel compilation supporting ES modules, last 2 major browser versions, async functions, and dynamic imports
- webpack loaders for importing HTML, CSS, images, icons, fonts, and web workers
- webpack Dev Server during development
- Automatic creation of HTML pages, no templating necessary
- Automatic stylesheet extraction; importing stylesheets into modules creates bundled external stylesheets
- Pre-configured to support CSS Modules via
- Hot Module Replacement support including CSS
- Tree-shaking to create smaller bundles
- Production-optimized bundles with Babel minification, easy chunking, and scope-hoisted modules for faster execution
- Easily extensible to customize your project as needed
- Node.js v6.10+
- Yarn or npm client
- Neutrino v8
@neutrinojs/preact can be installed via the Yarn or npm clients. Inside your project, make sure
@neutrinojs/preact are development dependencies. You will also need
preact for actual
❯ yarn add --dev neutrino @neutrinojs/preact❯ yarn add preact
❯ npm install --save-dev neutrino @neutrinojs/preact❯ npm install --save preact
If you want to import React-based modules or packages, you should also install the
❯ yarn add preact-compat
❯ npm install --save preact-compat
@neutrinojs/preact follows the standard project layout specified by Neutrino. This
means that by default all project source code should live in a directory named
src in the root of the
to import your compiled project.
After installing Neutrino and the Preact preset, add a new directory named
src in the root of the project, with
a single JS file named
index.js in it.
❯ mkdir src && touch src/index.js
This Preact preset exposes an element in the page with an ID of
root to which you can mount your application. Edit
src/index.js file with the following:
import render from 'preact';;
Now edit your project's package.json to add commands for starting and building the application:
If you are using
.neutrinorc.js, add this preset to your use array instead of
moduleexports =use: '@neutrinojs/preact';
Start the app, then open a browser to the address in the console:
❯ yarn start✔ Development server running on: http://localhost:5000✔ Build completed
❯ npm start✔ Development server running on: http://localhost:5000✔ Build completed
@neutrinojs/preact builds static assets to the
build directory by default when running
neutrino build. Using
the quick start example above as a reference:
❯ yarn build✔ Building project completedHash: b26ff013b5a2d5f7b824Version: webpack 3.5.6Time: 9773msAsset Size Chunks Chunk Namesindex.dfbad882ab3d86bfd747.js 181 kB index [emitted] indexruntime.3d9f9d2453f192a2b10f.js 1.51 kB runtime [emitted] runtimeindex.html 846 bytes [emitted]✨ Done in 4.62s.
You can either serve or deploy the contents of this
build directory as a static site.
If you wish to copy files to the build directory that are not imported from application code, you can place
them in a directory within
static. All files in this directory will be copied from
build/static. To change this behavior, specify your own patterns with
@neutrinojs/preact preset loads assets relative to the path of your application by setting webpack's
./. If you wish to load
assets instead from a CDN, or if you wish to change to an absolute path for your application, customize your build to
output.publicPath. See the Customizing section below.
You can provide custom options and have them merged with this preset's default options to easily affect how this
preset builds. You can modify Preact preset settings from
.neutrinorc.js by overriding with an options object. Use
an array pair instead of a string to supply these options in
The following shows how you can pass an options object to the Preact preset and override its options. See the Web documentation for specific options you can override with this object.
moduleexports =use:'@neutrinojs/preact'/* preset options */// Example: disable Hot Module Replacementhot: false// Example: change the page titlehtml:title: 'Epic Preact App'// Target specific browsers with babel-preset-envtargets:browsers:'last 1 Chrome versions''last 1 Firefox versions'// Add additional Babel plugins, presets, or env optionsbabel:// Override options for babel-preset-env:presets:'babel-preset-env'modules: falseuseBuiltIns: trueexclude: 'transform-regenerator' 'transform-async-to-generator';
To override the build configuration, start with the documentation on customization.
@neutrinojs/preact does not use any additional named rules, loaders, or plugins that aren't already in use by the
Web preset. See the Web documentation customization
for preset-specific configuration to override.
By following the customization guide and knowing the rule, loader, and plugin IDs from
@neutrinojs/web, you can override and augment the build by providing a function to your
array. You can also make these changes from the Neutrino API in custom middleware.
By defining an entry point named
vendor you can split out external dependencies into a chunk separate
from your application code.
Example: Put Preact into a separate "vendor" chunk:
Hot Module Replacement
@neutrinojs/preact supports Hot Module Replacement, it does require some
application-specific changes in order to operate.
- Perform the application render in a reusable function for initial load and subsequent reloads.
- Add the
hotacceptance to call this function.
import render from 'preact';import App from './App';let mount;const root = document;const load = Appmount = ;;if modulehotmodulehot
To use the React Devtools for your Preact project, require the preact devtools during the
within your main entry file (typically
if processenvNODE_ENV === 'development';