.. _Step 6.3: ******************************************************************* Step 3: The Development process ******************************************************************* .. include:: urls.rst .. include:: /includes/prolog.inc **The goal for Step 3**: Learn how to develop your Flask project in a Docker environment .. contents:: Table of Contents 3.1. The Development Process ------------------------------------------------------------------ We want to maintain the separation between the code and platform by using volumes. .. Caution:: * **Important!** Do not need to enter the running container to change your code files. * Change all code files in your volume directory: ``~/flask-quotes/quotes-app`` #. Run your container *in your foreground* (without ``-d``) so that you can see the error message. .. code-block:: bash # First, stop any running containers docker-compose down # Then, start the container running the foreground docker-compose up #. A page that shows ``502 Bad Gateway`` indicates that your Python code contains syntax errors and that your container crashed. #. The container might exit when an error is encountered. Fix the error and then restart the container. In short, the running container works as your compiler. .. code-block:: python SyntaxError: EOL while scanning string literal File "./server.py", line 8 welcome = welcome + "This site is a demo using Flask in Docker 3.2. Video of the Development Process ------------------------------------------------------------------ Watch this video that demonstrates the process. |dev-process-video| .. |dev-process-video| raw:: html
3.3. Give it a try! ------------------------------------------------------------------ #. Run your container *in your foreground* .. code-block:: bash # First, stop any running containers docker-compose down # Then, start the container running the foreground docker-compose up .. code-block:: bash :caption: Expected output :emphasize-lines: 1,3,12 sysadmin@test2:~/flask-quotes$ docker-compose up Starting flaskquotes_flask_1 ... Starting flaskquotes_flask_1 ... done Attaching to flaskquotes_flask_1 flask_1 | * Serving Flask app 'index' (lazy loading) flask_1 | * Environment: production flask_1 | WARNING: This is a development server. Do not use it in a production deployment. flask_1 | Use a production WSGI server instead. flask_1 | * Debug mode: on flask_1 | * Running on all addresses. flask_1 | WARNING: This is a development server. Do not use it in a production deployment. flask_1 | * Running on http://172.25.0.2:5000/ (Press CTRL+C to quit) flask_1 | * Restarting with stat flask_1 | * Debugger is active! flask_1 | * Debugger PIN: 140-043-652 #. Change the ``hello world`` message, to something like: .. code-block:: python hello = "Welcome to the quote of the day!\n" #. Save the file and verify that changes were detected. .. code-block:: bash :emphasize-lines: 16,18 sysadmin@test2:~/flask-quotes$ docker-compose up Starting flaskquotes_flask_1 ... Starting flaskquotes_flask_1 ... done Attaching to flaskquotes_flask_1 flask_1 | * Serving Flask app 'index' (lazy loading) flask_1 | * Environment: production flask_1 | WARNING: This is a development server. Do not use it in a production deployment. flask_1 | Use a production WSGI server instead. flask_1 | * Debug mode: on flask_1 | * Running on all addresses. flask_1 | WARNING: This is a development server. Do not use it in a production deployment. flask_1 | * Running on http://172.25.0.2:5000/ (Press CTRL+C to quit) flask_1 | * Restarting with stat flask_1 | * Debugger is active! flask_1 | * Debugger PIN: 140-043-652 flask_1 | * Detected change in '/app/index.py', reloading flask_1 | * Restarting with stat flask_1 | * Debugger is active! flask_1 | * Debugger PIN: 140-043-652 #. Refresh the page in the web browser to verify that the new welcome message displays. .. image:: images/2022-05-19_flask-welcome-message.png 3.4. Debugging ------------------------------------------------------------------ What do you do if you have an error and the container exits? 🤔 Here is an example ``syntax error``. Notice that the debugger told you the file name and exactly what line the error occurred on. In this case, the text string was not closed. It was missing the closing ``"`` on line 9 of ``index.py``. .. Tip:: You can check your code online for compile errors to help you debug. * |pep8online.com| |br| Notice that this site also uses Flask!. * |online_python_formatter| |br| Validates he code and generate a compile error if problems are found. Fix the error, save the file, and then start the container again. .. code-block:: text :emphasize-lines: 20-26,28 sysadmin@test2:~/flask-quotes$ docker-compose up Starting flaskquotes_flask_1 ... Starting flaskquotes_flask_1 ... done Attaching to flaskquotes_flask_1 flask_1 | * Serving Flask app 'index' (lazy loading) flask_1 | * Environment: production flask_1 | WARNING: This is a development server. Do not use it in a production deployment. flask_1 | Use a production WSGI server instead. flask_1 | * Debug mode: on flask_1 | * Running on all addresses. flask_1 | WARNING: This is a development server. Do not use it in a production deployment. flask_1 | * Running on http://172.25.0.2:5000/ (Press CTRL+C to quit) flask_1 | * Restarting with stat flask_1 | * Debugger is active! flask_1 | * Debugger PIN: 140-043-652 flask_1 | * Detected change in '/app/index.py', reloading flask_1 | * Restarting with stat flask_1 | * Debugger is active! flask_1 | * Debugger PIN: 140-043-652 flask_1 | * Detected change in '/app/index.py', reloading flask_1 | * Restarting with stat flask_1 | File "/app/index.py", line 9 flask_1 | hello = "Welcome to the quote of the day!\n flask_1 | ^ flask_1 | SyntaxError: unterminated string literal (detected at line 9) flaskquotes_flask_1 exited with code 1 sysadmin@test2:~/flask-quotes$ sysadmin@test2:~/flask-quotes$ docker-compose up Starting flaskquotes_flask_1 ... Starting flaskquotes_flask_1 ... done Attaching to flaskquotes_flask_1 flask_1 | * Serving Flask app 'index' (lazy loading) . . .