30 | flaskproject 31 | ├── .gitignore - shows which files (like .pyc) for git to ignore. 32 | ├── Procfile - Ignore. Used for deployment. 33 | ├── app.py - This is the main file for our app. 34 | ├── model.py - This is where we will write the logic of our app. 35 | ├── readme.md - That's this file! 36 | ├── requirements.txt - Used for deployment to say what packages are needed. 37 | ├── runtime.txt - Ignore. Used for deployment. 38 | ├── static - This is where we house assets like images and stylesheets. 39 | │ ├── css - Put stylesheets here. 40 | │ │ └── style.css 41 | │ └── images - Put images here. 42 | │ └── micropig.jpg 43 | └── templates - Put templates (views) in this folder. 44 | └── index.html - This will be the first template we render. 45 |46 | 47 | If you want a more detailed explanation, keep reading. 48 | 49 | ### Files you WILL need to know about / focus on: 50 | 51 | #### The `app.py` 52 | 53 | This is the most important part of your Flask application - it's the code that tells your application how to respond to the requests your users make when they visit your page, and it's really the main thing separating our web application from a standard website. For example, with a webSITE, if we went to `petespizza.com/myaccount`, it would display the same information for every user. With a webAPP, we can make sure `petespizza.com/myaccount` is unique to each user by coding out some behavior in our `app.py`. 54 | 55 | #### The `model.py` 56 | 57 | The `app.py` is really just meant to be air-traffic control for our web application's visitors - the complex logic should live here in `model.py`. 58 | 59 | #### The `templates` folder 60 | 61 | We're upgrading from HTML pages to HTML templates - the big difference here is that templates can be injected with Python to generate new content. Instead of needing to code out 100 `myaccount` for 100 users, you can code just 1 page, and use template logic to provide each user with a customized experience. 62 | 63 | #### The `static` folder 64 | 65 | Images and CSS files are generally items we want our user to be able to access easily and directly - that doesn't need to come through the application. The `static` folder is also sometimes called the "public" folder for that exact reason. This template uses it for images and for CSS, which are two of the most common things you'll encounter in a web application's public folder no matter what language the app itself is written in. 66 | 67 | ### Files you can ignore for now 68 | 69 | We won't use these files - they're just here to make the application play nicely with Replit and/or Heroku. 70 | 71 | #### `.replit` 72 | 73 | This file only has two lines of code in it, and may even be hidden once you open the code in Replit. This is just a set of instructions to set up the big green "> RUN" button at the top of a Repl. 74 | 75 | ``` 76 | language = "bash" 77 | run = "python3 replitwrapper.py" 78 | ``` 79 | 80 | The first line tells Replit to create a bash repl, which allows us to use bash commands to control our application. This is the same environment and language you'd see if you just opened up the terminal on your Mac or Linux computer. The second line is the script that will be executed when "RUN" is pressed. We set up the run button to activate a file called "replitwrapper" which is where our Flask app starts (at least while it's in development). 81 | 82 | #### `.flaskenv` 83 | 84 | This only includes one line of code: `FLASK_DEBUG=1` 85 | 86 | This tells Flask to restart the application every time you save changes. Since Replit autosaves, this should mean that most changes you make should go live instantly. 87 | 88 | #### `.gitignore` 89 | 90 | This tells Replit which files don't need to be included when you save your changes to GitHub. It's already set up pretty well, so we probably won't use it at all. 91 | 92 | #### `Procfile` 93 | 94 | This also includes only one line of code: `web: gunicorn app:app` 95 | You can't deploy a Flask application live without a wraparound tool like [Green Unicorn](https://gunicorn.org/) - how and why it works is beyond the scope of this course, but your deployment wouldn't work without it. 96 | 97 | #### `replitwrapper.py` 98 | 99 | Replit needs a package called "web" to run our web apps. But Heroku doesn't know what "web" is, and can't use it. So ONE of our platforms MUST have this, but the other CAN'T have it. The solution we found was to create two different entry points into our application. The `replitwrapper.py` is where Replit enters our application, and uses the necessary package, and then loads in the app from `app.py`. 100 | 101 | Heroku will enter our app directly from `app.py` - problem solved! 102 | 103 | #### `runtime.txt` 104 | 105 | This specifies the version of Python we'll use in deployment with Heroku. Most of the curriculum has been tested and runs correctly in the version listed in this file, but if you notice that your app is failing on Heroku but working on Replit, you may want to make sure these versions match by typing `python3 --version` in the Replit console, and then updating this file to the version that Replit is currently using. -------------------------------------------------------------------------------- /replitwrapper.py: -------------------------------------------------------------------------------- 1 | from replit import web 2 | from app import app 3 | 4 | web.run(app) 5 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | Flask==2.0.2 2 | gunicorn==20.1.0 3 | -------------------------------------------------------------------------------- /runtime.txt: -------------------------------------------------------------------------------- 1 | python-3.7.11 2 | -------------------------------------------------------------------------------- /static/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/upperlinecode/flaskproject/be1e666c8a0531442981384634b19fe11b8240c3/static/css/style.css -------------------------------------------------------------------------------- /static/images/micropig.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/upperlinecode/flaskproject/be1e666c8a0531442981384634b19fe11b8240c3/static/images/micropig.jpg -------------------------------------------------------------------------------- /templates/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
We can build a full webpage here
9 | 13 | 14 | 15 | --------------------------------------------------------------------------------