Django on circle.yml should be <2

.eslintignore

@@ -1 +1,2 @@
 assets/bundles/
+assets/webpack_bundles/

.eslintrc.js

@@ -8,7 +8,8 @@ module.exports = {
     },
     "env": {
         "es6": true,
-        "browser": true
+        "browser": true,
+        "jest": true
     },
     "settings": {
         "import/resolver": {

.gitignore

@@ -9,6 +9,7 @@ __pycache__/
 
 # coverage result
 .coverage
+/coverage/
 
 # pycharm
 .idea

.pre-commit-config.yaml

@@ -12,9 +12,9 @@
 
 - repo: local
   hooks:
-  - id: isort
-    name: isort-local
-    entry : isort
+  - id: prospector
+    name: prospector-local
+    entry: prospector
     language: python
     types: [python]
     exclude: .+/(settings|migrations)/.+
@@ -31,16 +31,16 @@
                 \.eslintrc\.js
             )$
     pass_filenames: true
+  - id: isort
+    name: isort-local
+    entry : isort
+    language: python
+    types: [python]
+    exclude: .+/(settings|migrations)/.+
+    pass_filenames: true
   - id: missing-migrations
     name: missing-migrations-local
-    entry: python manage.py has_missing_migrations
+    entry: pipenv run python manage.py has_missing_migrations
     language: system
     always_run: true
     pass_filenames: false
-  - id: prospector
-    name: prospector-local
-    entry: prospector --messages-only
-    language: python
-    types: [python]
-    exclude: .+/(settings|migrations)/.+
-    pass_filenames: true

Makefile

@@ -6,7 +6,7 @@ clean:
 	@find . -name "__pycache__" -delete
 
 test:
-	python manage.py test $(ARG) --parallel --keepdb
+	pipenv run python manage.py test $(ARG) --parallel --keepdb
 
 testreset:
-	python manage.py test $(ARG) --parallel
+	pipenv run python manage.py test $(ARG) --parallel

Pipfile

@@ -0,0 +1,46 @@
+[[source]]
+
+url = "https://pypi.python.org/simple"
+verify_ssl = true
+name = "pypi"
+
+
+[dev-packages]
+django-debug-toolbar = "*"
+django-debug-toolbar-request-history = "*"
+django-naomi = "*"
+fixmydjango = "*"
+model-mommy = "*"
+pre_commit = "*"
+
+
+
+[packages]
+
+Django = ">=1,<2"
+celery = {extras = ["redis"]}
+django-model-utils = "*"
+django-webpack-loader = "*"
+django-js-reverse = "*"
+django-import-export = "*"
+python-decouple = "*"
+"psycopg2" = "*"
+brotlipy = "*"
+django-log-request-id = "*"
+dj-database-url = "*"
+gunicorn = "*"
+opbeat = "*"
+whitenoise = "*"
+bandit = "*"
+coverage = "*"
+astroid = "<1.6"
+pylint = "<1.8"
+prospector = {extras = ["with-vulture"]}
+isort = "*"
+safety = "*"
+ipython = "*"
+
+
+[requires]
+
+python_version = "3.6"

README.md

@@ -29,8 +29,10 @@ This is a good starting point for modern Python/JavaScript web projects.
 django-admin startproject theprojectname --extension py,yml,json --name Procfile,README.md,.env.example --template=https://github.com/vintasoftware/django-react-boilerplate/archive/boilerplate-release.zip
 ```
 - [ ] Above: don't forget the `--extension` and `--name` params!
-- [ ] `pip install -r requirements-to-freeze.txt`
-- [ ] `pip freeze > requirements.txt`
+- [ ] Install pipenv if not installed yet: `pip install pipenv` (maybe you have to run this command as an OS superuser)
+- [ ] Make sure you have Python 3.6 installed
+- [ ] `pipenv install --dev`
+- [ ] Activate the newly created virtualenv with `pipenv shell`
 - [ ] `npm update --save`
 - [ ] `npm update --save-dev`
 - [ ] Check for outdated npm dependencies with `npm outdated` and update them
@@ -56,9 +58,10 @@ After completing ALL of the above, remove this `Project bootstrap` section from
 - Setup [editorconfig](http://editorconfig.org/), [prospector](https://prospector.landscape.io/en/master/) and [ESLint](http://eslint.org/) in the text editor you will use to develop.
 
 ### Running the project
-- `pip install -r requirements.txt`
+- `pipenv install --dev`
 - `npm install`
 - `npm run start`
+- `pipenv shell`
 - `python manage.py runserver`
 
 ### Testing
@@ -69,7 +72,7 @@ Will run django tests using `--keepdb` and `--parallel`. You may pass a path to
 `make test someapp.tests.test_views`
 
 ### Adding new pypi libs
-Add high level dependecies to `requirements-to-freeze.txt` and `pip freeze > requirements.txt`. This is [A Better Pip Workflow](http://www.kennethreitz.org/essays/a-better-pip-workflow).
+Just run `pipenv install LIB_NAME_ON_PYPI` and then `pipenv lock` to lock the version in Pipfile.lock file
 
 ## Linting
 - Manually with `prospector` and `npm run lint` on project root.

assets/js/app/example-app/components/ColorChanger/ColorChanger.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ColorDisplay from '../ColorDisplay';
+
+import './style.scss';
+
+
+class ColorChanger extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      color: 'black',
+    };
+
+    this.handleChangeColor = this.handleChangeColor.bind(this);
+  }
+
+  handleChangeColor(e) {
+    const color = e.target.value;
+    this.setState({ color });
+  }
+
+  render() {
+    const { title } = this.props;
+
+    return (
+      <div className="main-container">
+        <h2>{title}</h2>
+        <h3 className="app-name">Color Changer App</h3>
+        <p>
+          Check this example app: change the color to see it reflected in the text next to it.
+        </p>
+
+        <div className="inner-container">
+          <select className="color-picker" onChange={this.handleChangeColor}>
+            <option value="black">Black</option>
+            <option value="green">Green</option>
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+            <option value="purple">Purple</option>
+          </select>
+
+          <ColorDisplay color={this.state.color} />
+        </div>
+      </div>
+    );
+  }
+}
+
+ColorChanger.defaultProps = {
+  title: 'React App Loaded!',
+};
+
+ColorChanger.propTypes = {
+  title: PropTypes.string,
+};
+
+export default ColorChanger;

assets/js/app/example-app/components/ColorChanger/__tests__/ColorChanger.snaps.spec.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import ColorChanger from '../ColorChanger';
+
+jest.mock('../../ColorDisplay/ColorDisplay');
+
+
+describe('ColorChanger', () => {
+  let Component;
+  let tree;
+
+  test('Some title', () => {
+    Component = renderer.create(
+      <ColorChanger title="This is a test title" />);
+
+    tree = Component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('No title (should use default)', () => {
+    Component = renderer.create(
+      <ColorChanger />);
+
+    tree = Component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

assets/js/app/example-app/components/ColorChanger/__tests__/__snapshots__/ColorChanger.snaps.spec.js.snap

@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorChanger No title (should use default) 1`] = `
+<div
+  className="main-container"
+>
+  <h2>
+    React App Loaded!
+  </h2>
+  <h3
+    className="app-name"
+  >
+    Color Changer App
+  </h3>
+  <p>
+    Check this example app: change the color to see it reflected in the text next to it.
+  </p>
+  <div
+    className="inner-container"
+  >
+    <select
+      className="color-picker"
+      onChange={[Function]}
+    >
+      <option
+        value="black"
+      >
+        Black
+      </option>
+      <option
+        value="green"
+      >
+        Green
+      </option>
+      <option
+        value="red"
+      >
+        Red
+      </option>
+      <option
+        value="blue"
+      >
+        Blue
+      </option>
+      <option
+        value="purple"
+      >
+        Purple
+      </option>
+    </select>
+    <span>
+      ColorDisplay 
+      {"color":"black"}
+    </span>
+  </div>
+</div>
+`;
+
+exports[`ColorChanger Some title 1`] = `
+<div
+  className="main-container"
+>
+  <h2>
+    This is a test title
+  </h2>
+  <h3
+    className="app-name"
+  >
+    Color Changer App
+  </h3>
+  <p>
+    Check this example app: change the color to see it reflected in the text next to it.
+  </p>
+  <div
+    className="inner-container"
+  >
+    <select
+      className="color-picker"
+      onChange={[Function]}
+    >
+      <option
+        value="black"
+      >
+        Black
+      </option>
+      <option
+        value="green"
+      >
+        Green
+      </option>
+      <option
+        value="red"
+      >
+        Red
+      </option>
+      <option
+        value="blue"
+      >
+        Blue
+      </option>
+      <option
+        value="purple"
+      >
+        Purple
+      </option>
+    </select>
+    <span>
+      ColorDisplay 
+      {"color":"black"}
+    </span>
+  </div>
+</div>
+`;

assets/js/app/example-app/components/ColorChanger/index.js

@@ -0,0 +1,3 @@
+import ColorChanger from './ColorChanger';
+
+export default ColorChanger;

assets/js/app/example-app/components/ColorChanger/style.scss

@@ -0,0 +1,19 @@
+.main-container {
+  border: 1px dashed grey;
+  margin: 5px;
+  padding: 5px;
+
+  .app-name {
+    color: red;
+    padding-top: 20px;
+  }
+
+  .inner-container {
+    margin: 0;
+    padding: 5px;
+
+    .color-picker {
+      margin: 0px 5px 0px 5px;
+    }
+  }
+}