dternyak / react-redux-flask Goto Github PK

View Code? Open in Web Editor NEW

1.5K 50.0 321.0 17.47 MB

Boilerplate application for a Python/Flask JWT Backend and a Javascript/React/Redux Front-End with Material UI.

License: MIT License

Python 21.62% Mako 0.67% HTML 0.90% JavaScript 74.88% CSS 1.93%

redux react flask material-ui boilerplate-application

react-redux-flask's Introduction

React-Redux-Flask

Boilerplate application for a Flask JWT Backend and a React/Redux Front-End with Material UI.

Python 2.7+ or 3.x
Pytest
Heroku
Flask
React
Redux
React-Router 2.0
React-Router-Redux
Babel 6
SCSS processing
Webpack

Create DB

$ export DATABASE_URL="postgresql://username:password@localhost/mydatabase"

or

$ export DATABASE_URL="mysql+mysqlconnector://username:password@localhost/mydatabase"

or

$ export DATABASE_URL="sqlite:///your.db"

(More about connection strings in this flask config guide.)

$ python manage.py create_db
$ python manage.py db upgrade
$ python manage.py db migrate

To update database after creating new migrations, use:

$ python manage.py db upgrade

Install Front-End Requirements

$ cd static
$ npm install

Run Back-End

$ python manage.py runserver

Test Back-End

$ python test.py --cov-report=term --cov-report=html --cov=application/ tests/

Run Front-End

$ cd static
$ npm start

Build Front-End

$ npm run build:production

New to Python?

If you are approaching this demo as primarily a frontend dev with limited or no python experience, you may need to install a few things that a seasoned python dev would already have installed.

Most Macs already have python 2.7 installed but you may not have pip install. You can check to see if you have them installed:

$ python --version
$ pip --version

If pip is not installed, you can follow this simple article to get both homebrew and python

After you install python, you can optionally also install python 3

$ brew install python3

Now you can check again to see if both python and pip are installed. Once pip is installed, you can download the required flask modules:

$ sudo pip install flask flask_script flask_migrate flask_bcrypt

Now, you can decide on which database you wish to use.

New to MySQL?

If you decide on MySQL, install the free community edition of MySQL and MySQL Workbench

start MySQL from the System Preferences
open MySQL Workbench and create a database called mydatabase but don't create the tables since python will do that for you
Install the MySQL connector for Python, add the DATABASE_URL configuration, and create the database and tables

$ sudo pip install mysql-connector-python-rf
$ export DATABASE_URL="mysql+mysqlconnector://username:password@localhost/mydatabase"
$ python manage.py create_db

Note: you do not need to run "python manage.py db upgrade" or "python manage.py db migrate" if its your first go at it

Run Back-End

$ python manage.py runserver

If all goes well, you should see * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) followed by a few more lines in the terminal.

open a new tab to the same directory and run the front end

$ cd static
$ npm install
$ npm start

open your browser to http://localhost:3000/register and setup your first account
enjoy! By this point, you should be able to create an account and login without errors.

react-redux-flask's People

Contributors

Stargazers

Watchers

Forkers

iirvine domenicosolazzo tiansiyuan justin3737 sayi21cn iaserrat djangoresearch yhyuan metagearsolid chironj kaeawc ishmaelbelghazi gaelsimon mayblue9 ohs2033 sh0bh1t vamega rajasagashe agosto-danielternyak smoll qsbbq ljjsys japie1001 westonplatter xkmato jldork kevin-miles chusri thomas-hervey icyfermion rkhozinov arif-hanif steven1227 nguyenbathanh love4code groupw66 zjlywjh001 mfpierre tmd-fadi jnan77 lapetitesouris benhakunamatata zhongpeixiang bigjaked rosensama aghz alefro sami-galal aku345 zganger mstbbs nashrafeeg eternalnoob cluxton preethams2 uwevil zzl81cn flercari mcchae chaitanyaphalak ccfiel vinhvu95 headwinds joonhyongcho vgalaktionov charliestrawn petronetto teffland vladyslavkuliani uzayr lican09 imecimore velaciela-ringwing2007 tolorun lomascolo sashkomatviychuk wannerzoer sudhanshuchopra klooperator diegotavares kfnxu bos-hieu leonmak nickjmatthews abbyssoul andymaheshw dskoda1 vanessa-bell detry322 alexortizrosado daialandai alvincjin hosseinsey 9590 tinkone seipy gpoon joshuaondieki omerbenamram ddevalk

