{"id":565,"date":"2019-05-17T06:13:22","date_gmt":"2019-05-17T06:13:22","guid":{"rendered":"https:\/\/www.triptera.com.au\/wordpress\/?p=565"},"modified":"2019-05-17T06:17:27","modified_gmt":"2019-05-17T06:17:27","slug":"flask-hello-world-in-pycharm-edu","status":"publish","type":"post","link":"https:\/\/www.triptera.com.au\/wordpress\/2019\/05\/17\/flask-hello-world-in-pycharm-edu\/","title":{"rendered":"Flask “Hello World!” in PyCharm Edu"},"content":{"rendered":"\n

On their website, Flask provide a simple “Hello World!” demo<\/a> that you can run from the command line. I have written this post to show how the same thing can be achieved using PyCharm Edu. It is more steps, but once it is set up, the web application can be run by a menu item or keystroke in PyCharm Edu without ever having to use the terminal. Jetbrains recommend PyCharm Professional for Flask development work but with this technique all you need is one of the free IDEs PyCharm Edu or PyCharm Community. <\/p>\n\n\n\n

TL;DR (too long; didn’t read)<\/h2>\n\n\n\n

If you are already familiar with PyCharm Edu, the steps are essentially:<\/p>\n\n\n\n

  1. Create a new python project with a virtual environment, and “Flask” in your requirements.txt file.<\/li>
  2. Create a new Python file hello.py as per the Flask demo<\/a>.<\/li>
  3. If you are using PyCharm Edu you will need to enable the “Run” menu.<\/li>
  4. Create and run a new “Python” run configuration:
    1. Name: flask run hello<\/li>
    2. Module (not Script): flask<\/li>
    3. Parameters: run<\/li>
    4. Environment variables: PYTHONUBUFFERED=1;FLASK_APP=hello.py;FLASK_ENV=development<\/li><\/ol><\/li><\/ol>\n\n\n\n

      Detailed instructions with pictures<\/h2>\n\n\n\n

      These screen shots have been taken from PyCharm Edu 2019.1 using Python 3.7.3 on Windows 10 Pro.<\/p>\n\n\n\n

      \"\"
      Create a new project in PyCharm Edu<\/figcaption><\/figure>\n\n\n\n
      \"\"
      Name your project “hello-flask”. This will also create a new virtual environment.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      Click on “hello-flask” to select the project folder. Then click on > next to “hello-flask” to expand the folder and show the contents. Depending on where you are saving your virtual environments you may or may not see “venv”.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      Now that the project folder is selected, you can select “New…” from the “File” menu to create a new file in the project folder.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      A floating menu will appear asking you the type of file. We are creating a text file so choose “File” which can be used for any file type.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      Name the file requirements.txt and click “OK”.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      In the requirements.txt type the word “Flask”. This replaces the step “pip install Flask” from the command line demo. After you have typed in “Flask” click on the recommendation to “Install requirement”. The recommendation may not come straight away so continue on to the next steps and it should appear before you get to running the web application.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      To create a new Python file, right click on the project folder and select New > Python File.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      Because PyCharm knows it is going to be a Python file, we don’t need to type in .py on the end. Just type in the name “hello” and click “OK”.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      In hello.py, type in the code from the Flask “Hello World!” demo<\/a>. The file will get saved automatically.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      If you are using PyCharm Community Edition you can skip the next three steps which are only required to enable some menus which are hidden in PyCharm Edu but visible in PyCharm Community Edition. Click on “Settings…” in the “File” menu. On Mac this menu is called “Preferences”.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      The main menu is missing some menus so:
      1. Expand “Appearance and Behaviour”
      2. Select “Menus and Toolbars”
      3. Expand “Main menu”
      4. Select “Code” menu so we can add new menus after it
      5. Click on “+” to add extra menus
      6. Click “Add Action…”<\/figcaption><\/figure>\n\n\n\n
      \"\"
      Select all menus between “Refactor” and “Window” and click on “OK”.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      The menus are now included so click “OK”<\/figcaption><\/figure>\n\n\n\n
      \"\"
      To run a flask app we need to create a “run configuration”. Select “Edit configurations…” from the “Run” menu.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      Click “+” to add a new configuration and select “Python”.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      1. Name your configuration “flask run hello” or something else if you prefer.
      2. Change label from “Script path:” to “Module name:”
      3. Type “flask” as the module name
      4. Type “run” as the parameter
      5. Configure environment variables by clicking box. (See next screenshot)
      6. After setting environment variables (next screenshot), click “OK”<\/figcaption><\/figure>\n\n\n\n
      \"\"
      1. “+” to add a new environment variable
      2. Name it “FLASK_APP”
      3. Give it value “hello.py”
      4. “+” to add another environment variable
      5. Name it “FLASK_ENV”
      6. Give it value “development”
      7. Click “OK” to return to previous dialog box and click “OK” again.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      Now you can run the builtin web application server by selecting “Run ‘flask run hello'” from the Run menu. If the first item does not say ‘flask run hello’ then choose “Run…” (third item in menu) and select ‘flask run hello’ from the popup menu.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      A run status pane will open at the bottom of the screen. You can click on the URL to see the outpu of your web application in a web browser. Click the red square to stop your application.<\/figcaption><\/figure>\n\n\n\n
      \"\"
      This is what your web browser should show you. Yay!!! \ud83d\ude42<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

      On their website, Flask provide a simple “Hello World!” demo that you can run from the command line. I have written this post to show how the same thing can be achieved using PyCharm Edu. It is more steps, but once it is set up, the web application can be run by a menu item […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-565","post","type-post","status-publish","format-standard","hentry","category-playing"],"_links":{"self":[{"href":"https:\/\/www.triptera.com.au\/wordpress\/wp-json\/wp\/v2\/posts\/565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.triptera.com.au\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.triptera.com.au\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.triptera.com.au\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.triptera.com.au\/wordpress\/wp-json\/wp\/v2\/comments?post=565"}],"version-history":[{"count":3,"href":"https:\/\/www.triptera.com.au\/wordpress\/wp-json\/wp\/v2\/posts\/565\/revisions"}],"predecessor-version":[{"id":590,"href":"https:\/\/www.triptera.com.au\/wordpress\/wp-json\/wp\/v2\/posts\/565\/revisions\/590"}],"wp:attachment":[{"href":"https:\/\/www.triptera.com.au\/wordpress\/wp-json\/wp\/v2\/media?parent=565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.triptera.com.au\/wordpress\/wp-json\/wp\/v2\/categories?post=565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.triptera.com.au\/wordpress\/wp-json\/wp\/v2\/tags?post=565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}