Code Monkey home page Code Monkey logo

poi's Introduction

preview

Badges

NPM version NPM downloads Build Status donate

Introduction

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

One devDependency to rule them all:

# 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.

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 write your app with any framework :P

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.
  • Feel free to submit yours via pull request :D

FAQ

Is it like Yeoman?

No, Yeoman is just a boilerplate generator while Poi is a Webpack wrapper which reduces boilerplate code for you.

Is it like create-react-app?

Yes and No.

Yes is because they both simplify the development setup, but create-react-app is tied to React ecosystem and could not be configured programmatically using config file.

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 @rem_rin_rin

poi's People

Contributors

egoist avatar qingwei-li avatar sinchang avatar hitautodestruct avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.