stormpath · surfjedi · Mar 22, 2016 · Mar 22, 2016 · Mar 22, 2016 · Mar 22, 2016
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 node_modules
 *.log
-stormpath.yml
+stormpath.yml
+.DS_Store
+dist
diff --git a/README.md b/README.md
@@ -43,10 +43,16 @@ application:
 
 ## 4. Usage
 
-To start the server, run this command in the folder:
+To start the server in dev mode(using webpack and nodemon), run this command in the folder:
 
 ```bash
-node server/server.js
+npm start
+```
+To start the server in production mode, run these commands in the folder:
+
+```bash
+webpack
+npm run prod
 ```
 
 If the server is able to start with your configuration, you will see this in
@@ -66,4 +72,4 @@ You can get your API Keys and Application HREF from the
 [Stormpath]: https://stormpath.com
 [Stormpath Admin Console]: https://api.stormpath.com
 [stormpath-sdk-angularjs]: https://github.com/stormpath/stormpath-sdk-angularjs
-[express-stormpath]: https://github.com/stormpath/express-stormpath
+[express-stormpath]: https://github.com/stormpath/express-stormpath
diff --git a/client/app.js b/client/app.js
@@ -1,3 +1,6 @@
+require("style!css!../node_modules/bootstrap/dist/css/bootstrap.min.css");
+require("./app.css");
+//@require "./spinner/spinner.html"
 'use strict';
 
 angular.module('exampleApp', [
@@ -34,4 +37,12 @@ angular.module('exampleApp', [
     $rootScope.$on('$sessionEnd',function () {
       $state.transitionTo('login');
     });
-  });
+  });
+require('./change-password/change-password.js');
+require('./forgot-password/forgot-password.js');
+require('./home/home.js');
+require('./login/login.js');
+require('./navbar/navbar.js');
+require('./profile/profile.js');
+require('./register/register.js');
+require('./verify-email/verify-email.js');
diff --git a/client/change-password/change-password.js b/client/change-password/change-password.js
@@ -5,6 +5,6 @@ angular.module('exampleApp')
     $stateProvider
       .state('change', {
         url: '/change?sptoken',
-        templateUrl: 'change-password/change-password.html'
+        template: require('./change-password.html')
       });
-  });
+  });
diff --git a/client/forgot-password/forgot-password.js b/client/forgot-password/forgot-password.js
@@ -5,6 +5,6 @@ angular.module('exampleApp')
     $stateProvider
       .state('forgot', {
         url: '/forgot',
-        templateUrl: 'forgot-password/forgot-password.html'
+        template: require('./forgot-password.html')
       });
-  });
+  });
diff --git a/client/home/home.html b/client/home/home.html
@@ -3,7 +3,7 @@ <h2 class="text-center">Welcome!</h2>
     <hr>
     <div class="jumbotron">
         <p>
-            <strong>This is the example fullstack project for Angular, Express, and Stormpath</strong>
+            <strong>This is the example fullstack project for Angular, webpack, Express, and Stormpath</strong>
         </p>
         <p>Ready to begin? Try these Stormpath features that are included in this example:</p>
         <ol class="lead">
@@ -13,4 +13,4 @@ <h2 class="text-center">Welcome!</h2>
             <li><a href="/profile">Custom Profile Data</a></li>
         </ol>
     </div>
-</div>
+</div>
diff --git a/client/home/home.js b/client/home/home.js
@@ -5,6 +5,6 @@ angular.module('exampleApp')
     $stateProvider
       .state('home', {
         url: '/',
-        templateUrl: 'home/home.html'
+        template: require('./home.html')
       });
-  });
+  });
diff --git a/client/index.html b/client/index.html
@@ -8,34 +8,22 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <base href="/">
-    <title></title>
+    <title>client</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width">
-    <link rel="stylesheet" href="vendor/bootstrap.min.css" />
-    <link rel="stylesheet" href="app.css">
   </head>
   <body ng-app="exampleApp">
     <div if-user-state-unknown>
-      <div ng-include="'spinner/spinner.html'"></div>
+      <div ng-include="'./spinner/spinner.html'"></div>
     </div>
     <div if-user-state-known>
       <div ng-include="'navbar/navbar.html'"></div>
       <div ui-view=""></div>
     </div>
 
