Full Stack App Boilerplate Code
Flask + React => Continous Deployment on Heroku
Table of Contents
Overview
Procfile -> Heroku's instructions on how to setup the app
runtime.txt -> Heroku's Python version to use
# the following 3 are needed at the root dir for Heroku to setup the Beta and Prod machines
app.json -> Information for the Heroku Deploy button
package.json -> Node dependencies: Webpack, Babel, React
requirements.txt -> Python dependencies: Flask
webpack.config.js -> Configuration of Webpack bundler
dummy_app
+---server
| server.py -> All Flask logic
|
+---static
| index.html
|
+---dist -> Files to distribute to client
| bundle.js -> Bundle of all js files to distribute
| icon.ico
| styles.css
|
+---js -> All React logic
App.jsx -> Main component
index.jsx -> Single entry point to the js bundle
Setup
Backend Dependencies
python -m venv .venv
pip install flask
pip freeze > requirements.txt
Frontend Dependencies
npm init
# ES6 + react
npm install --save react react-dom
npm install --save prop-types
# compiler
npm install --save babel-core
npm install --save babel-preset-latest
npm install --save babel-preset-react
# bundler
npm install --save webpack babel-loader
Configuration
Heroku Configuration
Specify how to setup Beta and Production machines: install node dependencies before running the server
web: npm install && npm run build && python dummy_app/server/server.py
Specify the node version to be installed on the Heroku machines and bundle the js[x] files after installing dependencies
# package.json
...,
"engines" : { "node" : "8.9.1" },
"scripts": {
"postinstall": "npm run build"
},
...
Babel-Webpack Configuration
Specify how to process each file before bundling with Webpack -> compile ES6 to ES5 using Babel
# webpack.config.js
...,
module : {
rules : [
{
test: /\.jsx?/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
},
...
Add scripts to bundle and watch for changes of static js[x] files
# package.json
...,
"scripts": {
"build": "webpack -p --progress --config webpack.config.js",
"dev-build": "webpack --progress -d --config webpack.config.js",
"watch": "webpack --progress -d --config webpack.config.js --watch",
},
...