Full Stack Web App Initialization

[brio50]

Actions

• [x] Using https://github.com/Eyongkevin/hello_template/tree/master as a template, locally serve a hello world application using Python3, Flask, Bootstrap, and React.

• [x] Learn about the node.js javascript framework, npm javascript package manager, and webpack.

• [x] publish to github pages https://divisor.onrender.com/

[brio50]

Flask Notes

• https://flask.palletsprojects.com/en/2.3.x/patterns/packages/
  • Divisor will use the simple application structure, the flask module pattern, as opposed to the flask package pattern

[brio50]

Deploy Notes

I couldn't figure out how to launch a web-server to github pages. I found a free service at render.com, and leveraged gunicorn to deploy the site for now; see https://divisor.onrender.com/ for the final result! I leveraged Flask's Gunicorn documentation and this testdriven.io tutorial with the following settings for my render.com web service:

1. Environment Variables > Key: PYTHON_VERSION > Value: 3.10.2
2. Settings > Build Command: pip install -r requirements.txt && npm install && npm run build
3. Settings > Start Command: gunicorn -w 4 -b 0.0.0.0 'divisor:create_app()'

I also played with the Dockerfile on my desktop, but had issues at docker run. The thought was that I could create a Docker image and have render.com host this application. The latter solution was much easier.

FROM nikolaik/python-nodejs:latest

# set work directory early so remaining paths can be relative
WORKDIR /app

# adding requirements file to current directory
COPY requirements.txt .

# install dependencies
RUN pip install -r requirements.txt

# copy code itself from context to image
COPY . .

# build bundle.js
RUN npm run build

# run server
EXPOSE 80
CMD gunicorn --bind 0.0.0.0:80 --timeout 120 --access-logfile - "divisor:create_app()"

docker build -t flask/divisor .
docker run -dp 80:80 -w //c/Users/brio/PycharmProjects/divisor/app -v "C:\Users\brio\PycharmProjects\divisor:/create_app" divisor sh -c "flask run --host 0.0.0.0:80"