Getting Started

Introduction

Poi is a bundler built on the top of webpack, trying to make developing and bundling apps with webpack as easy as possible.

Features

  • πŸ“¦ Out of box support for JS, CSS, File assets and more.
  • βš› Framework-agnostic but also support JSX, Vue and more with no configs.
  • πŸ”Œ Great extensibility.
  • πŸ™ Fit most web apps, npm libs.
  • 🚨 Great development experience.

Quick Overview

Before we get started, ensure that you have installed Node.js (>=8) and Yarn (or npm) on your machine.

Get Started Immediately

yarn global add create-poi-app
create-poi-app my-app

cd my-app
npm run dev

Then open http://localhost:4000 to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.

Get Started Manually

Inside an empty project, run yarn init or npm init to create a package.json and install Poi:

yarn init
yarn add poi --dev

Now all you need is to create an entry file, like if you're building a website, just create an index.js:

const el = document.createElement('div')
el.textContent = 'Hello Poi!'

document.body.appendChild(el)

Now if you run:

yarn poi --serve

You will get a URL like http://localhost:4000 which you can open to preview the app.

Next let's start adding some dependencies like a CSS file style.module.css:

.title {
  color: pink;
}
import styles from './style.module.css'

const el = document.createElement('div')
el.className = styles.title
el.textContent = 'Hello Poi!'

document.body.appendChild(el)

Save it and the browser will automatically reload to apply the changes!

So far we get:

  • Automatic transpilation and bundling (with webpack and babel)
  • Hot code reloading
  • Static file serving. ./public/ is mapped to /
Last Updated: 12/8/2018, 9:05:51 AM