mavisjheng

Why YEOMAN

Yeoman was released at Google I/O 2012. Session: Better Web App Development Through Tooling. Focus on development not debugging.
Disparate tools without smooth integration.

• Go from your idea to a rough prototype in ten minutes
• Reduce friction from the things that you should be doing, such as testing
• DRY applies to using tools, too!

So Yeoman was introduced.

mavisjheng

var webpackDevServerEntry = 'webpack/hot/dev-server';

module.exports = {
    context: __dirname,
    entry: [webpackDevServerEntry, './js/main.js'],
    output: {
        path: __dirname + '/js',
        filename: 'bundle.js'
    },
    module: {

mavisjheng

{
  "name": "ironman-fae-visiting-page",
  "version": "1.0.0",
  "description": "react components for ironman system",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --no-info --progress --colors --hot --content-base",
    "build": "rm -r fonts; rm js/bundle.js; webpack --progress --colors"
  },
  "author": "mavis.jheng",

mavisjheng

Note

1. when develop, edit public/index.html:
   • <script src="http://localhost:8080/webpack-dev-server.js"></script>
   • <script src="bundle.js"></script>
2. when build, edit public/index.html:
   • delete: <script src="http://localhost:8080/webpack-dev-server.js"></script>
   • <script src="./dist/bundle.js"></script>
3. Some part of this file need to be updated.

Install nvm

mavisjheng

// Import react
var React = require('react')
// Import react-bootstrap components
var Col = require('react-bootstrap/lib/Col')
var Panel = require('react-bootstrap/lib/Panel')
var FormControls = require('react-bootstrap/lib/FormControls')
var Glyphicon = require('react-bootstrap/lib/Glyphicon')

var ConcernSolutionList = React.createClass({
	render: function() {

mavisjheng

# Git branch in prompt.
parse_git_branch() {
    git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}
export PS1="\u@\h \W\[\033[32m\]\$(parse_git_branch)\[\033[00m\] $ "