Forums

Flask / Python / HTML / CSS Project Questions

Hello, I am looking to get some help on how to add .py, .html, .css, and possibly .jpg/.png files on my account somewhere that I can then see it do its thing online. I think I have it set up correctly, but I am at a loss as to where I can do this. If I simply upload files in the files section, I get an split screen editor looking thing and I can't see anything on the right. Perhaps, the free account only allows for this (but shouldn't you also be able to see the Python code do its stuff? Confused person over here). When I go to my subdomain pythonanyhere.com address, I am greeted with "Hello from Flask!". I tinkered around and deleted a Flask.py file, put in my own .py file there, but I still get the Welcome to Flask message. Is there an easy to follow guide to get this up and running?

Maybe follow one of the Flask tutorials or a youtube video on getting started with Flask on PythonAnywhere. They're going to be much more informative than anyone on the forums will be

I am not asking how to run Flask, and I am here BECAUSE of Youtube videos. They just want us to test things on our computer using port 5000 in a virtual environment. What I am asking is, since I don't currently own an Apple product, where do I place the files on this site so others could for example test it on their Mac computer/laptop in another city/country?

What exactly do you mean by placing files so others could test them? Do you want to share files so others can download them and run locally? Or do you want to deploy a script / a web app so users on the internet can reach it and interact with it?

The second one is more comfortable to me, because I want to test them on different devices. Can you just pick up a cell phone and go to a 5000 port development server and get it working?

I am coming from a web designer background with some knowledge of Python and C++. As I read into this, to make Python work online and include cool things like buttons and pictures, Flask has been suggested. When I start learning that, things like GitHub and Jinja are mentioned in Youtube videos. The webdesigner in me doesn't want to go that route. I want to see it grow like a flower online and be able to view from my cell phone here, and my tablet there, and then go to my friend's house and see on their computer like a website.

The GitHub route means I put up a 5000 "development" server and work on it like a car in the garage before taking it for a spin. I went over to a Discord channel and asked about this. They suggested I get used to the GitHub approach (which then the Youtube videos would be more applicable). When I first learned webdesigning, I would take already made HTML and CGI scripts and tweak them here and there to learn how to integrate them into my projects. CSS came along and I added themes/appearance aspects (like replacing frames, tables, etc...).

However, with Flask and Python and all the goodies that come along with it, it appears I have to take a different path. The Github approach means I can't test it as easily unless I know someone on the other end. If I were able to modify things and then just grab a cell phone or tablet to see how it looks on those devices through a website, then I would be able to verify as I go along how that day's progress looks on different devices. To me that is the webdesigner dream, but perhaps if I want to be a programmer who can make something "complete", I need to go the GitHub route and just cross my fingers it will work out in the end.

You can develop your site directly in the editor on PythonAnywhere. Then you just reload your web app and you can see your changes.

That sounds like a plausible scenario, but I am not seeing that. How does one do this? All I see is "Welcome to Flask!" and then if I go to a .py or .html file the window is split into two and see nothing on the right. Anyways, I found a JavaScript tutorial which really cleared up my confusion about using pictures and buttons. I may return here some day when the "front gate" isn't so locked. Either we need more user friendly guides to get this all working, or I need to know some basic standard handshake. Goodbye frustrations, hello JavaScript!!!

You need to find your workflow. Maybe split your screen into two browser windows if you want to see the web app and your code at the same time.

That isn't what I am referring to. I can use Visual Studio, PyCharm, and Eclipse and test what I am doing through the browser just fine on one (albeit small) monitor. I also learned briefly how to start out using Flask and Python through the browser this week (credits to this site and online tutorials). Earlier this weekend, I found a suitable web hosting site for testing, and I got that up and running showing HTML, CSS, and JavaScript working in harmony.

Unfortunately, here I can't click an html and see the fruits of my labor. The only thing I lose by going elsewhere is I can't implement Python, but that is a small price to pay for what I am doing now. Perhaps, when I delve into databases I will want to revisit Flask and try this site out again.

You might want to add an idiot proof button that launches .html files to fill the whole screen in some "run" mode. I understand there is a console at the bottom for programming, but I want to have it available for visitors to click and not have to type.

That's not how web apps are made. Usually resulting html is coming from some interaction between backed and frontend code. There is a possibility of a static sites (and you can host them on PythonAnmywhere and maybe that's what you want) but there html is usually also programmatically generated.

Aha!! Let's look deeper into what you are saying. At that page it states:

  • URL: /
  • Path: /home/yourusername/path/to/your/static/site

Not sure what all that means, but I went to an .html I put up and I see:

https://www.pythonanywhere.com/user/username/files/home/username/filename.html?edit

If you remove the "?edit" part, it does go now to the actual page to see it. Unfortunately, others can't see it unless they are logged in some way. I won't create a second account to test if this is only viewable to me or if others with an account here can see it as well.

Perhaps, when I delve into databases online I will want to revisit Flask and try this site out again.

The purpose of the static file mappings on the "Web" page is to make certain files in your account accessible to people who are not logged in to PythonAnywhere -- so that there's a quick and easy way to put (say) images or CSS files on your site.

