Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including pre-bp with all npm packages installed. Try it out:

pre-bp lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("pre-bp/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

pre-bp v0.5.1

pre-bp

very small single-page app boilerplate - only 15kb gzipped

live example - https://pre-bp.github.io/

What's Included "the good stuff"

by @matannoam with @ForsakenHarmony

a react app without react

React is great, but it's bigger than it needs to be to start a project.

pre-bp is a boilerplate app based on preact, "a fast 3kB alternative to React with the same ES6 API." It includes a router and redux, and is ready to use with redux-devtools-extension.

Getting started

git clone <THIS REPOSITORY>
(rm -rf .git && git init)  # begin a new commit history for your project

yarn init  # rename the node module for your project
# or
npm init

yarn install  # Install dependencies
# or
npm install

yarn start  # start the development server
# or
npm start

(what's yarn?)

After the node modules are installed, run the development server. Open your browser to http://localhost:8080 to view the app. Open the console to see logging. The page will refreh automatically if you update any code in the /src folder thanks to the --inline option of webpack-dev-server.

See information about the components in your browsers inspector with react-devtools. Available for Chrome and Firefox.

Replay your actions in development with redux-devtools-extension. Available for Chrome, Firefox, and Electron.

Build a release for production with

yarn build
# or
npm build

which will display the gzipped size of the build.

Analyze the size of the code and dependecies (pre-compressed) with

yarn size:imports
# or
npm size:imports

Switching later

pre-bp makes it simple to switch to react later if you want, but if you are just looking for compatibilty with other react packages, try using preact-compat (see aliasing).

what's included for release

  • preact - "a fast 3kB alternative to React with the same ES6 API."
  • redux - a small predictable state container
  • preact-redux - react-redux with react aliased to preact
  • history - manage session history with JavaScript. This provides a method to create history for preact-router-redux to sync with the app state and create middleware for. This is what react-router uses, but pre-bp uses a bare bones implementation that imports less code.
  • preact-router - Provides Route, Router, and Link components with much less overhead than react-router. This is important for imports without side-effects. It also listens to it's underlying history to perform routing actions, allowing for replay tools on the router.
  • preact-router-redux - tools to pass navigation commands as actions. react-router-redux with wrapped history synced to the original. See https://github.com/matannoam/preact-router-redux/pull/1. It also supports history v4.
  • normalize.css is in the html header for nice, modern styles.

what dev tools are included

  • webpack is the new standard for bundling react apps. UglifyJS is used by default to minify production builds.
  • webpack-dev-server uses Express.js to serve the app in development.
  • babel is a transpiler, which allows the code to be run in most modern browsers. The es2015 and react presets are included and used by default for production builds, and well as stage-2 for spreads and other syntax.
  • webpack-bundle-size-analyzer - helps confirm the production builds are tiny.
  • redux-logger - logs redux states and actions to the console. included as a dependency, but not included in packing thanks to require().
  • ready to use with react-devtools - adds an inspector tab in the browser for components.
  • ready to use with redux-devtools-extension - useful tools such as replaying actions.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free