keesun · helols · Sep 12, 2015 · Sep 12, 2015 · Sep 12, 2015 · Sep 12, 2015
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,6 @@
 *.iml
 target/
 logs/
-
+node_modules/
+**/bundle.js
+**/npm-debug.log
diff --git a/pom.xml b/pom.xml
@@ -64,13 +64,7 @@
             <groupId>com.jayway.jsonpath</groupId>
             <artifactId>json-path</artifactId>
         </dependency>
-
         <!-- Front-end -->
-        <dependency>
-            <groupId>org.webjars</groupId>
-            <artifactId>react</artifactId>
-            <version>0.13.3</version>
-        </dependency>
         <dependency>
             <groupId>org.webjars</groupId>
             <artifactId>bootstrap</artifactId>
@@ -89,4 +83,4 @@
 
 
 
-</project>
+</project>
diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
@@ -4,12 +4,10 @@
     <meta charset="UTF-8">
     <title>Amugona</title>
     <link type="text/css" rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
-    <script src="webjars/react/0.13.3/react.min.js"></script>
-    <script src="webjars/react/0.13.3/JSXTransformer.js"></script>
-
-    <link type="text/css" rel="stylesheet" href="styles/main.css" />
-    <script type="text/jsx" src="scripts/main.js"></script>
 </head>
 <body>
+  <div id="root"></div>
+  <!-- <script type="text/javascript" src="scripts/bundle.js"></script> -->
+  <script type="text/javascript" src="http://localhost:3003/bundle.js"></script>
 </body>
