Introduction
In this article I will teach you how to develop and deploy a web site, web page or web app, using Python as programming language, Flask as web framework and pythonanywhere.com as a deployment provider. I will guide you step by step since the process of organizing your code directory on your local machine, and then uploading the code to the python anywhere interface for further deployment, I will not teach you to write code my goal is help you to deploy your works projects to be accessible on internet. I'll suppose that you have a basic understanding of python programming as well as the flask framework.
I am not going to make the program but the article is basic on experience since I deployed my personal portfolio, so I will tell you all the true and the process is proven to work, for evidence you can check here, as well every section is supported with screenshots.
Before we can keep is important to know that deploying on python anywhere is free, but your site's URL will see like: username.pythonanywhere/project-name.com, if you want to add a custom domain you will have to upgrade for the premium plan, the second fact is that you can host only one web for free, if you want to host more than one web you will have to upgrade, and third once you deploy your web you will have to login at least one every three months, if you don't your web will be closed and for instance not accessible through internet. Now that you know this basic information go ahead with the first step.
Organize your project in the local machine
Lets begin with organizing the directories on the computer you are going to work. For develop the code you can use any code editor you like I use PyCharm Community edition, but you can use the on you work comfortable with.
The location in which any files go is crucial, if a file is on the wrong directory it will damage the entire work, so lets see how it should be organized.
The files with the extension .py _will be on the root directory, is the project folder, in the project folder you will have a subfolder named templates in which you will put all the HTML files, go back to the root directory and create another subfolder named static in this subfolder you will put all the CSS, JavaScript files and images. Some people sometimes create subfolders into the static to separate the CSS, JS and images, and it is a good practice for large scale projects in what you need a powerful organization, but in smaller projects it is easier to leave all the CSS, JS and images inside the static directory because when you upload tour files and the deployment site will search for them on the static folder.
You can have many python files or modules as you want, but the only to consider is app.py, so you have to import your modules and handle the logic to make them work into this file.
When you will access your templates on the python code you will use: return render template _(‘index.html'), python automatically will search for index.html into the templates folder, the @app.route(‘/project-name'), the route in this case project-name will the route you will type into the web browser to find your web app.
On the HTML templates when accessing a static file the structure will be like this: url_for{{ (‘static filename=styles’)}}, for example for adding your styles CSS you will update your code to: <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}"> . When linking to another Python module your code will be: url_for {{ (‘another-route') }}, it works when you have a system with more than one route, so if you have another section into your web app, for example a second page, in your app.py you will have a route:
@app.route (‘/second-page’)
Def second-page ():
return render template (‘second-page.html')
your logic here
if __name__ == '__main__':
app.run(debug=True)
just down the route following the python programming rules you will write the logic for the second-page functionality.
Important when you link the second-page route on HTML, check that if your route and your def name are different, on the url_for{{(‘second-page') }}, you have to write the def name, because if you use the route it won't work.
Now when you run your html file you will not see your CSS styles applied and your Python backend won't work, to see the result of your code you will run your app.py file, ensure that everything is right and the server is active, after that go to your favorite browser and type the localhost 127.0.0.1:5000/project-name, remember that project name is the route your home or index logic have.
This screenshot show the structure of your project directory, the .idea folder and the README file are generated by the IDE when you are working with Git control.
Now I think you understand important keys of the structure your directory, links and so on must have, once you have your code ready to deploy you can proceed with the next step.
Deploying to pythonanywhere.com
Open your web browser and navigate to the pythonanywhere.com url, if it is the first time you access this site you will have to create an account, you can use your Google account or start one with your Email, use a password you can remember because you will need it to login, once you finished the registration process that is very intuitive, they will send you an Email to the provided email address, so you will have to confirm your account, ensure to finish it successfully and proceed with the next steps.
Once logged in you will be prompted to the Dashboard page, once here you can see your username and a menu with options like Files, Web, Databases. Go to Web. Once here click on add a new web app, you will be promted to enter the name, name it exactly as your app route on the python code, because the name of the directory is which later will be used in the URL and if you name it different you will have problems to load your page, on the frameworks select Flask, on Python version the last available version, and once you finish the process you can go to files for uploading your codes.
Once you have added your new web app, go back to the dashboard using the backward arrow at the top left corner, and go to Files.
Into the file section you can upload your app.py file using the upload button, for uploading your templates and statics go to directories, search for directories and type static, open the folder and upload your files, leave the static folder and repeat the process with the templates files.
Every file upload support a maximum 100 MB file size.
Ensure that the project directory after_ home/_ have the exact name of your app route on the python code, on the contrary you will have problems when loading your page, if the name is not which you want you can try to rename it.
Once you have uploaded your files go back to the dashboard using the backward arrow located at the top left corner of the page, now that you are in the dashboard again you can go to the Web menu, located at the right of the File menu, follow instructions and click on reload page.
When it comes to the first time you have to click on run until 3 months from today, so your page will be automatically deployed.
Python anywhere have another functions like a console to write and run code, but is more comfortable to upload the files directly, the next time you want to update your web, you can click on the file you want to change, it will open the file code, so you can edit it as you want, next click save and reload go back using the backward arrow, go to the web menu and click on reload, now your page will be updated.
You can now check your web on the browser typing the url, generally it comes with the next structure: your_username.pythonanywhere/directory_name.com.
Conclusion
If I accomplished my mission, you know the structure of a python project, the structure of url on the templates, the meaning and functionality of the routes, and finally how to deploy your web projects developed with the Flask framework on python anywhere.
for more information read the Flask documentation to deploying a flask app.
Top comments (0)