react-redux-flask's Issues

Add a testing example

It's more an improvement than an issue, but it would be nice to have the boilerplate for the testing of the components in the project.

Use admin-on-rest

Hi, and thanks for this project.

Part of what you're trying to achieve (a React admin based on a REST API) now exists as a standalone repository, in a slightly more advanced version. It's called admin-on-rest.

I think this repo would benefit a lot from reusing admin-on-rest components.

Google OAuth

What's the suggested way to do OAuth with this library? Is it through the JS gapi library on the client side or through the Python library on the server side?

I see that there's a vestige of a GitHub OAuth implementation here, but not quite sure that that was ever completed.

Add new component to material UI library

Hi dternyak,

I would like to add new components such as Button and ReactFileReader to be used into the website. How can I achieve that? I try the following but didnt work:

Manually npm install the component I want
Copy the component from @material-ui to material-ui but still didnt work

Any idea?

Get bundle.js error

The code in static/index.html goes wrong while deploying

<script src="/dist/bundle.js"></script>

There is no such path as /dist/bundle.js in static

Prod Config versus Dev webpack config errors

Inside of dev webpack config, it lists .src/index in entry. However, inside of prod that doesn't exist.
The publicPath inside of dev is /dist/ and inside of prod it's dist/. Perhaps a typo?

I believe this could cause some errors in a production environment or when building prod?

After running build:production for example I get "SyntaxError: expected expression, got '<' bundle.js:1" in my console when viewing the frontend on the index.html page. Also, the <script> tag at the bottom of index.html is showing as red and potentially broken? I believe this to could be the result of the issues above.

Apache2 Deployment

I'm trying to figure out how I would deploy this under Apache2. I've deployed Flask apps in the past, but that was using the regular Jinja frontend, not a React frontend (this is my first React app). Any pointers on how this would be done?

404 errors

The first time everything worked without any issues by running flask and node (npm start). After a bit of work, I'm now getting 404 errors on the python side when it tries to find files under /dist. I can get it working by running "npm run build:production" which will create the /static/dist directory, but not sure why it's a problem now when it wasn't before. I'm sure I'm missing something (not too experienced with flask or node).

why do you need to export database_url

I'm sorry,I don't know what the following sentence affect in this project,all I see in this project that contains DATABASE_URL is in config.py,but after I run the following sentence,codes in config.py didn't change,so I don't know how this following sentence work.thanks for explanation!:smile:

export DATABASE_URL="postgresql://localhost/yourdb"

Build error

I'm getting this build error when I run npm install in the static directory:

gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/user/Documents/workspace/github/React-Redux-Flask/static/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:223:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Linux 5.4.14-1-default
gyp ERR! command "/usr/bin/node12" "/home/user/Documents/workspace/github/React-Redux-Flask/static/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /home/user/Documents/workspace/github/React-Redux-Flask/static/node_modules/node-sass
gyp ERR! node -v v12.14.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
Build failed with error code: 1
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":"0.10 || 0.12 || 4 || 5 || 6 || 7 || 8"} (current: {"node":"12.14.1","npm":"6.13.4"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN [email protected] requires a peer of eslint-plugin-jsx-a11y@^2.2.3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2020-02-07T22_54_32_868Z-debug.log

Would you give me some pointers how to resolve this? I'm new so it will probably take me a very long time to unwind this. It seems like there's some version mismatch and missing packages; does it need node version 12.0 exactly or version 8 exactly? Why is 12.14.1 not good enough? Thanks,

Importing flask.ext.bcrypt is deprecated, use flask_bcrypt instead

In index.py, import from flask_bcrypt instead of flask.ext.bcrypt

I made a pull request.

Broken link in `requirements.txt`

http://cdn.mysql.com/Downloads/Connector-Python/mysql-connector-python-2.1.3.zip

Documentation Request

I know writing docs sucks buuuuut, would love a newbie guide for this awesome repo! Feel free to close this with prejudice :)

Thanks

Mongo DB support

Hi, are you planning to support mongo DB?

requirements.txt fails to install mysql-connector

Right now, http://cdn.mysql.com/Downloads/Connector-Python/mysql-connector-python-2.1.4.zip is giving a 404 - so installing requirements fails.

