Merge pull request #130 from ipfs/webpack

Improve build process

.babelrc

@@ -1,3 +1,3 @@
 {
-  "stage": 0
+  "presets": ["react", "es2015", "stage-0"]
 }

.eslintignore

@@ -0,0 +1,4 @@
+app/scripts/include/*.js
+node_modules
+versions
+dist

.eslintrc

@@ -0,0 +1,4 @@
+{
+  "parser": "babel-eslint",
+  "extends": ["standard", "standard-react"]
+}

.gitignore

@@ -1,7 +1,5 @@
-build/
 node_modules/
-static/fonts
 .module-cache
 cache/
 npm-debug.log
-publish
+dist/*.*

.travis.yml

@@ -1,9 +1,13 @@
-# See http://docs.travis-ci.com/user/workers/container-based-infrastructure/
 sudo: false
 language: node_js
 node_js:
   - stable
 
+before_install:
+  - "export DISPLAY=:99.0"
+  - "sh -e /etc/init.d/xvfb start"
+
 script:
   - npm run lint
+  - npm test
   - npm run build

README.md

@@ -1,18 +1,69 @@
-IPFS webui
-==========
+# IPFS webui
 
-[![](https://img.shields.io/badge/made%20by-Protocol%20Labs-blue.svg?style=flat-square)](http://ipn.io) [![](https://img.shields.io/badge/project-IPFS-blue.svg?style=flat-square)](http://ipfs.io/) [![](https://img.shields.io/badge/freenode-%23ipfs-blue.svg?style=flat-square)](http://webchat.freenode.net/?channels=%23ipfs) [![Dependency Status](https://david-dm.org/ipfs/webui.svg?style=flat-square)](https://david-dm.org/ipfs/webui) [![Circle CI](https://img.shields.io/circleci/project/ipfs/webui/master.svg?style=flat-square)](https://circleci.com/gh/ipfs/webui) [![Travis CI](https://img.shields.io/travis/ipfs/webui/master.svg?style=flat-square)](https://travis-ci.org/ipfs/webui)
+[![](https://img.shields.io/badge/made%20by-Protocol%20Labs-blue.svg?style=flat-square)](http://ipn.io)
+[![](https://img.shields.io/badge/project-IPFS-blue.svg?style=flat-square)](http://ipfs.io/)
+[![](https://img.shields.io/badge/freenode-%23ipfs-blue.svg?style=flat-square)](http://webchat.freenode.net/?channels=%23ipfs)
+[![Dependency Status](https://david-dm.org/ipfs/webui.svg?style=flat-square)](https://david-dm.org/ipfs/webui)
+[![Circle CI](https://img.shields.io/circleci/project/ipfs/webui/master.svg?style=flat-square)](https://circleci.com/gh/ipfs/webui)
+[![Travis CI](https://img.shields.io/travis/ipfs/webui/master.svg?style=flat-square)](https://travis-ci.org/ipfs/webui)
 
-> IPFS Web Interaface
+> The web interface for [IPFS](https://ipfs.io/)
 
-## Dev
+IPFS Webui is a web interface for IPFS, the Interplanetary File System. With the interface, you can check on your node info, network addresses, see connections on a globe visually, seee your files, look at your config and logs without needing to touch the CLI, and more. This interface uses the [js-ipfs-api](//github.com/ipfs/js-ipfs-api) for all of its heavy lifting.
+
+The webui is a **work-in-progress**. Follow the [development](#development) processes below to check it out.
+
+Otherwise, if you're curious about IPFS, head over to [ipfs/ipfs](//github.com/ipfs/ifps), or to the [golang](//github.com/ipfs/go-ipfs) or [nodejs](//github.com/ipfs/js-ipfs) implementations. The [website](https://ipfs.io) also has a host of resources on how to get started.
+
+## Contribute
+
+[![](https://cdn.rawgit.com/jbenet/contribute-ipfs-gif/master/img/contribute.gif)](https://github.com/ipfs/community/blob/master/contributing.md)
+
+Please contribute! The more people who work on this, the faster we'll be able to ship it. Dive in by testing it and [looking at the issues](https://github.com/ipfs/webui/issues).
+
+The [CONTRIBUTING](CONTRIBUTING.md) file has more information relevant to this repo. To contribute to IPFS in general, just click on the image above to go to our [global contributing guide](https://github.com/ipfs/community/blob/master/contributing.md).
+
+## Development
+
+Make sure [node.js](https://nodejs.org/) and [npm](https://docs.npmjs.com/) are installed and in your path.
+
+### Config
+
+When developing the WebUI you will need an ipfs daemon running with API access on port `5001`, as well as the following configuration set, otherwise you will not be able to communicate with the ipfs node.
+
+```bash
+$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["http://localhost:3000"]'
+$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["PUT", "GET", "POST"]'
+$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials '["true"]'
+```
+
+### Installation and running
+
+```bash
+$ git clone https://github.com/ipfs/webui
+$ cd webui
+$ npm install
+# Runs server on port 3000.
+$ npm start
+```
+
+### Resetting
+
+To reset your config back to the default configuration, run the following command.
+
+```sh
+$ ipfs config --json API.HTTPHeaders {}
+```
+
+It might be a good idea to copy the `.ipfs/config` file somewhere with a useful name so you can use `ipfs config replace <file>` to switch between dev mode easily.
+
+## Building
 
 ```bash
-git clone https://github.com/ipfs/webui
-cd webui
-npm install
-# Runs server on port 3000. Set env PORT to change.
-npm run dev
+$ npm run build
+# The result will be in /dist
 ```
 
-This will open a browser at <http://localhost:3000>
+## License
+
+[MIT License](LICENSE)

js/include/globe.js → app/scripts/include/globe.js

@@ -1,4 +1,3 @@
-'use strict'
 /**
  * dat.globe Javascript WebGL Globe Toolkit
  * http://dataarts.github.com/dat.globe
@@ -12,9 +11,9 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var THREE = require('three')
+import THREE from 'three'
 
-module.exports = function (container, opts) {
+export default function (container, opts) {
   opts = opts || {}
 
   var colorFn = opts.colorFn || function (x) {

app/scripts/main.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Router from 'react-router'
+import routes from './routes'
+
+if (process.env.NODE_ENV !== 'production') {
+  window.uiDebug = require('debug')
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  Router.run(routes, function (Handler) {
+    ReactDOM.render(<Handler />, document.getElementById('root'))
+  })
+})

js/pages/bitswap.jsx → app/scripts/pages/bitswap.js

@@ -1,8 +1,9 @@
-var React = require('react')
-var FileList = require('../views/filelist.jsx')
-var i18n = require('../utils/i18n.js')
+import React from 'react'
+import FileList from '../views/filelist'
+import i18n from '../utils/i18n.js'
+import {Row, Col, Panel} from 'react-bootstrap'
 
-module.exports = React.createClass({
+export default React.createClass({
   displayName: 'Bitswap',
   propTypes: {
     pollInterval: React.PropTypes.func
@@ -33,8 +34,8 @@ module.exports = React.createClass({
     var wantlist = this.state.wantlist
 
     return (
-      <div className='row'>
-        <div className='col-sm-10 col-sm-offset-1'>
+      <Row>
+        <Col sm={10} smOffset={1}>
           <h3>{i18n.t('Bitswap')}</h3>
           <br/>
 
@@ -43,13 +44,13 @@ module.exports = React.createClass({
               <strong>{i18n.t('Wantlist')}</strong>&nbsp;
               <small>({i18n.t('X file', { postProcess: 'sprintf', sprintf: [wantlist.length], count: wantlist.length })})</small>
             </h4>
-            <div className='panel panel-default'>
-              <FileList className='panel-inner' files={wantlist} namesHidden={true}/>
-            </div>
+            <Panel bsStyle={'default'}>
+              <FileList className='panel-inner' files={wantlist} namesHidden />
+            </Panel>
           </div>
           <br/>
-        </div>
-      </div>
+        </Col>
+      </Row>
     )
   }
 })

app/scripts/pages/config.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import ConfigView from '../views/config'
+import {Row, Col} from 'react-bootstrap'
+
+export default React.createClass({
+  displayName: 'Config',
+  propTypes: {
+    ipfs: React.PropTypes.object
+  },
+  getInitialState: function () {
+    this.props.ipfs.config.show((err, configStream) => {
+      if (err) return console.log(err)
+
+      this.setState({
+        config: JSON.parse(configStream.toString())
+      })
+    })
+
+    return { config: null }
+  },
+
+  render: function () {
+    var config = this.state.config
+      ? <ConfigView config={this.state.config} ipfs={this.props.ipfs} />
+      : null
+
+    return (
+      <Row>
+        <Col sm={10} smOffset={1}>
+          {config}
+        </Col>
+      </Row>
+    )
+  }
+})

js/pages/connections.jsx → app/scripts/pages/connections.js

@@ -1,11 +1,11 @@
-'use strict'
-var React = require('react')
-var ConnectionList = require('../views/connectionlist.jsx')
-var Globe = require('../views/globe.jsx')
-var getLocation = require('ipfs-geoip').lookupPretty
-var i18n = require('../utils/i18n.js')
+import React from 'react'
+import ConnectionList from '../views/connectionlist'
+import Globe from '../views/globe'
+// import {lookupPretty as getLocation} from 'ipfs-geoip'
+import i18n from '../utils/i18n.js'
+import {Row, Col} from 'react-bootstrap'
 
-var Connections = React.createClass({
+export default React.createClass({
   displayName: 'Connections',
   propTypes: {
     peers: React.PropTypes.array
@@ -42,28 +42,28 @@ var Connections = React.createClass({
           peer.ipfs = t.props.ipfs
           peer.location = { formatted: '' }
 
-          var location = t.state.locations[peer.ID]
-          if (!location) {
-            t.state.locations[peer.ID] = {}
-            t.props.ipfs.id(peer.ID, function (err, id) {
-              if (err) return console.error(err)
+          // var location = t.state.locations[peer.ID]
+          // if (!location) {
+          //   t.state.locations[peer.ID] = {}
+          //   t.props.ipfs.id(peer.ID, function (err, id) {
+          //     if (err) return console.error(err)
 
-              getLocation(t.props.ipfs, id.Addresses, function (err, res) {
-                if (err) return console.error(err)
-                // If we've unmounted, abort
-                if (!t.isMounted()) return
+          //     getLocation(t.props.ipfs, id.Addresses, function (err, res) {
+          //       if (err) return console.error(err)
+          //       // If we've unmounted, abort
+          //       if (!t.isMounted()) return
 
-                res = res || {}
-                peer.location = res
-                t.state.locations[peer.ID] = res
-                t.setState({
-                  peers: peers,
-                  locations: t.state.locations,
-                  nonce: t.state.nonce++
-                })
-              })
-            })
-          }
+          //       res = res || {}
+          //       peer.location = res
+          //       t.state.locations[peer.ID] = res
+          //       t.setState({
+          //         peers: peers,
+          //         locations: t.state.locations,
+          //         nonce: t.state.nonce++
+          //       })
+          //     })
+          //   })
+          // }
         })
       })
     }
@@ -78,19 +78,17 @@ var Connections = React.createClass({
 
   render: function () {
     return (
-      <div className='row'>
-        <div className='col-sm-6 globe-column'>
+      <Row>
+        <Col sm={6} className='globe-column'>
           <Globe peers={this.state.peers} />
-        </div>
-        <div className='col-sm-6'>
+        </Col>
+        <Col sm={6}>
           <h4>{i18n.t('Connected to X peer', { postProcess: 'sprintf', sprintf: [this.state.peers.length], count: this.state.peers.length })}</h4>
           <div>
             <ConnectionList peers={this.state.peers} />
           </div>
-        </div>
-      </div>
+        </Col>
+      </Row>
     )
   }
 })
-
-module.exports = Connections