Badges

Introduction

Start writing an app with a single .js file, Poi could handle all the development setups for you, no more configuration hell.

Install Poi:

# Either globally
yarn global add poi
# Or locally (preferred)
yarn add poi --dev

Then populating an index.js and writing with your favorite framework like one of:

React / Preact

import React from 'react'
import { render } from 'react-dom'

const App = () => <h1>Hello React.</h1>

render(<App />, document.getElementById('app'))

Note: You need to install react react-dom and desired babel preset like babel-preset-react-app. For convenience, here's also poi-preset-react you can use.

It's similar for other React-like framework.

Vue

import Vue from 'vue'

new Vue({
  el: '#app',
  render() {
    return <h1>Hello Vue.</h1>
  }
})

Note: You don't need to install any dependencies, vue is already brought by Poi. And single-file component is also supported by default.

Other

You can use existing presets such as poi-preset-riot and poi-preset-react to configure your framework to work with Poi, or contribute another preset for your desired framework.

Start the server

To develop this file, run poi in your terminal and you can open http://localhost:4000 to preview!

So far we get:

• Automatic transpilation and bundling (with webpack and babel/postcss)
• Hot code reloading
• Static file in ./static/ is served as static files.

Build app in production mode (optimized and minified):

poi build

To change the path of entry file:

poi src/my-entry.js # development
poi build src/my-entry.js # production

For full documentation, please head to https://poi.js.org

Who is using Poi?

• codepan - Like codepen and jsbin but works offline.
• jsx-editor - JSX Live Editor.
• vstar - A simple web app to show your or others GitHub repos stars.
• npmarket - More efficient search for node packages.
• sublog - Build a static blog website from GitHub Issues.
• emoji.js.org - Unfancy emoji searcher.
• ANII - A minimalistic web video player.
• WhyVote.us - Info about the American presidential voting system.
• Feel free to submit yours via pull request :D

FAQ

How's it different from a boilerplate?

It's hard to upgrade your project if you're using a boilerplate since you might change the code to suit your needs. However you can easily upgrade your project to use latest version of Poi by simply updating the dependency.

You can also get rid of boilerplate code in this way.

How does Poi manage dependencies for external frameworks?

Vue is included, other frameworks need to be installed alongside Poi in your project.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

poi © EGOIST, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

egoistian.com · GitHub @egoist · Twitter @_egoistlily