That line should probably be mysql-connector==2.1.4

Watcher compiling react file fails after detecting js error.

Just after executing npm start, webpack watchs for js files and recompiles them on updating. If I start server and change a text in some file, everything works fine and after reloading the page in web browser, I see the typed text. But if js files contain an error, watching stops and after that no change in code affects the app in browser before I reboot.

Why is there an express server in static?

I am pretty new to javascript but am I wrong that server.js is an express server?

Why is it there when you have a flask server?

requirements.txt error mysql-connector 2.1.4

There seems to be an issue with mysql-connector 2.1.4

(venv) lou@frickyou:~/lou/React-Redux-Flask$ pip install -r requirements.txt 
Collecting alembic==0.8.7 (from -r requirements.txt (line 1))
  Using cached https://files.pythonhosted.org/packages/46/16/77633a0de8b434b66e7d95ffff9606773ccb808ceb7e9528ac7daf3136a5/alembic-0.8.7.tar.gz
Collecting bcrypt==3.1.0 (from -r requirements.txt (line 2))
  Using cached https://files.pythonhosted.org/packages/9b/32/1ece045aa19069ca687d5ccd1241e03a70cae157ae908b6aa5b97789e6da/bcrypt-3.1.0.tar.gz
Collecting cffi==1.7.0 (from -r requirements.txt (line 3))
  Using cached https://files.pythonhosted.org/packages/83/3c/00b553fd05ae32f27b3637f705c413c4ce71290aa9b4c4764df694e906d9/cffi-1.7.0.tar.gz
Collecting click==6.6 (from -r requirements.txt (line 4))
  Using cached https://files.pythonhosted.org/packages/1c/7c/10b4132dd952b6a04e37626258825b8aa8c1eb99545f2eb26a77c21efb55/click-6.6-py2.py3-none-any.whl
Collecting coverage==4.2 (from -r requirements.txt (line 5))
  Using cached https://files.pythonhosted.org/packages/53/fe/9e0fbdbca15c2c1253379c3a694f4315a420555e7874445b06edeaeacaea/coverage-4.2.tar.gz
Collecting Flask==0.11.1 (from -r requirements.txt (line 6))
  Using cached https://files.pythonhosted.org/packages/63/2b/01f5ed23a78391f6e3e73075973da0ecb467c831376a0b09c0ec5afd7977/Flask-0.11.1-py2.py3-none-any.whl
Collecting Flask-Bcrypt==0.7.1 (from -r requirements.txt (line 7))
  Using cached https://files.pythonhosted.org/packages/1d/c0/6d4c04d007d72b355de24e7a223978d1a95732245f9e9becbf45d3024bf8/Flask-Bcrypt-0.7.1.tar.gz
Collecting Flask-Migrate==2.0.0 (from -r requirements.txt (line 8))
  Using cached https://files.pythonhosted.org/packages/d4/42/9e1bab5b15495e7acd25cb6b164a050b90da20af7e801aa2a7b1f74efdfa/Flask-Migrate-2.0.0.tar.gz
Collecting Flask-Script==2.0.5 (from -r requirements.txt (line 9))
  Using cached https://files.pythonhosted.org/packages/66/e9/2b3c7c548a6bad0b59da21e2050613da43aae4da617fb98847efa3e09a43/Flask-Script-2.0.5.tar.gz
Collecting Flask-SQLAlchemy==2.1 (from -r requirements.txt (line 10))
  Using cached https://files.pythonhosted.org/packages/b3/52/227aaf4e8cebb153e239c518a9e916590b2fe0e4350e6b02d92b546b69b7/Flask-SQLAlchemy-2.1.tar.gz
Collecting Flask-Testing==0.5.0 (from -r requirements.txt (line 11))
  Using cached https://files.pythonhosted.org/packages/2e/1e/63bb840ed2c1bffc1c3ba2541a63dcf4538b2cf6e2801ea80057cb0737ef/Flask-Testing-0.5.0.tar.gz
Collecting GitHub-Flask==3.1.3 (from -r requirements.txt (line 12))
  Using cached https://files.pythonhosted.org/packages/3a/44/ad6460d22f3482adde579efa837169f57cc2b6ccd5d1f5b2ec7fc5018060/GitHub-Flask-3.1.3.tar.gz
