Deleted redundant files from /src/pages folder

Author: booleanhunter

README.md

@@ -6,21 +6,18 @@ ReactJS version of the original AdminLTE dashboard - https://github.com/almasaee
 
 If you use React in your app, you might find some of these components useful!
 
+[View the complete list of available components](https://github.com/booleanhunter/ReactJS-AdminLTE/tree/master/src/components)
 
-### UPDATES: 
-
-- [UI Elements](https://github.com/booleanhunter/ReactJS-AdminLTE/tree/master/src/pages/ui-elements) turning up.
-
-    [Click here](http://ec2-52-74-208-196.ap-southeast-1.compute.amazonaws.com:8000/UI/general.html) to see it live
 
+### Some available components in React: 
 
 
 - [ReactJS Timeline](https://github.com/booleanhunter/ReactJS-AdminLTE/tree/master/src/components/#--timeline)
 
     [Click here](http://ec2-52-74-208-196.ap-southeast-1.compute.amazonaws.com:8000/timeline.html) to see it live
 
 
-- [ReactJS Widgets](https://github.com/booleanhunter/ReactJS-AdminLTE/tree/master/src/components/widgets-page)
+- [ReactJS Widgets](https://github.com/booleanhunter/ReactJS-AdminLTE/tree/master/src/components)
 
     [Click here](http://ec2-52-74-208-196.ap-southeast-1.compute.amazonaws.com:8000/widgets.html) to see a live preview!
 
@@ -39,26 +36,34 @@ Will soon be populated with charts.
 
 More stuff coming soon. Stay tuned!
 
-##### Due to several work related commitments, the development rate is a little slow and I apologize for that. However, I'm looking for awesome folks :metal: who could contribute and help me maintain this project. If you have any queries that you may have on how to contribute, or you have just general questions about how to use the components in your app - feel free to shoot an email. I'll help you out! :smile_cat:
+### Instructions of Usage :
+- Run `npm install adminlte-reactjs`
+- Include the stylesheets for the components, similar to the [widgets page](https://github.com/booleanhunter/ReactJS-AdminLTE/blob/master/views/widgets.html)
+- Include the library `var reactjsAdminlte = require('adminlte-reactjs')`. You may prefer the AMD style or the import statement.
+- You can now begin using the components like this `var ProfileCard = reactjsAdminlte.ProfileCard`.
+- If you don't need all the components, then you can choose to include only specific ones rather than the entire library. This can reduce your JS bundle size significantly `var StatTile = require('adminlte-reactjs/src/components/stat-tile')`
+
+### Contributing guidelines :
 
+##### Due to several work related commitments, the development rate is a little slow and I apologize for that. However, I'm looking for awesome folks :metal: who could contribute and help me maintain this project.
 
-#### Instructions to run
+#### Step 1 : 
 
 - Fork or clone this repo. Alternatively - if you have NPM installed, you can also do `npm install adminlte-reactjs`.
 - Install nodejs and NPM
 - Go to the project's root folder from your terminal and run `npm install`
 - Run `node server.js`
 - Going to [http://localhost:8000](http://localhost:8000) will render an empty dashboard skeleton in the client-side using ReactJS. Clicking on one of the dashboard options on the left pane displays the original dashboards from AdminLTE.
 - Go to [http://localhost:8000/widgets.html](http://localhost:8000/widgets.html) to see available widgets in ReactJS.
-- Use [React Developer Tools Chrome Extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) to understand the components hierarchy and structure and to track down bugs.
+- Use [React Developer Tools Chrome Extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) to understand the components hierarchy and structure and to track down bugs. 
 
+#### Step 2:
 
-#### For development
-
-- React Hot Loader can be used to ease your development workflow. This can be done by installing dev dependencies from `package.json` file. If you haven't, then
-run `npm install webpack-dev-server` and `npm install react-hot-loader`.
-- Then in your HTML, change your javascript bundles' source paths to point to the webpack-dev-server proxy in your `script` tags. So if you have something
-like this 
+- Pick a [page](https://almsaeedstudio.com/themes/AdminLTE/index2.html) from the AdminLTE project to reactify it, or some widget that hasn't been reactified yet.
+- If the page for it doesn't exist in the repo, create one for it in the [views](https://github.com/booleanhunter/ReactJS-AdminLTE/tree/master/views) folder, and render the page by defining a route for it inside [routes.js](https://github.com/booleanhunter/ReactJS-AdminLTE/blob/master/routes.js).
+- Create the entry point that renders the components inside [/src/pages](https://github.com/booleanhunter/ReactJS-AdminLTE/tree/master/src/pages) folder. Now you can begin writing your components and testing them!
+- To view and test your components on the page, add your entry point in [webpack.config.js](https://github.com/booleanhunter/ReactJS-AdminLTE/blob/master/webpack.config.js). Run `webpack -p` to generate the bundle for the page, and include the bundle and associated vendors for it in the page using `script` tags.
+- `webpack-dev-server` along with React Hot Loader can be used to ease your development workflow. This can be done by installing dev dependencies from `package.json` file. If you haven't, then run `npm install webpack-dev-server` and `npm install react-hot-loader`. Then in your HTML, change your javascript bundles' source paths to point to the webpack-dev-server proxy in your `script` tags. So if you have these bundles for example,
 
 ```html
 <script src="/dist/js/vendors.js"></script>
@@ -72,12 +77,17 @@ change this to
 <script src="http://localhost:8080/dist/js/app.bundle.js"></script>
 ```
 
+Then you can run `webpack-dev-server --hot --inline` just once - and every time you make any edits to your code and save it, the server will automatically create bundles and update the changes in the browser. This is highly recommended instead of running `webpack -p` every time you make some edit in your code. You can later change the `script` tags back once you stop `webpack-dev-server`.
+
 For a detailed explanation on setting up a workflow using Webpack, check out my blog post - [Webpack for The Fast and The Furious](https://medium.com/@booleanhunter/webpack-for-the-fast-and-the-furious-bf8d3746adbd#.uzx2l0hy4) :oncoming_police_car:
 
-This is still a work in progress and will get better over time. Will try and think of more essential features. 
+This is still a work in progress and will get better over time. 
+
+#### Step 3: Including your new components in the library
+After you've finished writing a component and testing it out, you can include it in the library.
+- Place/move your component inside the [/src/components](https://github.com/booleanhunter/ReactJS-AdminLTE/tree/master/src) folder and include it inside `widgets.src.js`.
+- Run `npm build` to generate the library `reactjsAdminlte.js`. Your component will be included in the library!
+- To make sure that your component works correctly, test it out by including it in the page using the library.
 
-#### Upcoming stuff
 
-- Re-usable chart components
-- Command line options to choose between client-side rendering and server-side rendering in ReactJS
-- Including D3 / C3 charts 
+##### If you have any further queries that you may have on how to contribute, or you have just general questions about how to use the components in your app - feel free to shoot an email. I'll help you out! :smile_cat:

package.json

@@ -40,6 +40,7 @@
     "webpack-dev-server": "~1.14.1"
   },
   "scripts": {
-    "test": "mocha test -u bdd -R spec"
+    "test": "mocha test -u bdd -R spec",
+    "build": "webpack -p --config ./webpack.production.config.js"
   }
 }

public/dist/js/buttons.bundle.js

@@ -8,18 +8,21 @@ function initialize(app){
         res.render('dashboard.html');		
 	});
 
-    app.get('/starter.html', function(req, res){
-        res.render('starter.html');
-    });
+	//Routes for rendering original adminlte pages
 
-    app.get('/index.html', function(req, res){
-        res.render('index.html');
+    app.get('/adminlte/index.html', function(req, res){
+        res.render('adminlte-pages/index.html');
     });
 
-    app.get('/index2.html', function(req, res){
-        res.render('index2.html');
+    app.get('/adminlte/index2.html', function(req, res){
+        res.render('adminlte-pages/index2.html');
     });
 
+
+    /*Routes for rendering pages in reactjs.
+    After creating a page in react, define a route for it here 
+    */
+
     app.get('/widgets.html', function(req, res){
         res.render('widgets.html');
     });