All Projects → blackfry → cra-flask

blackfry / cra-flask

Licence: MIT license
Unejected create-react-app ui, flask api with token authentication

Programming Languages

python
139335 projects - #7 most used programming language
HTML
75241 projects
CSS
56736 projects
Mako
254 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to cra-flask

Express React Boilerplate
Express, MySQL, React/Redux, NodeJs Application Boilerplate
Stars: ✭ 179 (+795%)
Mutual labels:  react-router, material-ui
React Cnodejs.org
Material UI version of cnodejs.org, the biggest Node.js Chinese community.
Stars: ✭ 242 (+1110%)
Mutual labels:  react-router, material-ui
Wanna
💡✔ Wanna is an implementation of a 21st-century to-do list app.
Stars: ✭ 189 (+845%)
Mutual labels:  react-router, material-ui
Redux React Session
🔑 Simple Session API storage for Redux and React
Stars: ✭ 140 (+600%)
Mutual labels:  react-router, react-router-v4
Frontend
마음을 잇는 현명한 소비 '잇다'🤝
Stars: ✭ 19 (-5%)
Mutual labels:  react-router, material-ui
V2 Universal Js Hmr Ssr React Redux
⚡ (V2) Universal JS - Server Side Rendering, Code Splitting and Hot Module Reloading ⚡
Stars: ✭ 147 (+635%)
Mutual labels:  react-router, react-router-v4
React Sight
Visualization tool for React, with support for Fiber, Router (v4), and Redux
Stars: ✭ 2,716 (+13480%)
Mutual labels:  react-router, react-router-v4
Road Beyond React App
🌈 The Road beyond React - Thing you can use after learning plain React.js
Stars: ✭ 108 (+440%)
Mutual labels:  react-router, react-router-v4
rgxp
Regular Expression Collection (ReactJS, Redux, React Router, Recompose, NodeJS, Express)
Stars: ✭ 62 (+210%)
Mutual labels:  react-router, react-router-v4
Tips-in-React
在 React 开发实际项目过程的使用心得
Stars: ✭ 15 (-25%)
Mutual labels:  react-router, react-router-v4
React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (+535%)
Mutual labels:  react-router, react-router-v4
material-ui-Link-within-MenuItem
Example for how to use `react-router/Link` within `material-ui/MenuItem`
Stars: ✭ 19 (-5%)
Mutual labels:  react-router, material-ui
Favesound Redux
🎶 A SoundCloud Client in React + Redux running in production. Live Demo and Source Code to explore React + Redux as a beginner.
Stars: ✭ 1,586 (+7830%)
Mutual labels:  react-router, react-router-v4
Online Shop
Online shop prototype implemented in React.
Stars: ✭ 168 (+740%)
Mutual labels:  react-router, material-ui
Universal React Redux
🧐 A sensible universal starter kit for React + Redux
Stars: ✭ 112 (+460%)
Mutual labels:  react-router, react-router-v4
React Live Route
📌 An enhanced react-router-v4/5 Route that keeps route alive.
Stars: ✭ 207 (+935%)
Mutual labels:  react-router, react-router-v4
React Bootstrap Webpack Starter
ReactJS 16.4 + new React Context API +react Router 4 + webpack 4 + babel 7+ hot Reload + Bootstrap 4 + styled-components
Stars: ✭ 103 (+415%)
Mutual labels:  react-router, react-router-v4
React Login
A client side implementation of authentication using react.js for my blog on medium. This is the second part of my previous blog on how to implement scalable node.js server.
Stars: ✭ 105 (+425%)
Mutual labels:  react-router, jwt-token
workshop
React Workshop
Stars: ✭ 13 (-35%)
Mutual labels:  react-router, react-router-v4
keep-graph
Keep Graph is a open source clone of Google Keep. It's built on top of React and GraphQL.
Stars: ✭ 29 (+45%)
Mutual labels:  react-router, material-ui

cra-flask

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

A Create-React-App conversion of React-Redux-Flask

  • Python 2.7+ or 3.x
  • Pytest
  • Heroku
  • Flask
  • React
  • Redux
  • React-Router v4
  • React-Router-Redux
  • SCSS processing
  • Create-React-App

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](http://flask-sqlalchemy.pocoo.org/2.1/config/)

$ 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

Run Back-End

$ python manage.py runserver

Test Back-End

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

Install Front-End Requirements

$ cd react-ui
$ yarn install

Run Front-End

$ cd react-ui
$ yarn start

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 react-ui
$ yarn install
$ yarn 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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].