Collecting gunicorn==19.6.0 (from -r requirements.txt (line 13))
  Using cached https://files.pythonhosted.org/packages/72/de/ec28a64885e0b390063379cca601b60b1f9e51367e0c76030ac8a5cddd5e/gunicorn-19.6.0-py2.py3-none-any.whl
Collecting itsdangerous==0.24 (from -r requirements.txt (line 14))
Collecting Jinja2==2.8 (from -r requirements.txt (line 15))
  Using cached https://files.pythonhosted.org/packages/96/a1/c56bc4d99dc2663514a8481511e80eba8994133ae75eebdadfc91a5597d9/Jinja2-2.8-py2.py3-none-any.whl
Collecting Mako==1.0.4 (from -r requirements.txt (line 16))
  Using cached https://files.pythonhosted.org/packages/7a/ae/925434246ee90b42e8ef57d3b30a0ab7caf9a2de3e449b876c56dcb48155/Mako-1.0.4.tar.gz
Collecting MarkupSafe==0.23 (from -r requirements.txt (line 17))
  Using cached https://files.pythonhosted.org/packages/c0/41/bae1254e0396c0cc8cf1751cb7d9afc90a602353695af5952530482c963f/MarkupSafe-0.23.tar.gz
Collecting mysql-connector==2.1.4 (from -r requirements.txt (line 18))
  Could not find a version that satisfies the requirement mysql-connector==2.1.4 (from -r requirements.txt (line 18)) (from versions: 2.1.7, 2.2.9)
No matching distribution found for mysql-connector==2.1.4 (from -r requirements.txt (line 18))

I will try 2.1.7 and report any issues that I find.

my pip version: pip 9.0.1 from /React-Redux-Flask/venv/lib/python3.6/site-packages (python 3.6)

Python 3.6+ Support

This is an improvement rather than an issue at the moment, but is there any plan for Python 3.6+ support?

Per the README, the optional install of python3 and the Python 3.+ in the project requirements threw me off a bit. When running with 3.6.4, the tests throw a number of issues, starting with the utf8 decoding. I rolled back to the macOS default of 2.7.14 and was able to run the tests/server successfully.

(This could very well also be unrelated to this project's Python 3.6+ support and some weird python3 macOS nonsense.)

How to set up code-splitting?

Hi there!
I'm still quite a beginner, made a couple apps using your boilerplate, it is awesome!
Now the apps are getting bigger and I want to set up code splitting but can't get how to do it.

Could you please add an example here or to the repo?
Let's say I want to load Analytics component to be lazy loading, how could I do that?

Thank you!

Register Error: undefined undefined

I tried to register an existing email but the error is

Register Error: undefined undefined

The error should be

User with that email already exists

python-dev required info in README

should be mentioned that python-dev is required

1050, "Table 'user' already exists"

I believe python manage.py create_db creates "user" table, and the following command fails:

sqlalchemy.exc.OperationalError: (_mysql_exceptions.OperationalError) (1050, "Table 'user' already exists") [SQL: '\nCREATE TABLE user (\n\tid INTEGER NOT NULL AUTO_INCREMENT, \n\temail VARCHAR(255), \n\tpassword VARCHAR(255), \n\tPRIMARY KEY (id), \n\tUNIQUE (email)\n)\n\n']

So I had to manually drop table user, to follow the instruction.

Invalid Salt

Running this on windows and I've had a few issues with dependencies I have gotten around.

But whenever I create a new user, logout, and then try to log back in I get the same error.

with the get_user_with_email_and_password function it throws an error Invalid salt.

ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginHub' in /home/chris/Projects/Web/tailpos/static/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 23:2-37

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventConstants' in /home/chris/Projects/Web/tailpos/static/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 22:21-56

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginUtils' in /home/chris/Projects/Web/tailpos/static/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 23:23-60

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPropagators' in /home/chris/Projects/Web/tailpos/static/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 24:23-60

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/SyntheticUIEvent' in /home/chris/Projects/Web/tailpos/static/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 25:23-60

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/ViewportMetrics' in /home/chris/Projects/Web/tailpos/static/node_modules/react-tap-event-plugin/src
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 27:22-58

Maybe this is related? mui/material-ui#5573

Heroku building /dist

I don't think the javascript is getting built when deploying to Heroku. Is there a special build pack that you are using? I've had issues when the package.json file isn't in the root directory.

When I deploy the app, I get 404s for several static files when I navigate to the home page.