├── .gitignore
├── README.md
├── app.py
├── js
    ├── Hello.js
    └── app.js
├── package.json
├── requirements.txt
├── templates
    └── index.html
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | venv
3 | node_modules
4 | static/bundle.js
5 | 
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # React + Flask starter kit
 3 | 
 4 | A quick starter repo that includes Flask and React, with Babel and Webpack. For proof-of-concept projects, workshop settings, etc where you don't want to worry about developer setup or writing config files.
 5 | 
 6 | TLDR; for the quick and dirty setup, install your dependencies:
 7 | 
 8 | ```
 9 | pip install virtualenv
10 | virtualenv venv; source venv/bin/activate
11 | pip install -r requirements.txt
12 | npm install -g webpack; npm install
13 | ```
14 | 
15 | Then in two separate tabs run `python app.py` and `webpack --watch`. Make edits to `js/Hello.js` and `app.py` to edit the frontend and backend, respectively.
16 | 
17 | These steps are explained in more detail below.
18 | 
19 | ## Prerequisites
20 | 
21 | You'll need some package managers.
22 | 
23 | - `npm`
24 | - `pip`
25 | 
26 | ## Setup
27 | 
28 | For the backend:
29 | 
30 | ```
31 | virtualenv venv
32 | source venv/bin/activate
33 | pip install -r requirements.txt
34 | ```
35 | 
36 | For the frontend:
37 | 
38 | If you don't have webpack, install it:
39 | 
40 | ```
41 | npm install -g webpack
42 | ```
43 | 
44 | Then, use `npm` to install the remaining JavaScript dependencies.
45 | 
46 | ```
47 | npm install
48 | ```
49 | 
50 | ## Development
51 | 
52 | The entry point for the app is in `js/app.js`. The starter React component is `js/Hello.js`. Editing this file is a good place to start.
53 | 
54 | While developing on the frontend, run `webpack --watch` to keep re-compiling your JavaScript code.
55 | 
56 | Running `webpack` creates a file in `static/bundle.js`, which is the bundled version of your frontend code.
57 | 
58 | The "backend" here is a bare-bones Flask app. Look in `app.py` if you want to make edits to the backend.
59 | 
60 | To run the application, follow the steps in the next section.
61 | 
62 | ## Running the app
63 | 
64 | If you're using a virtualenv, activate it.
65 | 
66 | ```
67 | source venv/bin/activate
68 | ```
69 | 
70 | Then run the Flask app:
71 | 
72 | ```
73 | python app.py
74 | ```
75 | 
76 | 


--------------------------------------------------------------------------------
/app.py:
--------------------------------------------------------------------------------
 1 | from flask import Flask, render_template
 2 | app = Flask(__name__)
 3 | 
 4 | @app.route('/')
 5 | def hello_world():
 6 |   return render_template('index.html')
 7 | 
 8 | if __name__ == '__main__':
 9 |   app.run(debug=True)
10 | 
11 | 


--------------------------------------------------------------------------------
/js/Hello.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | var Hello = React.createClass({
 4 |   render() {
 5 |     return <h1>Hello, world</h1>;
 6 |   }
 7 | });
 8 | 
 9 | export default Hello;
10 | 
11 | 


--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
1 | import Hello from './Hello';
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 | 
5 | ReactDOM.render(<Hello/>, document.getElementById('reactEntry'));
6 | 
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "starter-kit",
 3 |   "version": "1.1.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "build": "webpack",
 9 |     "start": "python app.py"
10 |   },
11 |   "author": "",
12 |   "license": "ISC",
13 |   "devDependencies": {
14 |     "babel-core": "^6.4.5",
15 |     "babel-loader": "^6.2.1",
16 |     "babel-preset-es2015": "^6.3.13",
17 |     "babel-preset-react": "^6.3.13",
18 |     "webpack": "^1.12.12"
19 |   },
20 |   "dependencies": {
21 |     "react": "^0.14.7",
22 |     "react-dom": "^0.14.7"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | Flask==0.10.1
2 | itsdangerous==0.24
3 | Jinja2==2.8
4 | MarkupSafe==0.23
5 | Werkzeug==0.10.4
6 | wheel==0.24.0
7 | 


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
 1 | <head>
 2 | </head>
 3 | 
 4 | <body>
 5 |   <div id="reactEntry"></div>
 6 | 
 7 |   <!-- Attach React components -->
 8 |   <script type="text/javascript" src="{{ url_for('static', filename='bundle.js') }}"></script>
 9 | </body>
10 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');  
 2 | module.exports = {  
 3 |   entry: [
 4 |     "./js/app.js"
 5 |   ],
 6 |   output: {
 7 |     path: __dirname + '/static',
 8 |     filename: "bundle.js"
 9 |   },
10 |   module: {
11 |     loaders: [
12 |       {
13 |         test: /\.js?$/,
14 |         loader: 'babel-loader',
15 |         query: {
16 |           presets: ['es2015', 'react']
17 |         },
18 |         exclude: /node_modules/
19 |       }
20 |     ]
21 |   },
22 |   plugins: [
23 |   ]
24 | };
25 | 


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