The URL https://www.pythonanywhere.com/user/username/files/home/username/filename.html is an internal PythonAnywhere URL; it would be the way you would view the file /home/username/filename.html if you were logged in (or, with the ?edit at the end, the way you'd load it up into our editor). But if you're not logged in (or you're logged into a different account to the one with the username username you would not be able to access it.

So, let's say that you wanted to make the files in /home/username/mysite/static visible from outside PythonAnywhere. The internal URL, only visible when you're logged in as username, would be https://www.pythonanywhere.com/user/username/files/home/username/mysite/static -- that would be a directory listing.

To make it available on your website, you would set the "Path" section in static files to /home/username/mysite/static.

The address I gave has /home, not /static. Where would I try https://www.pythonanywhere.com/user/username/files/static/username/filename.html ?

If I go to https://www.pythonanywhere.com/user/username/files/ I see "home", "temp", and "var" listed. I don't see a way to add a "static" folder.

You can create new directories from the Files page (there's an input box with "Enter new directory name" hint and a "New directory" button on the right) -- you can navigate to the directory where you want to put the static dir and create it there...

Ok, I did that, but when I try to load a page without being logged in, it still gives me the log in window.

I am starting to get tired of this. Either there is a way or there isn't, and if there is I am being strung along with frustration.

If there isn't, that's fine, I have already found another place on the internet to work on a project and test it with cell phones, desktops, tablets, and have friends test it on their Apple products.

If making a static folder was the solution, then this site could have just defaulted that to begin with.

Anyone else want to offer a pseudo-solution? So far, we have gone a few days and I think people here know exactly what I want to do.

I think you're blocked on this because of the structure of a Unix-type filesystem. On Linux, your home directory is /home/yourusername. So in your case, every file that you own is somewhere underneath /home/marcususa. If you go to https://www.pythonanywhere.com/user/marcususa/files/ you're seeing the complete operating system filesystem, and of course you can't write things to those locations.

So: in order to host a static site, put a directory called (say) static in your home directory, /home/marcususa. That is the default location that you will see if you click on the "Files" page. Ignore what you see in the browser's location bar at that point. All it is showing you is internal PythonAnywhere URLs that will be of no use to you in any other situation.

Next, in order to make the directory /home/marcususa/static visible from outside, create a website on the "Web" tab (with your free acount it will have to be at marcususa.pythonanywhere.com, then set up a static file mapping with it as the directory name. If you put "/static" in the URL and /home/marcususa/static in the directory column, then you will see your files at https://marcususa.pythonanywhere.com/static. If you leave the "URL" field empty, then it will just serve up the files at https://marcususa.pythonanywhere.com/.

That is what I tried way back ~1 week ago. This is what I get. Image Test

I don't see any static file configuration in your account right now; the "Static files" table on the "Web" page would be empty if you looked at it. If you set things up the way I describe above, then it will work -- and if you have any problems, then if you leave it in the configuration you think should work, we'll be able to look at it and advise.

Start from the beginning, is it configuring a static file? If so, how do you configure a static file? Why is it I have to jump through so many hoops on here, but on other sites it has been up and running within a matter of minutes. You are speaking to me in riddles, and I would appreciate a comprehensive step by step guide if you are demanding users go through all this. I have created two static folders where I thought the files could go to work. Do you have step by step screenshots so we can see EXACTLY what we have to do? Last try, then I am off this site, because it is getting too frustrating playing Marco Polo games with you guys where to place the files and how to "configure". Again, other sites have my stuff up and running in minutes. You guys have a setup that is taking 1.5 weeks now, and I am not getting anywhere. This site should be called pythonnowhere.

It really is very simple. If you want a directory containing static file to be available on a website hosted on PythonAnywhere, you need to:

  • Create a website. You've done that.
  • In the static files table on the "Web" page, add a line with a "URL" set to the URL prefix that you want to use. If your website is https://marcususa.pythonanywhere.com, and you want the contents of that directory to be available at https://marcususa.pythonanywhere.com/static, then you specify "/static" as the URL. If you just want to have all of the files available at `https://marcususa.pythonanywhere.com then you leave it empty.
  • Also in the static files table, in the "Directory" column, you specify the directory where you have the files. So, in your screenshot above, that would be /home/marcususa/static.

Once that's done, you click the "Reload" button at the top of the "Web" page to restart the website and have it reload its configuration. Your static files will be visible at the URL you specified.

I don't see anything that says, "static files table". Seriously, you expect us to know what this is and where it is?

Do you realize you aren't actually helping, YOU ARE PISSING THE SHIT OUT OF ME.

GO FUCK YOURSELF DOUCHEBAG.

THIS IS THE LAST POST I AM GIVING. I CAN'T BELIEVE I HAVE WASTED A WEEK COMING BACK AND GETTING THE RUNAROUND.

HAVE FUN FUCKING WITH OTHERS, YOU SHITHOLE. enter image description here

What a lovely reply. For anyone else coming to this forum thread, the static files table is on the "Web" tab, where you create websites.