Flask Web Application + Rasberry Pi Tutorial

Follow along with the source code:

If you want to use the same files as shown in this tutorial you can download them here. If you have any issues or questions throughout the setup please comment below. This tutorial is targeted for a beginner Raspberry Pi user.

0. Make sure your Raspberry Pi has been updated


 

1. Installing Flask

 pip install –upgrade pip

2. Creating Flask App Application Folder + Subdirectories

Assuming that you are in your /home/pi/ directory.

 

3. Init Script FlaskApp/app/__init__.py

 

4. Creating the app/views.py file
nano views.py

Copy and paste this into your views.py file

 

5. Creating and starting the server with run.py

Copy and paste this into your run.py file

Exit the nano editor and run

 

6. Creating your First Template

Copy and Paste this into index.html, it will be your home page

 

7. Using index.html with the FlaskApp/app/views.py file

In the app folder, create a views.py file.

Copy and paste this into your views.py file.

 

This is what you should have so far: Screen Shot 2015-06-03 at 12.14.39 PM

 

 

8. Running the application

We can now test our application with the files created above. Head to the FlaskApp folder and run:

You should then see this:

Screen Shot 2015-06-03 at 12.30.24 PM

Now head to http://192.168.0.13:5000/ in a web browser to see our progress.

9. Adding a app/templates/layout.html file

 

10. Changing our index.html file

This will inherit the layout.html file so we do not have to change it constantly for updating things such as the navigation. This is what my index.html file now looks like:

 

11. Add another HTML template page

I am going to create an ‘About’ page. Head to the template folder and create an about.html file.

12. Updating our views.py file

Head to the FlaskApp/app/views.py file and update it to this:

This allows us to render the about page when it is selected in a web browser.

 

13. Adding some styling

Create three folders in FlaskApp/app/static/ for our styling files

Copying this into our stylesheet…

Try running the Flask Application server again (http://192.168.0.13) to see what changes have been made. Use this to run start the server:

You should be able to see this:

Screen Shot 2015-06-03 at 1.38.09 PM

Be sure to post any comments or questions below!



4 Responses

  1. Rob says:

    Hi there,

    Thanks for the great post – helped me set up a Flask App in zero seconds flat. Just wondering if you could recommend a tutorial on the next steps of setting up something useful? Like instead of blog posts, maybe setting up some way of running back-end scripts etc. through a web page using Flask?

    Cheers,
    Rob

    • Michael says:

      Thanks! I am currently working on an application to run some back end scripts. Once I have mine working I will upload a new tutorial. Mine is a SoundCloud downloading application – not sure what I’ll do for the tutorial yet though. If you have any ideas let me know.

  2. nk says:

    You are a good good man Michael! an up to date…COLOURFUL..easy to read blog post. Big wow and bigger Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *