├── .gitignore
├── README.md
├── gulpfile.js
├── package.json
├── scripts
    └── init.mongo.js
├── src
    ├── App.js
    ├── BugAdd.js
    ├── BugEdit.js
    ├── BugFilter.js
    └── BugList.js
├── static
    └── index.html
├── test
    └── test.sh
└── webapp.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | static/App.js
3 | static/bundle.js
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Tutorial using MERN stack
  2 | Build a complete React app, step-by-step with the MERN stack
  3 | 
  4 | ## Introduction
  5 | This is a tutorial to get started with React, using the MERN stack. You will
  6 | not only learn React, but also associated environment and complimentary tools
  7 | such as Mongo, Express, gulp etc.
  8 | 
  9 | In the unlikely event that you landed here first, the complete step-by-step
 10 | instructions are available 
 11 | [here on Hashnode](https://hashnode.com/post/react-tutorial-using-mern-stack-ciiyus9m700qqge53mer0isxz).
 12 | Read and follow the tutorial there.
 13 | 
 14 | ## 1. Hello World
 15 | 
 16 | ### 1.1 index.html as a file
 17 | Create index.html as a file, use all scripts (react, react-dom, babel) from CDN.
 18 | Write a Hello World element within the HTML between `<script>` tags.
 19 | 
 20 | ### 1.2 Serve it up
 21 | Use Node and Express to serve the HTML file.
 22 | 
 23 | ## 2. Organize
 24 | Transform the JSX into JS at build-time rather than at run-time.
 25 | 
 26 | ### 2.1 Split HTML and JSX
 27 | Split JSX and HTML into separate files.
 28 | 
 29 | ### 2.2 Manual transform
 30 | Serve a transformed JSX rather than the JSX itself.
 31 | 
 32 | ## 3. Compose Components
 33 | Start building a simple CRUD app.
 34 | 
 35 | ### 3.1 Use React.createClass
 36 | Use React.createClass to create a class and render it instead of rendering
 37 | a DOM element directly in ReactDOM.render().
 38 | 
 39 | ### 3.2 Compose
 40 | Create a component by using other components.
 41 | 
 42 | ### 3.3 Communicate
 43 | Communicate between components using props
 44 | 
 45 | ### 3.4 Dynamic composition
 46 | Create multiple components dynamically based on data
 47 | 
 48 | ## 4. Dynamic Updates
 49 | Dynamically update the data model and re-render.
 50 | 
 51 | ### 4.1 Create initial state
 52 | Start using state, prepare for dynamic updates.
 53 | 
 54 | ### 4.2 Update state
 55 | Dynamically update the state and see the magic.
 56 | 
 57 | ### 4.3
 58 | Communicate from child to a parent component.
 59 | 
 60 | ## 5. Data on server
 61 | Move data to the server.
 62 | 
 63 | ### 5.1 GET API
 64 | Implement a GET API on the server to return a list of records.
 65 | 
 66 | ### 5.2 POST API
 67 | Implement a POST API to add a new record.
 68 | 
 69 | ### 5.3 Use the GET API
 70 | Change client code to fetch data from server.
 71 | 
 72 | ### 5.4 Use the POST API
 73 | Change client code to send data to server for Add record.
 74 | 
 75 | ## 6. Save to database
 76 | Persist the data in a database.
 77 | 
 78 | ### 6.1 Initialize
 79 | Write a script to initialize a MongoDB collection.
 80 | 
 81 | ### 6.2 Connect and Read
 82 | Create a permanent connection to the DB, change GET API to read from DB.
 83 | 
 84 | ### 6.3 Write to DB
 85 | Change POST API to insert a record into the DB.
 86 | 
 87 | ## 7. Build and Bundle
 88 | Modularize, use browserify to serve a bundle of all scripts.
 89 | 
 90 | ### 7.1 browserify
 91 | Use browserify to create a bundle manually.
 92 | 
 93 | ### 7.2 Automate with gulp
 94 | Use gulp to automate the manual tasks.
 95 | 
 96 | ### 7.3 Watchify
 97 | Use watchify to watch the source file for changes and auto-build.
 98 | 
 99 | ### 7.4 Error handling
100 | Log errors in the source file while watching.
101 | 
102 | ### 7.5 Modularize
103 | Split the single source file into multiple.
104 | 
105 | ## 8. Filtering
106 | 
107 | ### 8.1 Modify GET API
108 | Modify GET API to handle a query string with filters.
109 | 
110 | ### 8.2 Hardcoded filter
111 | Create a button that filters the list, using a hardcoded filter.
112 | 
113 | ### 8.3 Filter form
114 | Create a form with controlled components and use state.
115 | 
116 | ## 9. Routing
117 | Use routing to handle different page views and query string.
118 | 
119 | ### 9.1 React Router
120 | Install React Router and build the first few routes.
121 | 
122 | ### 9.2 URL parameters
123 | Use URL parameters to initialize the filter.
124 | 
125 | ### 9.3 Filter change
126 | Propagate a filter change to the bug list *and* the URL.
127 | 
128 | ### 9.4 Component Lifecycle
129 | Listen to URL changes, reload the records and re-render the filter UI.
130 | 
131 | ## 10. Edit page
132 | Add a new view / page that let's us edit a record.
133 | 
134 | ### 10.1 GET record API
135 | Add a GET API to get a single record.
136 | 
137 | ### 10.2 PUT API
138 | Add a PUT API to modify a single record.
139 | 
140 | ### 10.3 New route and page
141 | Create a new route and a new page for editing a record.
142 | 
143 | ### 10.4 Links
144 | Create links from and to the two pages.
145 | 
146 | ## 11. React-Bootstrap
147 | Use React-Bootstrap to polish the UI.
148 | 
149 | ### 11.1 Get started
150 | Install and add a simple button.
151 | 
152 | ### 11.2 Filter
153 | Convert the filter to React-Bootstrap.
154 | 
155 | ### 11.3 Add Form
156 | Convert the Add form to React-Bootstrap.
157 | 
158 | ### 11.4 Table
159 | Convert the Table to React-Bootstrap.
160 | 
161 | ### 11.5 Edit form
162 | Convert the Edit form to React-Bootstrap.
163 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp');
 2 | var browserify = require('browserify');
 3 | var source = require('vinyl-source-stream');
 4 | var watchify = require('watchify');
 5 | 
 6 | gulp.task('bundle', function() {
 7 |   return browserify('src/App.js')
 8 |     .transform('babelify', {presets: 'react'})
 9 |     .bundle()
10 |     .pipe(source('bundle.js'))
11 |     .pipe(gulp.dest('static/'));
12 | });
13 | 
14 | gulp.task('watch', function() {
15 | 
16 |   var b = browserify({
17 |     entries: ['src/App.js'],
18 |     cache: {}, packageCache: {},
19 |     plugin: ['watchify']
20 |   });
21 | 
22 |   b.on('update', makeBundle);
23 | 
24 |   function makeBundle() {
25 |     b.transform('babelify', {presets: 'react'})
26 |       .bundle()
27 |       .on('error', function(err) {
28 |         console.error(err.message);
29 |         console.error(err.codeFrame);
30 |       })
31 |       .pipe(source('bundle.js'))
32 |       .pipe(gulp.dest('static/'));
33 |     console.log("Bundle updated, success");
34 |   }
35 | 
36 |   // we have to call bundle once to kick it off.
37 |   makeBundle();
38 | 
39 |   return b;
40 | });
41 | 
42 | gulp.task('default', ['watch']);
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-tutorial-mern",
 3 |   "version": "1.0.0",
 4 |   "description": "React Tutorial using MERN stack",
 5 |   "main": "webapp.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/vasansr/react-tutorial-mern.git"
12 |   },
13 |   "keywords": [
14 |     "react",
15 |     "tutorial",
16 |     "MERN"
17 |   ],
18 |   "author": "Vasan Subramanian",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/vasansr/react-tutorial-mern/issues"
22 |   },
23 |   "homepage": "https://github.com/vasansr/react-tutorial-mern#readme",
24 |   "dependencies": {
25 |     "babel-preset-react": "^6.3.13",
26 |     "babelify": "^7.2.0",
27 |     "body-parser": "^1.14.2",
28 |     "browserify": "^12.0.1",
29 |     "express": "^4.13.3",
30 |     "gulp": "^3.9.0",
31 |     "history": "^1.17.0",
32 |     "jquery": "^2.1.4",
33 |     "mongodb": "^2.1.2",
34 |     "react": "^0.14.5",
35 |     "react-bootstrap": "^0.28.1",
36 |     "react-dom": "^0.14.5",
37 |     "react-router": "^1.0.3",
38 |     "vinyl-source-stream": "^1.1.0",
39 |     "watchify": "^3.6.1"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/scripts/init.mongo.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/mongo
 2 | 
 3 | var db = new Mongo().getDB("bugsdb");
 4 | 
 5 | db.bugs.remove({});
 6 | 
 7 | db.bugs.insert([
 8 |   {priority: 'P1', status:'Open', owner:'Ravan', title:'App crashes on open'},
 9 |   {priority: 'P2', status:'New', owner:'Eddie', title:'Misaligned border on panel'}
10 | ]);
11 | 
12 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var ReactDOM = require('react-dom');
 3 | var Router = require('react-router').Router;
 4 | var Route = require('react-router').Route;
 5 | var Redirect = require('react-router').Redirect;
 6 | 
 7 | var BugList = require('./BugList');
 8 | var BugEdit = require('./BugEdit');
 9 | 
10 | var NoMatch = React.createClass({
11 |   render: function() {
12 |     return (
13 |       <h2>No match for the route</h2>
14 |     );
15 |   }
16 | });
17 | 
18 | ReactDOM.render(
19 |   (
20 |     <Router>
21 |       <Route path="/bugs" component={BugList} />
22 |       <Route path="/bugs/:id" component={BugEdit} />
23 |       <Redirect from="/" to="/bugs" />
24 |       <Route path="*" component={NoMatch} />
25 |     </Router>
26 |   ),
27 |   document.getElementById('main')
28 | );
29 | 
30 | 


--------------------------------------------------------------------------------
/src/BugAdd.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var ReactDOM = require('react-dom');
 3 | 
 4 | var Panel = require('react-bootstrap/lib/Panel');
 5 | var Input = require('react-bootstrap/lib/Input');
 6 | var ButtonInput = require('react-bootstrap/lib/ButtonInput');
 7 | 
 8 | var BugAdd = React.createClass({
 9 |   render: function() {
10 |     //console.log("Rendering BugAdd");
11 |     return (
12 |       <Panel header="Add Bug">
13 |         <form name="bugAdd">
14 |           <Input type="text" name="title" label="Bug Title" />
15 |           <Input type="text" name="owner" label="Owner" />
16 |           <ButtonInput value="Add" bsStyle="primary" onClick={this.handleSubmit} />
17 |         </form>
18 |       </Panel>
19 |     )
20 |   },
21 | 
22 |   handleSubmit: function(e) {
23 |     e.preventDefault();
24 |     var form = document.forms.bugAdd;
25 |     this.props.addBug({owner: form.owner.value, title: form.title.value, status: 'New', priority: 'P1'});
26 |     // clear the form for the next input
27 |     form.owner.value = ""; form.title.value = "";
28 |   }
29 | });
30 | 
31 | module.exports = BugAdd;
32 | 


--------------------------------------------------------------------------------
/src/BugEdit.js:
--------------------------------------------------------------------------------
  1 | var React = require('react');
  2 | var ReactDOM = require('react-dom');
  3 | var $ = require('jquery');
  4 | var Link = require('react-router').Link;
  5 | 
  6 | var Panel = require('react-bootstrap/lib/Panel');
  7 | var Input = require('react-bootstrap/lib/Input');
  8 | var Button  = require('react-bootstrap/lib/Button');
  9 | var ButtonToolbar = require('react-bootstrap/lib/ButtonToolbar');
 10 | var Alert = require('react-bootstrap/lib/Alert');
 11 | 
 12 | var BugEdit = React.createClass({
 13 |   render: function() {
 14 |     var success = (
 15 |       <Alert bsStyle="success" onDismiss={this.dismissSuccess} dismissAfter={5000}>
 16 |         Bug saved to DB successfully.
 17 |       </Alert>
 18 |     );
 19 |     return (
 20 |       <div style={{maxWidth: 600}}>
 21 |         <Panel header={"Edit bug: " + this.props.params.id}>
 22 |           <form onSubmit={this.submit}>
 23 |             <Input type="select" label="Priority"
 24 |               value={this.state.priority} onChange={this.onChangePriority}>
 25 |               <option value="P1">P1</option>
 26 |               <option value="P2">P2</option>
 27 |               <option value="P3">P3</option>
 28 |             </Input>
 29 |             <Input type="select" label="Status" value={this.state.status} onChange={this.onChangeStatus}>
 30 |               <option>New</option>
 31 |               <option>Open</option>
 32 |               <option>Closed</option>
 33 |             </Input>
 34 |             <Input type="text" label="Title" value={this.state.title} onChange={this.onChangeTitle}/>
 35 |             <Input type="text" label="Owner" value={this.state.owner} onChange={this.onChangeOwner}/>
 36 |             <ButtonToolbar>
 37 |               <Button type="submit" bsStyle="primary">Submit</Button>
 38 |               <Link className="btn btn-link" to="/bugs">Back</Link>
 39 |             </ButtonToolbar>
 40 |           </form>
 41 |         </Panel>
 42 |         {this.state.successVisible ? success : null}
 43 |       </div>
 44 |     );
 45 |   },
 46 | 
 47 |   getInitialState: function() {
 48 |     return {successVisible: false};
 49 |   },
 50 | 
 51 |   componentDidMount: function() {
 52 |     this.loadData();
 53 |   },
 54 | 
 55 |   componentDidUpdate: function(prevProps) {
 56 |     console.log("BugEdit: componentDidUpdate", prevProps.params.id, this.props.params.id);
 57 |     if (this.props.params.id != prevProps.params.id) {
 58 |       this.loadData();
 59 |     }
 60 |   },
 61 | 
 62 |   loadData: function() {
 63 |     $.ajax('/api/bugs/' + this.props.params.id) .done(function(bug) {
 64 |       this.setState(bug);
 65 |     }.bind(this));
 66 |   },
 67 | 
 68 |   onChangePriority: function(e) {
 69 |     this.setState({priority: e.target.value});
 70 |   },
 71 |   onChangeStatus: function(e) {
 72 |     this.setState({status: e.target.value});
 73 |   },
 74 |   onChangeOwner: function(e) {
 75 |     this.setState({owner: e.target.value});
 76 |   },
 77 |   onChangeTitle: function(e) {
 78 |     this.setState({title: e.target.value});
 79 |   },
 80 | 
 81 |   showSuccess: function() {
 82 |     this.setState({successVisible: true});
 83 |   },
 84 |   dismissSuccess: function() {
 85 |     this.setState({successVisible: false});
 86 |   },
 87 | 
 88 |   submit: function(e) {
 89 |     e.preventDefault();
 90 |     var bug = {
 91 |       status: this.state.status,
 92 |       priority: this.state.priority,
 93 |       owner: this.state.owner,
 94 |       title: this.state.title
 95 |     }
 96 | 
 97 |     $.ajax({
 98 |       url: '/api/bugs/' + this.props.params.id, type: 'PUT', contentType:'application/json',
 99 |       data: JSON.stringify(bug),
100 |       dataType: 'json',
101 |       success: function(bug) {
102 |         this.setState(bug);
103 |         this.showSuccess();
104 |       }.bind(this),
105 |     });
106 |   }
107 | });
108 | 
109 | module.exports = BugEdit;
110 | 


--------------------------------------------------------------------------------
/src/BugFilter.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var ReactDOM = require('react-dom');
 3 | 
 4 | var Panel = require('react-bootstrap/lib/Panel');
 5 | var Grid = require('react-bootstrap/lib/Grid');
 6 | var Row = require('react-bootstrap/lib/Row');
 7 | var Col = require('react-bootstrap/lib/Col');
 8 | var Input = require('react-bootstrap/lib/Input');
 9 | var ButtonInput = require('react-bootstrap/lib/ButtonInput');
10 | 
11 | var BugFilter = React.createClass({
12 |   render: function() {
13 |     console.log("Rendering BugFilter, state=", this.state);
14 |     return (
15 |       <Panel collapsible defaultExpanded={true} header="Filter">
16 |         <Grid fluid={true}>
17 |           <Row>
18 |             <Col xs={12} sm={6} md={4}>
19 |               <Input type="select" label="Priority" value={this.state.priority}
20 |                 onChange={this.onChangePriority}>
21 |                 <option value="">(Any)</option>
22 |                 <option value="P1">P1</option>
23 |                 <option value="P2">P2</option>
24 |                 <option value="P3">P3</option>
25 |               </Input>
26 |             </Col>
27 |             <Col xs={12} sm={6} md={4}>
28 |               <Input type="select" label="Status" value={this.state.status}
29 |                 onChange={this.onChangeStatus}>
30 |                 <option value="">(Any)</option>
31 |                 <option>New</option>
32 |                 <option>Open</option>
33 |                 <option>Closed</option>
34 |               </Input>
35 |             </Col>
36 |             <Col xs={12} sm={6} md={4}>
37 |               <Input label="&nbsp;">
38 |                 <ButtonInput value="Search" bsStyle="primary" onClick={this.submit} />
39 |               </Input>
40 |             </Col>
41 |           </Row>
42 |         </Grid>
43 |       </Panel>
44 |     )
45 |   },
46 | 
47 |   getInitialState: function() {
48 |     var initFilter = this.props.initFilter;
49 |     return {status: initFilter.status, priority: initFilter.priority};
50 |   },
51 | 
52 |   componentWillReceiveProps: function(newProps) {
53 |     if (newProps.initFilter.status === this.state.status
54 |         && newProps.initFilter.priority === this.state.priority) {
55 |       console.log("BugFilter: componentWillReceiveProps, no change");
56 |       return;
57 |     }
58 |     console.log("BugFilter: componentWillReceiveProps, new filter:", newProps.initFilter);
59 |     this.setState({status: newProps.initFilter.status, priority: newProps.initFilter.priority});
60 |   },
61 | 
62 |   onChangeStatus: function(e) {
63 |     this.setState({status: e.target.value});
64 |   },
65 |   onChangePriority: function(e) {
66 |     this.setState({priority: e.target.value});
67 |   },
68 | 
69 |   submit: function(e) {
70 |     var newFilter = {};
71 |     if (this.state.priority) newFilter.priority = this.state.priority;
72 |     if (this.state.status) newFilter.status = this.state.status;
73 |     this.props.submitHandler(newFilter);
74 |   }
75 | });
76 | 
77 | module.exports = BugFilter;
78 | 


--------------------------------------------------------------------------------
/src/BugList.js:
--------------------------------------------------------------------------------
  1 | var React = require('react');
  2 | var ReactDOM = require('react-dom');
  3 | var $ = require('jquery');
  4 | var Link = require('react-router').Link;
  5 | 
  6 | var BugFilter = require('./BugFilter');
  7 | var BugAdd = require('./BugAdd');
  8 | 
  9 | var BugRow = React.createClass({
 10 |   render: function() {
 11 |     //console.log("Rendering BugRow:", this.props.bug);
 12 |     return (
 13 |       <tr>
 14 |         <td>
 15 |           <Link to={'/bugs/' + this.props.bug._id}>{this.props.bug._id}</Link>
 16 |         </td>
 17 |         <td>{this.props.bug.status}</td>
 18 |         <td>{this.props.bug.priority}</td>
 19 |         <td>{this.props.bug.owner}</td>
 20 |         <td>{this.props.bug.title}</td>
 21 |       </tr>
 22 |     )
 23 |   }
 24 | });
 25 | 
 26 | var BugTable = React.createClass({
 27 |   render: function() {
 28 |     //console.log("Rendering bug table, num items:", this.props.bugs.length);
 29 |     var bugRows = this.props.bugs.map(function(bug) {
 30 |       return <BugRow key={bug._id} bug={bug} />
 31 |     });
 32 |     return (
 33 |       <table className="table table-striped table-bordered table-condensed">
 34 |         <thead>
 35 |           <tr>
 36 |             <th>Id</th>
 37 |             <th>Status</th>
 38 |             <th>Priority</th>
 39 |             <th>Owner</th>
 40 |             <th>Title</th>
 41 |           </tr>
 42 |         </thead>
 43 |         <tbody>
 44 |           {bugRows}
 45 |         </tbody>
 46 |       </table>
 47 |     )
 48 |   }
 49 | });
 50 | 
 51 | var BugList = React.createClass({
 52 |   getInitialState: function() {
 53 |     return {bugs: []};
 54 |   },
 55 |   render: function() {
 56 |     console.log("Rendering BugList, num items:", this.state.bugs.length);
 57 |     return (
 58 |       <div>
 59 |         <h1>Bug Tracker</h1>
 60 |         <BugFilter submitHandler={this.changeFilter} initFilter={this.props.location.query}/>
 61 |         <BugTable bugs={this.state.bugs}/>
 62 |         <BugAdd addBug={this.addBug} />
 63 |       </div>
 64 |     )
 65 |   },
 66 | 
 67 |   componentDidMount: function() {
 68 |     console.log("BugList: componentDidMount");
 69 |     this.loadData();
 70 |   },
 71 | 
 72 |   componentDidUpdate: function(prevProps) {
 73 |     var oldQuery = prevProps.location.query;
 74 |     var newQuery = this.props.location.query;
 75 |     if (oldQuery.priority === newQuery.priority &&
 76 |         oldQuery.status === newQuery.status) {
 77 |       console.log("BugList: componentDidUpdate, no change in filter, not updating");
 78 |       return;
 79 |     } else {
 80 |       console.log("BugList: componentDidUpdate, loading data with new filter");
 81 |       this.loadData();
 82 |     }
 83 |   },
 84 | 
 85 |   loadData: function() {
 86 |     var query = this.props.location.query || {};
 87 |     var filter = {priority: query.priority, status: query.status};
 88 | 
 89 |     $.ajax('/api/bugs', {data: filter}).done(function(data) {
 90 |       this.setState({bugs: data});
 91 |     }.bind(this));
 92 |     // In production, we'd also handle errors.
 93 |   },
 94 | 
 95 |   changeFilter: function(newFilter) {
 96 |     this.props.history.push({search: '?' + $.param(newFilter)});
 97 |   },
 98 | 
 99 |   addBug: function(bug) {
100 |     console.log("Adding bug:", bug);
101 |     $.ajax({
102 |       type: 'POST', url: '/api/bugs', contentType: 'application/json',
103 |       data: JSON.stringify(bug),
104 |       success: function(data) {
105 |         var bug = data;
106 |         // We're advised not to modify the state, it's immutable. So, make a copy.
107 |         var bugsModified = this.state.bugs.concat(bug);
108 |         this.setState({bugs: bugsModified});
109 |       }.bind(this),
110 |       error: function(xhr, status, err) {
111 |         // ideally, show error to user.
112 |         console.log("Error adding bug:", err);
113 |       }
114 |     });
115 |   }
116 | });
117 | 
118 | module.exports = BugList;
119 | 
120 | 


--------------------------------------------------------------------------------
/static/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <title>Bug Tracker - a React tutorial using MERN</title>
 6 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 7 |   </head>
 8 |   <body>
 9 |     <div id="main"></div>
10 |     <script src="/bundle.js" type="text/javascript"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/test/test.sh:
--------------------------------------------------------------------------------
 1 | # API Tests
 2 | 
 3 | # test GET on /api/bugs: returns array of bugs
 4 | curl -v localhost:3000/api/bugs 
 5 | 
 6 | # Same test with a If-None-Match that matches a previous etag. This
 7 | # will return a 304.
 8 | curl -v --header 'If-None-Match: W/"b5-F1b7cwQ6h9O04csif+Wqkw"' localhost:3000/api/bugs 
 9 | 
10 | # Test POST to create a new bug and return it.
11 | # Won't work if type is not set to */* in bodyParser.
12 | curl -v \
13 |   --data '{"priority":"P3","owner":"Pieta","status":"Open","title":"New bug added via api"}' \
14 |   http://localhost:3000/api/bugs
15 | 
16 | curl -v \
17 |   --header 'Content-Type: application/json' \
18 |   --data '{"priority":"P3","owner":"Pieta","status":"Open","title":"New bug added via api"}' \
19 |   http://localhost:3000/api/bugs
20 | 


--------------------------------------------------------------------------------
/webapp.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var bodyParser = require('body-parser');
 3 | var MongoClient = require('mongodb').MongoClient;
 4 | var ObjectId = require('mongodb').ObjectID;
 5 | 
 6 | var app = express();
 7 | var db;
 8 | 
 9 | app.use(express.static('static'));
10 | 
11 | /* Get a list of filtered records */
12 | app.get('/api/bugs', function(req, res) {
13 |   console.log("Query string", req.query);
14 |   var filter = {};
15 |   if (req.query.priority)
16 |     filter.priority = req.query.priority;
17 |   if (req.query.status)
18 |     filter.status = req.query.status;
19 | 
20 |   db.collection("bugs").find(filter).toArray(function(err, docs) {
21 |     res.json(docs);
22 |   });
23 | });
24 | 
25 | app.use(bodyParser.json());
26 | 
27 | /* Insert a record */
28 | app.post('/api/bugs/', function(req, res) {
29 |   console.log("Req body:", req.body);
30 |   var newBug = req.body;
31 |   db.collection("bugs").insertOne(newBug, function(err, result) {
32 |     var newId = result.insertedId;
33 |     db.collection("bugs").find({_id: newId}).next(function(err, doc) {
34 |       res.json(doc);
35 |     });
36 |   });
37 | });
38 | 
39 | /* Get a single record */
40 | app.get('/api/bugs/:id', function(req, res) {
41 |   db.collection("bugs").findOne({_id: ObjectId(req.params.id)}, function(err, bug) {
42 |     res.json(bug);
43 |   });
44 | });
45 | 
46 | /* Modify one record, given its ID */
47 | app.put('/api/bugs/:id', function(req, res) {
48 |   var bug = req.body;
49 |   console.log("Modifying bug:", req.params.id, bug);
50 |   var oid = ObjectId(req.params.id);
51 |   db.collection("bugs").updateOne({_id: oid}, bug, function(err, result) {
52 |     db.collection("bugs").find({_id: oid}).next(function(err, doc) {
53 |       res.send(doc);
54 |     });
55 |   });
56 | });
57 | 
58 | MongoClient.connect('mongodb://localhost/bugsdb', function(err, dbConnection) {
59 |   db = dbConnection;
60 |   var server = app.listen(3000, function() {
61 | 	  var port = server.address().port;
62 | 	  console.log("Started server at port", port);
63 |   });
64 | });
65 | 


--------------------------------------------------------------------------------