-    <script src="vendor/angular.js"></script>
-    <script src="vendor/angular-ui-router.js"></script>
-    <script src="vendor/stormpath-sdk-angularjs.js"></script>
-    <script src="vendor/stormpath-sdk-angularjs.tpls.js"></script>
-    <script src="app.js"></script>
-    <script src="change-password/change-password.js"></script>
-    <script src="forgot-password/forgot-password.js"></script>
-    <script src="home/home.js"></script>
-    <script src="login/login.js"></script>
-    <script src="navbar/navbar.js"></script>
-    <script src="profile/profile.js"></script>
-    <script src="register/register.js"></script>
-    <script src="verify-email/verify-email.js"></script>
+    <script src="vendor.bundle.js"></script>
+    <script src="app.bundle.js"></script>
+
 
   </body>
 </html>
diff --git a/client/login/login.js b/client/login/login.js
@@ -5,6 +5,6 @@ angular.module('exampleApp')
     $stateProvider
       .state('login', {
         url: '/login',
-        templateUrl: 'login/login.html'
+        template: require('./login.html')
       });
-  });
+  });
diff --git a/client/profile/profile.js b/client/profile/profile.js
@@ -5,7 +5,7 @@ angular.module('exampleApp')
     $stateProvider
       .state('profile', {
         url: '/profile',
-        templateUrl: 'profile/profile.html',
+        template: require('./profile.html'),
         controller: 'ProfileCtrl',
         /**
          * The Stormpath Angular SDK provides a configuration block that informs
@@ -50,4 +50,4 @@ angular.module('exampleApp')
           $scope.saving = false;
         });
     };
-  });
+  });
diff --git a/client/register/register.js b/client/register/register.js
@@ -5,6 +5,6 @@ angular.module('exampleApp')
     $stateProvider
       .state('register', {
         url: '/register',
-        templateUrl: 'register/register.html'
+        template: require('./register.html')
       });
-  });
+  });
diff --git a/client/vendor/routes.js b/client/vendor/routes.js
diff --git a/client/verify-email/verify-email.js b/client/verify-email/verify-email.js
@@ -5,6 +5,6 @@ angular.module('exampleApp')
     $stateProvider
       .state('verify', {
         url: '/verify?sptoken',
-        templateUrl: 'verify-email/verify-email.html'
+        template: require('./verify-email.html')
       });
-  });
+  });
diff --git a/package.json b/package.json
@@ -4,6 +4,8 @@
   "description": "Sample fullstack application, using Angular.js, Express.js, and Stormpath",
   "main": "server.js",
   "scripts": {
+    "start": "NODE_ENV='dev' nodemon  server/server.js",
+    "prod": "NODE_ENV=production node server/server.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -29,8 +31,39 @@
   },
   "homepage": "https://github.com/stormpath/express-stormpath-angular-sample-project",
   "dependencies": {
+    "angular": "^1.5.1",
+    "angular-ui-router": "^0.2.18",
+    "babel-eslint": "^4.1.6",
+    "babel-jscs": "^2.0.5",
+    "babel-loader": "^6.2.3",
+    "babel-preset-es2015": "^6.3.13",
     "body-parser": "^1.14.1",
+    "bootstrap": "^3.3.6",
+    "css-loader": "^0.19.0",
+    "eslint": "^1.5.0",
     "express": "^4.13.3",
-    "express-stormpath": "^3.0.1"
+    "express-stormpath": "^3.0.1",
+    "extract-text-webpack-plugin": "^0.8.2",
+    "html-webpack-plugin": "^1.6.1",
+    "jscs": "^2.1.1",
+    "jsdom": "^6.5.1",
+    "json-loader": "^0.5.3",
+    "postcss-loader": "^0.6.0",
+    "rimraf": "^2.4.3",
+    "stats-webpack-plugin": "^0.2.1",
+    "style-loader": "^0.12.4",
+    "webpack": "^1.12.2",
+    "webpack-dev-middleware": "^1.2.0",
+    "webpack-hot-middleware": "^2.2.0"
+  },
+  "engines": {
+    "node": "^5.7.1",
+    "npm": "^3.6.0"
+  },
+  "devDependencies": {
+    "file-loader": "^0.8.5",
+    "raw-loader": "^0.5.1",
+    "required-loader": "^0.2.1",
+    "url-loader": "^0.5.7"
   }
 }
diff --git a/server/server.js b/server/server.js
@@ -1,14 +1,24 @@
 'use strict';
 
-var bodyParser = require('body-parser');
-var express = require('express');
-var path = require('path');
-var stormpath = require('express-stormpath');
+const bodyParser = require('body-parser');
+const express = require('express');
+const path = require('path');
+const stormpath = require('express-stormpath');
+const webpack = require('webpack');
+const webpackMiddleware = require('webpack-dev-middleware');
+const webpackHotMiddleware = require('webpack-hot-middleware');
+const config = require('../webpack.config.js');
+
+const isDeveloping = process.env.NODE_ENV !== 'production';
+// const port = isDeveloping ? 3000 : process.env.PORT;
 
 /**
  * Create the Express application.
  */
-var app = express();
+const app = express();
+
+
+
 
 /**
  * The 'trust proxy' setting is required if you will be deploying your
@@ -23,8 +33,9 @@ app.set('trust proxy',true);
   setup this server before we initialize Stormpath.
 
  */
-
-app.use('/',express.static(path.join(__dirname, '..', 'client'),{ redirect: false }));
+if (!isDeveloping) {
+  app.use('/',express.static(path.join(__dirname, '..', 'dist'),{ redirect: false }));
+}
 
 /**
  * Now we initialize Stormpath, any middleware that is registered after this
@@ -55,10 +66,33 @@ app.use(stormpath.init(app, {
  * to define all view routes, and rediret to the home page if the URL is not
  * defined.
  */
-app.route('/*')
-  .get(function(req, res) {
-    res.sendFile(path.join(__dirname, '..', 'client','index.html'));
-  });
+
+
+
+ if (isDeveloping){
+     console.log('isdev');
+     const compiler = webpack(config);
+     const middleware = webpackMiddleware(compiler, {
+       publicPath: config.output.publicPath,
+       contentBase: 'client',
+       stats: {
+         colors: true,
+         hash: false,
+         timings: true,
+         chunks: false,
+         chunkModules: false,
+         modules: false
+       }
+     });
+
+     app.use(middleware);
+     app.use(webpackHotMiddleware(compiler));
+     app.get('*', function response(req, res) {
+        // res.write(middleware.fileSystem.readFileSync(path.join(__dirname, '../client/index.html')));
+        // res.sendFile(path.join(__dirname, 'dist/index.html'));
+       res.end();
+     });
+ } 
 
 app.post('/profile', bodyParser.json(), stormpath.loginRequired, require('./routes/profile'));
 
@@ -69,7 +103,42 @@ app.on('stormpath.ready',function () {
   console.log('Stormpath Ready');
 });
 
-var port = process.env.PORT || 3000;
+const port = process.env.PORT || 3000;
 app.listen(port, function () {
+  console.log("NODE_ENV =", process.env.NODE_ENV);
   console.log('Application running at http://localhost:'+port);
-});
+});
+
+
+// _____________________________________
+// FOR REFERENCE TEMPORARILY
+// if (!isDeveloping) {
+//   console.log('isdev');
+//   const compiler = webpack(config);
+//   const middleware = webpackMiddleware(compiler, {
+//     publicPath: config.output.publicPath,
+//     contentBase: 'client',
+//     stats: {
+//       colors: true,
+//       hash: false,
+//       timings: true,
+//       chunks: false,
+//       chunkModules: false,
+//       modules: false
+//     }
+//   });
+//
+//   app.use(middleware);
+//   app.use(webpackHotMiddleware(compiler));
+//   app.get('*', function response(req, res) {
+//     res.write(middleware.fileSystem.readFileSync(path.join(__dirname, 'dist/index.html')));
+//     res.end();
+//   });
+// } else {
+//
+//   // app.use(express.static(__dirname + '/dist'));
+//   // app.get('*', function response(req, res) {
+//   //   res.sendFile(path.join(__dirname, 'dist/index.html'));
+//   // });
+//
+// }