webprompt> command the web

An experimental project to re-imagine the command prompt in a connected and media-rich world.

Available Commands

wiki
hello
remind
count
calc
pong

In The Works

localstorage of sessions and requests
sticky websocket sessions (find connection by user identifier or cookie) so if a user reconnects as a new user they still receive the message
json - manage and view simple json arrays and objects
triggers - run a command when trigger evaluates to true (ie. sendemail when new craigslist item is available or when amazon price decreases)
social - post quick updates to your facebook and twitter accounts
gui processes - self-contained React apps hosted in browser

Development

Features

Compilation with webpack
React and jsx
react-router
Stylesheets can be CSS, LESS, SASS, Stylus or mixed
Embedded resources like images or fonts use DataUrls if appropriate
A simple flag loads a react component (and dependencies) on demand.
Development
- Development server
- Optionally Hot Module Replacement development server (LiveReload for Stylesheets and React components enabled)
- Uses SourceUrl for performance, but you may switch to SourceMaps easily
Production
- Server example for prerendering for React components
- Initial data inlined in page
- Long Term Caching through file hashes enabled
- Generate separate css file to avoid FOUC
- Minimized CSS and javascript
Also supports coffee-script files if you are more a coffee-script person.
You can also require markdown or text files for your content.

Local Installation

Install node.js or io.js

Just clone this repo and change the origin git remote.

sudo npm install -g webpack
sudo npm install -g node-gyp
sudo apt-get install libssl-dev
sudo npm install

npm link babble
npm link hooman
npm link gnodes

if (nodegit fails to build) {
	sudo ./node_modules/nodegit/vendor/libssh2/configure
	sudo npm run rebuild
}

Development server

# start the webpack-dev-server
npm run dev-server
# wait for the first compilation is successful

# in another terminal/console
# start the node.js server in development mode
npm run start-dev

# open this url in your browser
http://localhost:8080/

The configuration is webpack-dev-server.config.js.

It automatically recompiles and refreshes the page when files are changed.

Also check the webpack-dev-server documentation.

Hot Module Replacement development server

# start the webpack-dev-server in HMR mode
npm run hot-dev-server
# wait for the first compilation is successful

# in another terminal/console
# start the node.js server in development mode
npm run start-dev

# open this url in your browser
http://localhost:8080/

The configuration is webpack-hot-dev-server.config.js.

It automatically recompiles when files are changed. When a hot-replacement-enabled file is changed (i. e. stylesheets or React components) the module is hot-replaced. If Hot Replacement is not possible the page is refreshed.

Hot Module Replacement has a performance impact on compilation.

Production compilation and server

# build the client bundle and the prerendering bundle
npm run build

# start the node.js server in production mode
npm run start

# open this url in your browser
http://localhost:8080/

The configuration is webpack-production.config.js.

The server is at lib/server.js

The production setting builds two configurations: one for the client (build/public) and one for the serverside prerendering (build/prerender).

Legacy static assets

Assets in public are also served.

Build visualization

After a production build you may want to visualize your modules and chunks tree.

Use the analyse tool with the file at build/stats.json.

Loaders and file types

Many file types are preconfigured, but not every loader is installed. If you get an error like Cannot find module "xxx-loader", you'll need to install the loader with npm install xxx-loader --save and restart the compilation.

Common changes to the configuration

Add more entry points

(for a multi page app)

Add an entry point to make-webpack-config.js (var entry).
Add a new top-level react component in app (xxxRoutes.js, xxxStoreDescriptions.js, xxxStores.js).
(Optional) Enable commonsChunk in webpack-production.config.js and add <script src="COMMONS_URL"></script> to app/prerender.html.
Modify the server code to require, serve and prerender the other entry point.
Restart compilation.

Switch devtool to SourceMaps

Change devtool property in webpack-dev-server.config.js and webpack-hot-dev-server.config.js to "source-map" (better module names) or "eval-source-map" (faster compilation).

SourceMaps have a performance impact on compilation.

Enable SourceMaps in production

Uncomment the devtool line in webpack-production.config.js.
Make sure that the folder build\public\debugging is access controlled, i. e. by password.