React v16 Frontend
The frontend is heavily inspired by react boilerplate, and indeed borrows a good chunk of boilerplate from it.
- React Router v4
- Redux, Redux-Saga and Redux-Form for handling state and side effects
- Webpack 3 and Babel 6
- Hot Module Reloading
- Tree Shaking
- Code Splitting (asynchronous components via react-loadable)
Entry point is at frontend/app/index.js.
Flask Backend
- SQLAlchemy ORM with Flask-SQLAlchemy and migrations provided by Flask-Alembic
- RESTful APIs provided by a customized integration between Flask-RESTful and Flask-Marshmallow
- Flask-Security provides authentication, authorization, registration and change/forgot password functionality
- User session management via Flask-Login
- User permissions and roles via Flask-Principal
- Secrets encryption via passlib and itsdangerous
- CSRF protection via Flask-WTF
- Flask-Admin integrated for painless model CRUD administration
- Flask-Session for server-side sessions
- Celery for asynchronous tasks, such as sending emails via Flask-Mail
The backend is structured using the Application Factory Pattern, in conjunction with a little bit of declarative configuration in backend/config.py (for ordered registration of extensions, and auto-detection of views, models, serializers, model admins and cli commands). The entry point is the create_app() method in backend/app.py (wsgi.py in production).
- CentOS/RHEL 7.x
- Python 3.6 (provided by the IUS Project)
- PostgreSQL 9.6
- Redis 3.2
- NGINX + uWSGI + supervisord
- Lets Encrypt HTTPS
- Email sending via Postfix with SSL and OpenDKIM
Dependencies:
dockeranddocker-compose(at least docker engine v1.13)
# install
$ git clone [email protected]:briancappello/flask-react-spa.git
$ cd flask-react-spa
# configure (the defaults are fine for development)
$ edit `backend/config.example.py` and save as `backend/config.py`
$ edit `frontend/app/config.example.js` and save as `frontend/app/config.js`
# run it
$ docker-compose up --build # grab a coffee; bootstrapping takes a while the first timeOnce it's done building and everything has booted up:
- Access the app at: http://localhost:8888
- Access MailHog at: http://localhost:8025
- Access the docs at: http://localhost:5500
- Webpack Bundle Analyzer: http://localhost:5555
- The API (eg for testing with CURL): http://localhost:5000
- And last but not least, the database is exposed on port 5442
This assumes you're on a reasonably standard *nix system. Windows might work if you know what you're doing, but you're on your own there.
Dependencies:
- Python 3.6+
- Your virtualenv tool of choice (strongly recommended)
- PostgreSQL or MariaDB (MySQL)
- Redis (used for sessions persistence and the Celery tasks queue)
- node.js & npm (v6 or later recommended, only required for development)
- MailHog (not required, but it's awesome for testing email related tasks)
# install
$ git clone [email protected]:briancappello/flask-react-spa.git
$ cd flask-react-spa
$ mkvirtualenv -p /path/to/python3 flask_react_spa
$ pip install -r requirements.txt
$ pip install -r requirements-dev.txt # for tests and sphinx docs
# configure
$ edit `backend/config.example.py` and save as `backend/config.py`
$ edit `frontend/app/config.example.js` and save as `frontend/app/config.js`
# set up database
$ sudo -u postgres -i psql
postgres=# CREATE USER flask_api WITH PASSWORD 'flask_api';
postgres=# CREATE DATABASE flask_api;
postgres=# GRANT ALL PRIVILEGES ON DATABASE flask_api TO flask_api;
postgres=# \q # (quit)
# run db migrations
$ python manage.py db upgrade
# load db fixtures (optional)
$ python manage.py db fixtures fixtures.json
# frontend dev server:
$ npm install
$ npm run start
# backend dev server:
$ python manage.py run
# backend celery workers:
$ python manage.py celery worker
$ python manage.py celery beatRun make docs and browse to http://localhost:5500
Sources are in the /docs folder.
FIXME: publish to GitHub Pages.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent