Giter VIP home page Giter VIP logo

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

screenshot

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

  1. start MySQL from the System Preferences
  2. open MySQL Workbench and create a database called mydatabase but don't create the tables since python will do that for you
  3. 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

  1. 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.

  1. open a new tab to the same directory and run the front end
$ cd static
$ npm install
$ npm start
  1. open your browser to http://localhost:3000/register and setup your first account
  2. enjoy! By this point, you should be able to create an account and login without errors.

react-redux-flask's People

Contributors

viatsko avatar dternyak avatar headwinds avatar ccfiel avatar daialandai avatar zamoshchin avatar imecimore avatar joostsijm avatar mfpierre avatar vincentjr avatar rajasagashe avatar

Watchers

James Cloos avatar Ankit avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.