alexkuz / flask-react-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

368.0 17.0 59.0 811 KB

License: MIT License

Python 15.37% JavaScript 81.31% Smarty 3.32%

flask-react-boilerplate's Introduction

Flask React Boilerplate

Production-ready, one-click deployable boilerplate for React, Webpack, Flask and PostgreSQL.

One-click production deployment

This is what you will get:

https://flask-react-boilerplate.herokuapp.com/

Local installation

You'll neel a little more than one click.

Prerequisites:

Pip (https://pip.pypa.io/en/latest/installing.html)
PostgreSQL (http://www.postgresql.org/download/)
NPM (https://docs.npmjs.com/getting-started/installing-node)

Clone repository:

git clone https://github.com/alexkuz/flask-react-boilerplate.git

cd react-webpack-boilerplate

Install npm dependencies:

npm install

Setup python environment and install dependencies:

virtualenv venv

source venv/bin/activate     # or venv/bin/activate.fish or whatever

pip install -r requirements.txt

Copy .env.example config file to .env:

cp .env.example .env

Start PostgreSQL service if needed:

pg_ctl -D /usr/local/var/postgres -l /usr/local/var/postgres/server.log start

Create database tables:

heroku local initdb

Finally, start local server:

heroku local web

open http://localhost:3001

What do we have here?

A basket of kittens 🐱
Simple Flask API, powered with Flask-RESTful, SQLAlchemy and PostgreSQL
UI, powered with React, Babel, Webpack and React Transform HMR

License

This boilerplate is based on React Webpack Boilerplate: MIT © Søren Brokær

flask-react-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

gaearon catalinmiron sellds4 brennv patrickxie yijxiang ripitrust ligulfzhou josephl digideskio mayblue9 dlxbcn elliotschi pagsamo amussey twubbles nitology mzrzvi adelosa vergili dfinzer anqfsh deeech gbsnaker daydreamerlee chungnt201 uwevil dszwcz chaitanyaphalak jshartshorn aarondack shanmugh alvincjin jazon33y tech2077 marattm donlaur monapasan mdmartinez vt100 alevitskyy ruxuan febritecno dataiken prestonprice57 arbitraguerd tuksik sumara523 eduna75 npokasub youttiao app-repositories deepaligpt000 aryanganotra07 technicalconsultant321 sorokinvld

flask-react-boilerplate's Issues

Boilerplate no longer working

Like others, I wasn't able to get this boilerplate working, either on heroku or on local install. I've cloned this repo and refactored to support React 16, Redux 4, Webpack 4, Python 2.7, Postgres 19 and Heroku.

Looks like the problems were due to a series of deprecated packages, but I've resolved them in my repo here. Thanks to @alexkuz for the original code! Hope this updated boilerplate helps

No such app on heroku?

Heroku | No such app

Missing index.html

Hey i was just looking through the code and cannot find the index.html file that is being rendered. Can you explain where it is.

Does t work anymore

Please choose a different buildpack or go to https://github.com/ddollar/heroku-buildpack-multi

and fork it to your own account.

This buildpack will cease to function at the stroke of midnight on January 1, 2017.

! Push rejected, failed to compile Multipack app.

! Push failed

Deprecations & Errors in initial `npm install`

Using commit 8e4c2e1 (Feb 2016): npm install gave several kinds of warnings/errors. Are these known? Will they be fixed? Are they important? Thanks!

npm WARN deprecated [email protected]: Babel's CLI commands have been moved from the babel package to the babel-cli package
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: ReDoS vulnerability parsing Set-Cookie https://nodesecurity.io/advisories/130
npm WARN prefer global [email protected] should be installed with -g

And also...

WARNING in bundle.5dde88166bbba175a25c.min.js from UglifyJs
Condition always true [./~/react/lib/ReactMount.js:764,0]
Condition always true [./~/react/lib/findDOMNode.js:46,0]
Condition always true [./~/react/lib/instantiateReactComponent.js:80,0]
Dropping unreachable code [./~/react/lib/shouldUpdateReactComponent.js:40,0]
Condition always true [./~/react/lib/traverseAllChildren.js:158,0]
Side effects in initialization of unused variable REQUEST_KITTENS [./client/actionTypes/kittens.js:1,13]
Side effects in initialization of unused variable REQUEST_KITTENS_SUCCESS [./client/actionTypes/kittens.js:2,13]
Side effects in initialization of unused variable REQUEST_KITTENS_ERROR [./client/actionTypes/kittens.js:3,13]
Side effects in initialization of unused variable ADD_KITTEN [./client/actionTypes/kittens.js:5,13]
Side effects in initialization of unused variable ADD_KITTEN_SUCCESS [./client/actionTypes/kittens.js:6,13]
Side effects in initialization of unused variable ADD_KITTEN_ERROR [./client/actionTypes/kittens.js:7,13]
Side effects in initialization of unused variable DELETE_KITTEN [./client/actionTypes/kittens.js:9,13]
Side effects in initialization of unused variable DELETE_KITTEN_SUCCESS [./client/actionTypes/kittens.js:10,13]
Side effects in initialization of unused variable DELETE_KITTEN_ERROR [./client/actionTypes/kittens.js:11,13]
Side effects in initialization of unused variable invokeReturn [./~/babel-regenerator-runtime/runtime.js:167,0]
Side effects in initialization of unused variable invokeReturn [./~/babel-runtime/regenerator/runtime.js:190,0]
Condition always false [./~/babel-runtime/regenerator/runtime.js:46,0]
Condition always true [./~/react/lib/ReactDOMComponent.js:907,0]
Dropping side-effect-free statement [./~/react/lib/ReactEventListener.js:72,0]
Dropping unused function handleTopLevelWithPath [./~/react/lib/ReactEventListener.js:98,0]
Dropping unused variable DOCUMENT_FRAGMENT_NODE_TYPE [./~/react/lib/ReactEventListener.js:26,0]

Is this missing envifying process.env.NODE_ENV in production mode?

React uses process.env.NODE_ENV to switch into production mode, but it seems that env variables don't include it.

Maybe it makes sense to change __CURRENT_ENV__ to be called NODE_ENV? Or else NODE_ENV to alias it.

Can this be edited to render reactjs components on the server side ?

Hi good day!

Great work on this boiler plate!

I was checking through the code, and I was wondering how can this boiler plate be changed such that the reactjs components can be generated on the server side ?

Just a noob in reactjs, so asking for ideas.

Best Regards

React Transform HMR declared itself deprecated

as README says at React Transform HMR github

This Project Is Deprecated

any plans for to update dependency of this boilerplate to anything fresh/modern?

npm install error

Hi, this might be an issue with some libraries having been deprecated, but I'm getting an issue with the npm install step. I cloned the repo, cd into it, and running npm install produces the following error:

[email protected] dist /Users/alaneng/Documents/code/alaneng.github.io/flask-react-boilerplate
NODE_ENV=production webpack -p
ModuleBuildError: Module build failed: RangeError: /Users/alaneng/Documents/code/alaneng.github.io/flask-react-boilerplate/node_modules/eslint-loader/index.js!/Users/alaneng/Documents/code/alaneng.github.io/flask-react-boilerplate/client/flux/kittens.js: Maximum call stack size exceeded
at hasOwnProperty (native)
at Function.Def.fromValue (/Users/alaneng/Documents/code/alaneng.github.io/flask-react-boilerplate/node_modules/babel-core/node_modules/regenerator/node_modules/recast/node_modules/ast-types/lib/types.js:305:20)

It says to indicate this failed on my system:
NODE_ENV=production webpack -p

Here's the npm-debug.log:
npm-debug.txt

Thanks!!

Build Issues

FYI I have not been able to get this to deploy, either locally or on Heroku

Here is the error log from Heroku but I get a simmilar error locally.

make: Entering directory /tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack-dev-server/node_modules/socket.io/node_modules/engine.io/node_modules/ws/node_modules/bufferutil/build' CXX(target) Release/obj.target/bufferutil/src/bufferutil.o SOLINK_MODULE(target) Release/obj.target/bufferutil.node SOLINK_MODULE(target) Release/obj.target/bufferutil.node: Finished COPY Release/bufferutil.node make: Leaving directory/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack-dev-server/node_modules/socket.io/node_modules/engine.io/node_modules/ws/node_modules/bufferutil/build'

   > [email protected] install /tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack-dev-server/node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws/node_modules/utf-8-validate
   > node-gyp rebuild

   make: Entering directory `/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack-dev-server/node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws/node_modules/utf-8-validate/build'
   CXX(target) Release/obj.target/validation/src/validation.o
   SOLINK_MODULE(target) Release/obj.target/validation.node
   SOLINK_MODULE(target) Release/obj.target/validation.node: Finished
   COPY Release/validation.node
   make: Leaving directory `/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack-dev-server/node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws/node_modules/utf-8-validate/build'

   > [email protected] install /tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack-dev-server/node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws/node_modules/bufferutil
   > node-gyp rebuild

   make: Entering directory `/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack-dev-server/node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws/node_modules/bufferutil/build'
   CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
   SOLINK_MODULE(target) Release/obj.target/bufferutil.node
   SOLINK_MODULE(target) Release/obj.target/bufferutil.node: Finished
   COPY Release/bufferutil.node
   make: Leaving directory `/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack-dev-server/node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws/node_modules/bufferutil/build'

   > [email protected] install /tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/jest-cli/node_modules/jsdom/node_modules/contextify
   > node-gyp rebuild

   make: Entering directory `/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/jest-cli/node_modules/jsdom/node_modules/contextify/build'
   CXX(target) Release/obj.target/contextify/src/contextify.o
   SOLINK_MODULE(target) Release/obj.target/contextify.node
   SOLINK_MODULE(target) Release/obj.target/contextify.node: Finished
   COPY Release/contextify.node
   make: Leaving directory `/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/jest-cli/node_modules/jsdom/node_modules/contextify/build'

   > [email protected] postinstall /tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74
   > npm run dist


   > [email protected] dist /tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74
   > NODE_ENV=production webpack -p

   ModuleBuildError: Module build failed: /tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/eslint-loader/index.js!/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/client/flux/kittens.js: Maximum call stack size exceeded
   at DependenciesBlock.onModuleBuildFailed (/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
   at nextLoader (/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
   at /tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
   at runSyncOrAsync (/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:173:4)
   at nextLoader (/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
   at /tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
   at context.callback (/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
   at lint (/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/eslint-loader/index.js:64:5)
   at Object.module.exports (/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/eslint-loader/index.js:97:7)
   at WEBPACK_CORE_LOADER_EXECUTION (/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:155:71)
   at runSyncOrAsync (/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:155:93)
   at nextLoader (/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3)
   at /tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
   at Storage.finished (/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
   at evalmachine.<anonymous>:272:14
   at /tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:102:5

   npm ERR! Linux 3.13.0-66-generic
   npm ERR! argv "node" "/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/.heroku/node/bin/npm" "run" "dist"
   npm ERR! node v0.10.40
   npm ERR! npm  v2.10.1
   npm ERR! code ELIFECYCLE
   npm ERR! [email protected] dist: `NODE_ENV=production webpack -p`
   npm ERR! Exit status 1
   npm ERR!
   npm ERR! Failed at the [email protected] dist script 'NODE_ENV=production webpack -p'.
   npm ERR! This is most likely a problem with the flask-react-boilerplate package,
   npm ERR! not with npm itself.
   npm ERR! Tell the author that this fails on your system:
   npm ERR!     NODE_ENV=production webpack -p
   npm ERR! You can get their info via:
   npm ERR!     npm owner ls flask-react-boilerplate
   npm ERR! There is likely additional logging output above.

   npm ERR! Please include the following file with any support request:
   npm ERR!     /tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/npm-debug.log

   npm ERR! Linux 3.13.0-66-generic
   npm ERR! argv "node" "/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/.heroku/node/bin/npm" "install" "--unsafe-perm" "--userconfig" "/tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/.npmrc"
   npm ERR! node v0.10.40
   npm ERR! npm  v2.10.1
   npm ERR! code ELIFECYCLE
   npm ERR! [email protected] postinstall: `npm run dist`
   npm ERR! Exit status 1
   npm ERR!
   npm ERR! Failed at the [email protected] postinstall script 'npm run dist'.
   npm ERR! This is most likely a problem with the flask-react-boilerplate package,
   npm ERR! not with npm itself.
   npm ERR! Tell the author that this fails on your system:
   npm ERR!     npm run dist
   npm ERR! You can get their info via:
   npm ERR!     npm owner ls flask-react-boilerplate
   npm ERR! There is likely additional logging output above.

   npm ERR! Please include the following file with any support request:
   npm ERR!     /tmp/build_c9226506c198be2d94b78c69bb8bc03e/alexkuz-flask-react-boilerplate-7d2cc74/npm-debug.log

-----> Build failed

   We're sorry this build is failing! You can troubleshoot common issues here:
   https://devcenter.heroku.com/articles/troubleshooting-node-deploys

   If you're stuck, please submit a ticket so we can help:
   https://help.heroku.com/

   Love,
   Heroku

! Push rejected, failed to compile Multipack app

Recommend Projects

React

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

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.