-</html>
+</html>
diff --git a/src/main/resources/static/scripts/bundle.js b/src/main/resources/static/scripts/bundle.js
diff --git a/src/main/resources/static/scripts/main.js b/src/main/resources/static/scripts/main.js
diff --git a/src/main/resources/static/scripts/nav.js b/src/main/resources/static/scripts/nav.js
diff --git a/src/main/resources/webapp/.babelrc b/src/main/resources/webapp/.babelrc
@@ -0,0 +1,16 @@
+{
+  "stage": 0,
+  "plugins": [
+    "react-transform"
+  ],
+  "extra": {
+    "react-transform": [{
+      "target": "react-transform-webpack-hmr",
+      "imports": ["react"],
+      "locals": ["module"]
+    }, {
+      "target": "react-transform-catch-errors",
+      "imports": ["react", "redbox-react"]
+    }]
+  }
+}
diff --git a/src/main/resources/webapp/README.md b/src/main/resources/webapp/README.md
@@ -0,0 +1,28 @@
+### Install
+Install node_modules(react/webpack/etc...)
+
+```
+npm install
+```
+
+### Webpack
+
+Build bundle.js : Make sure that bundle.js file src should be "scripts/bundle.js"
+
+```
+npm run build 
+```
+
+Watch mode : Make sure that bundle.js file src should be "localhost:3003/bundle.js"
+
+```
+npm run watch
+```
+
+### Folders
+
+`components` - React components
+
+`containers` - React pages
+
+`styles` - css
diff --git a/src/main/resources/webapp/components/Nav.js b/src/main/resources/webapp/components/Nav.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+
+export default class Nav extends Component {
+  render() {
+    return (
+      <nav className="navbar navbar-fixed-top">
+        <div className="container">
+          <div className="navbar-header">
+            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+              <span className="sr-only">Toggle navigation</span>
+              <span className="icon-bar"></span>
+              <span className="icon-bar"></span>
+              <span className="icon-bar"></span>
+            </button>
+            <a className="navbar-brand" href="/">A.MU.GO.NA</a>
+          </div>
+          <div id="navbar" className="collapse navbar-collapse">
+            <ul className="nav navbar-nav">
+              <li className="active"><a href="/">Home</a></li>
+              <li><a href="#about">About</a></li>
+              <li><a href="#contact">Contact</a></li>
+            </ul>
+            <ul className="nav navbar-nav navbar-right">
+              <li className="btn-group">
+                <button type="button" className="btn btn-success navbar-btn">Sign up</button>
+                <button type="button" className="btn btn-default navbar-btn">Sign in</button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    )
+  }
+}
diff --git a/src/main/resources/webapp/containers/App.js b/src/main/resources/webapp/containers/App.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import Home from './Home'
+import Signup from './Signup'
+
+export default class App extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { route: window.location.hash.substr(1) }
+  }
+
+  componentDidMount() {
+    window.addEventListener('hashchange', () => {
+      this.setState({
+          route: window.location.hash.substr(1)
+      })
+    })
+  }
+
+  render() {
+    var Child
+    switch (this.state.route) {
+        case "home":
+            Child = Home
+            break
+        case "signup":
+            Child = Signup
+            break
+        default:
+            Child = Home
+    }
+    return (<Child/>);
+  }
+}
diff --git a/src/main/resources/webapp/containers/Home.js b/src/main/resources/webapp/containers/Home.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import Nav from '../components/Nav'
+
+export default class Home extends Component {
+  render() {
+    return (
+      <div>
+        <Nav/>
+        <div className="container">
+          <div className="starter-template">
+            <h1>Home Page</h1>
+            <p className="lead">
+            Use this document as a way to quickly start any new project.
+              <br/> All you get is this text and a mostly barebones HTML document.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/src/main/resources/webapp/containers/Signup.js b/src/main/resources/webapp/containers/Signup.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import Nav from '../components/Nav'
+
+export default class Signup extends Component {
+  render() {
+    return (
+      <div>
+        <Nav/>
+        <div className="container">
+          <div className="starter-template">
+            <h1>Sign-up Page</h1>
+            <p className="lead">
+            Use this document as a way to quickly start any new project.
+              <br/> All you get is this text and a mostly barebones HTML document.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/src/main/resources/webapp/main.js b/src/main/resources/webapp/main.js
@@ -0,0 +1,5 @@
+require('./styles/main.css')
+import React from 'react'
+import App from './containers/App'
+
+React.render(<App />, document.getElementById('root'))
diff --git a/src/main/resources/webapp/package.json b/src/main/resources/webapp/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "amugona",
+  "version": "1.0.0",
+  "description": "What's up bro?",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack --progress --profile --colors",
+    "watch": "webpack-dev-server --progress --inline --hot --port 3003",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/keesun/amugona.git"
+  },
+  "keywords": [
+    "amugona",
+    "boot"
+  ],
+  "author": "keesun",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/keesun/amugona/issues"
+  },
+  "homepage": "https://github.com/keesun/amugona#readme",
+  "devDependencies": {
+    "babel-core": "^5.8.24",
+    "babel-loader": "^5.3.2",
+    "babel-plugin-react-transform": "^1.0.3",
+    "css-loader": "^0.18.0",
+    "react": "^0.13.3",
+    "react-transform-catch-errors": "^0.1.1",
+    "react-transform-webpack-hmr": "^0.1.4",
+    "redbox-react": "^1.0.3",
+    "style-loader": "^0.12.3",
+    "webpack": "^1.12.1",
+    "webpack-dev-server": "^1.10.1"
+  }
+}
diff --git a/src/main/resources/static/styles/main.css → src/main/resources/webapp/styles/main.css b/src/main/resources/static/styles/main.css → src/main/resources/webapp/styles/main.css
diff --git a/src/main/resources/webapp/webpack.config.js b/src/main/resources/webapp/webpack.config.js
@@ -0,0 +1,24 @@
+var path = require('path'),
+    webpack = require('webpack');
+
+module.exports = {
+    devtool: 'cheap-module-eval-source-map',
+    entry: './main.js',
+    output: {
+        path: path.join(__dirname, '../static/scripts'),
+        filename: 'bundle.js',
+    },
+    resolve: {
+        extensions: ['', '.js']
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+        new webpack.NoErrorsPlugin()
+    ],
+    module: {
+        loaders: [
+            {test: /\.js$/, loader: 'babel', exclude: /node_modules/},
+            {test: /\.css$/, loader: 'style!css'}
+        ]
+    }
+};