This is a skeleton Flask-React webapp for my personal workspace. It can be used as a template for building your own webapp. Backend code can be written into ./flaskapp/
while React components can be added in ./static/src/
.
prerequisites:
python3
, git
, npm
, virtualenv
, pip
and some basic understanding of them.
To download the repository:
git clone https://github.com/zhengrui315/Mywebapp.git
or
git clone git@github.com:zhengrui315/Mywebapp.git
if ssh key has been set up on github.
To set up local environment:
virtualenv -p python3 venv
source venv/bin/activate
pip install -r requirements.txt
for backend and
npm install
for frontend.
To start the wepapp
If not in virtual environment, enter by source venv/bin/activate
, then
./run.sh
the webapp can be accessed at http://localhost:5001. The port number can be set in run.sh
.
To exit the virtual environment
deactivate
To run the webapp in docker containers, run
docker-compose up db
and then
docker-compose up npm flask
Three containers will be created. The webapp can be accessed at https://localhost:5001. If localhost doesn't work, try to replace the host with the ip of docker machine by docker-machine ip
.
Very likely the ip is 192.168.99.100
.
To get an interactive prompt for a container, say mysql container, do:
docker-compose exec -it mywebapp_mysql /bin/bash
and enter mysql by
mysql -u root -p
and enter the password root
as defined in docker-compose.yml
. The containers cannot be accessed from outside the docker network.
Routing has been set up in ./flaskapp/routes.py
so that all urls go into frontend, which will be handled in ./static/src/App.js
. More routing options can be accommodated by adding <Route />
accordingly.
Some basic configuration of webpack has been set in webpack.config.js
where the entry point is ./staic/src/index.js
. Webpack builds ./static/dist/index.js
which is injected into ./templates/index.html
.
To initialize the database, dump.sql
has been created and set up in docker-compose.yml
. This dump.sql
file can be created by mysqldump
command. We can also populate the database by creating a python script such as ./flaskapp/model/initialization.py
, which can be run by
python -m flaskapp.model.initialization
under root directory inside the flask container.