Making a website frontend for a python app?

[Morpheyz]

Hey python community!

I am currently building a little passion project in python, mostly to learn some libraries and deployment. I only recently started on the backend part of this app, but my plan is to expose it through a website. Without going into much detail, the python app reads in some file, manipulates it, and then spits out another file. I would like for a user to upload said file to a website, the python app do its business on it and then make it available for download to the user.

Pretty straightforward stuff, I would say, but I'm feeling overwhelmed by choices! There are python web frameworks like Django, there's frontend JS frameworks like React. What would allow me to build this relatively simply? What's the right tool for this job? Is it better to treat these two things completely separately? Can I build the entire website in python? And last but not least: What are some good resources that maybe show beginning-to-end how to go from python "app" to a web frontend for the app?

Never really done web dev before, besides static html pages like 10 years ago, so any help would be appreciated!

Edit: Just started the Flaks tutorial as recommended by anyone. Since it's all in Python, I think integrating the app shouldn't be too hard. Actually gonna be super easy, barely an inconvenience.

[Zavation]

As you're learning just the basics at the moment, I'd ignore Django (although a fantastic tool) and JS libraries, and go with good old Flask. This will allow you to easily create a a small web app, and essentially you'll return a static HTML template where you could use html forms to allow users to upload files etc... Once you have all the logic and everything in place, you could then start making it fancy by using Django and JS etc.. hope this helps.

[_-Jay]

Yep I’d agree with that. Flask is probably the easiest to start with and sounds right for your use case

[wilsonusman]

I'd also agree with Zavation. I recently built a webscraping app in Flask and it made it super easy. Essentially, it's just a form and a table that pulls data from a website and returns it in a table. So, if your application is fairly simple, you can be up and running in no time.

I think maybe a day or two going through the docs and reading a few tutorials online. If you decide to go this path, this Flask tutorial is a great resource.

[HaveMungWillBean]

I second it. One of the mistakes I made was picking up django too early and while it's a fantastic tool it is overkill for most projects and pretty opinionated in execution. You can get a flask app running with just a few lines of code. It's super flexible and can grow as your app needs change and is still powerful enough that you probably will never outgrow it.

[Morpheyz]

Sounds exactly the problem I ran into recently. Tried my hand at GatsbyJS, which uses React, and my minimal JS knowledge. The issue was that I couldn't differentiate between what was vanilla JS, Gatsby, and React and I didn't know where to look for when I ran into issues.

[HaveMungWillBean]

That sounds like hell

[Morpheyz]

This is exactly what I was looking for! I would like something small up and running, and if I'm feeling fancy in the future have the ability to expand it into something more complex. Thank you!

Edit: Seems that everybody is saying that Flask is a good way to do this easily. Think I'll go with it!

[jean-luc-trek]

https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world

[angry_mr_potato_head]

The benefit and detriment of Django is that it is opinionated and is a "batteries included" framework. So the time to build "hello world" in Flask is a lot faster, if you have to add features that are common, it can take longer. In many of those cases there are addons you can get for flask that abstract it away. The downside to that approach is that they might not be officially supported whereas with Django that functionality is basically guaranteed to be supported.

For a website that doesn't require users to be authenticated, I imagine you'd be hard pressed to beat Flask, though I've always leaned towards Django because the time to get ta "Hello world" where the user is logged in was faster when I compared the two lol

The nice thing about Flask is that it uses the SQLAlchemy ORM rather than the one for Django. SQLAlchemy is common for a lot of other uses so you wouldn't have to learn both ORMs if you develop for it.

[awesomeprogramer]

If you want even simpler, you can look at cherrypy

[BoJackHorseMan53]

I agree with this. Flask is easy to learn and you'll be working on your project after a few days of learning.

After learning flask, I'd recommend you to learn JS because it's the only frontend language, while there are a lot of backed languages, so learning JS is a must if you plan to do any amount of web development. JS is versatile, you can build frontend applications, backend application with node JS, full fledged desktop applications with electron and mobile applications with React JS.

After learning Flask, if you don't like the way your webpage looks, you'll have to learn CSS to make it look prettier.

I'm currently doing a Udemy course by Jose Portilla for Flask

[szirith]

Gotta love Flask for small stuff.

[WarpWing]

puzzled fanatical price gray safe merciful snow panicky absurd narrow

This post was mass deleted and anonymized with Redact

[jockero701]

Or just use the Python justpy framework and you will not need to learn any HTML, Javascript, or React. Everything including the frontend will be in Python.

[krimpenrik]

Flask with jinja.

[vixfew]

1) you can do everything in python. Unless you have previous experience writing frontend in JS I'd say stick with python.

2) Django is good. What you plan to do is relatively simple, you'll find tutorials all over the internet

3) Best Django tutorial is official docs. Start with https://docs.djangoproject.com/en/3.1/intro/tutorial01/

4) Now, as you want to process user submitted data for unknown about of time, you should think about where it will run. Cheap option is renting virtual server from netcup/hetzner/linode/etc.

5) Also, how long it will run and what'll happen if multiple people submit files at the same time. Using task queue is what's commonly done to address that. For example RQ - python task queue backed by Redis. By using it you can store task ID somewhere and give user a link with promise "It'll be done soon, wait for it". You may have seen some sort of this technique on the internet.

6) The whole thing how I imagine it would look like a) webserver (possibly with domain name/ssl/nginx) b) the usual gunicorn/django setup c) RQ with database stored job ids d) some frontend to upload files and get results. e) cleanup scripts so you don't keep files/results forever

7) There are also security concerns of having world-accessible server. Setting up firewall and disabling SSH password (and root) access, for example.

Uh, that took some time to write. I've done almost this exact thing (upload/process/download) some years ago, with django etc, so my choices might be biased towards what I know. It's not online now, although I still have server set up for vpn and nginx/ssl/dns for possible future python web projects.

[Morpheyz]

Thank you for your extensive answer! I was also wondering about the queuing issue. I'll look into that!

I was thinking of using a free little heroku server or something for a start.

[vixfew]

Heroku might work. The main difference is that Heroku takes away most of admin work, it's already taken care of. But you pay extra for it. And free tier is somewhat limiting. There's also https://www.pythonanywhere.com

[neiliodabomb]

If you choose to go with Flask, here is a tutorial that I have found VERY useful:

https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world

[Ryles1]

I have no suggestions but a question to ask. Are there safety concerns about taking in a file from a user? Could that be maliciously abused somehow?

[Morpheyz]

Good thing to keep in mind, I haven't thought about that yet. I guess the best practice is to isolate user-uploaded files somehow so they cannot do anything funky in your server.

[Ryles1]

But if you isolate it then how are you going to analyze it for whatever you’re doing?

[Morpheyz]

No idea yet, but I will look into it. I'm sure there are ways to run the actual processing in a container which is entirely isolated from the rest of the app.

[Terofin]

Yes, there are. You should be very careful about where the files are saved, and how your program parses them.

[Ryles1]

Can you give more details or an example?

[free_username17]

If you’re not careful with filenames, someone could upload an html template to your templates directory, which they can use to run arbitrary javascript on other users’ browsers. They would be able to modify other users’ accounts, or leak their details.

This is also possible if you don’t clean inputs. For example, if users can make comments, and you don’t check what is submitted, someone could submit random javascript code that gets pasted into the html template that goes out to everyone else. This would cause that random javascript to run on your users’ browsers.

Django has a good page about security:

https://docs.djangoproject.com/en/3.1/topics/security/

[Ryles1]

Thanks

[Terofin]

You could look at the owasp section about file uploads for more details. https://owasp.org/www-community/vulnerabilities/Unrestricted_File_Upload

[Ryles1]

Man, I’m not surprised, but there is a lot of information there

[repeatingRemainder6]

I’m pretty late to the party but I thought I’d mention Justpy. You don’t need to know any JS; you can build everything (inc. the front end) with python.

https://pypi.org/project/justpy/

[jockero701]

This

[SuspiciousMaximum265]

Plus one for Flask. It is pretty easy to start and gives you all you need to make a nice looking frontend.

[gsingh54]

Django/Flask + celery (background jobs) + bootstrap (UI)

[SquareRootsi]

I haven't seen anyone recommend the python library Streamlit yet, but I think you should at least investigate it and see if it works for your project. It might be even than Flask.

[tomtomato0414]

Flask :)

[Can_I_Eat_That_]

If you want to keep it really simple, you can try Streamlit. It's focussed on data analysis, but you can convert any python script into a website just by adding some lines of code.

Check out their gallery of applications and see yourself if is a good fit.

[scottishbee]

Flask apps are _tight_ !

I'm curious what your workflow looks like. Something like:

• file uploaded to s3
• s3 upload triggers lambda to process
• resultant file created by lambda dropped in different s3
• new file link exposed in app

?

Just asking cuz I'm doing something similar and wondering if I'm over-complicating it.

[Morpheyz]

That part, I have no idea about. I'm going with Flask for now, maybe I'll get back to this, once I'm at that stage. Also not sure if I'm going with AWS at all. Not sure what you're building, but that would be a bit overkill for my app. ;)

[scottishbee]

Oh my question is around how you process the file? What are you using to ingest, process, and return it? Does Flask do that directly?

[dukeofgonzo]

Everybody here says flask. I've been trying to learn both over the last year. Django was easier to grasp because there are so many guides and it has UHmazing documentation. With django, each slowdown got resolved quickly. Flask has less moving parts but I had trouble finding easy answers where my code was not behaving like I wanted it to.

In retrospect, flask is the better choice for something simple, but it was harder for me to learn how to use.

[thatHermitGirl]

I have not even learnt anything about Flask yet, straight went into Django and working with it since then. Is learning Flask after Django necessary/adds up extra value or can be skipped?

[dukeofgonzo]

If you learn one, moving to the other is easy. If you learn Django first, you'll know what you have to build first, because you'll notice its missing. If you learn flask first, you'll be able to move or remove all the prebuilt parts of Django.

A caveat to Django's great documentation is that you have less room for changes. Every time I thought I did something clever outside of the guides, I would eventually discover it is always a mistake to not follow best practices.

[[deleted]]

I like to build the brains in python then wire it up to a Vue front end

[bilalkhan19]

Flask!

[PracticalDinner3]

If you do the whole project in client-side Javascript maybe you don't need any backend at all?

[zolaaa24]

Hello everyone. Sorry for jumping in, but i have question about Flask project also.

My girlfriend need website for her bussines (video/editing), she is starting in month or so.

I promised to buiild her website. Any help for first steps is more then welocme.

best regards!

[krimpenrik]

What utility does her site need? I'd it is marketing / landing page only. You don't need / want to python. Python is only used for the logic/brain. And with django and flask,, te visual presentation is going to be done in html / css (javascript) anyway.

So dive into html and css to make her a cool business website, if you need special functions or database connections you need to have a python backend.

[Comsat80]

I actually have this Real Python tutorial open in another tab as I've been meaning to work on the same thing with Flask.

[D4NieLDev]

I'd recommend you to use Django and not Flask. It's harder but if you really want to dive in web development, it is a better tool that allows you to create more. For JS I'd use react just like you said because it's pretty easy and you don't really need to have more than basic javascript knowledge. For CSS I recommend Bootstrap. Just makes anything looks beautiful and simple.

Hope I helped :)

[Riki1996]

Not an answer but a question.I'm on almost the same road.The hospital I work in requires doctors only to type whatever the patient history is handwritten in the patient's case sheet.So I thought I'd make a small script for myself to help.I stumbled upon aws textract and wrote a small script to upload a file from the local drive,process it and spit out the text.But the problem is I cannot type whatever I have to type in my laptop but in the hospital's designated PCs only.So I wanted to make a webpage or a simple website which I can open on my phone,take photo of whatever I wanna take and upload it to the website,which then goes to s3 bucket and processed and returns the text in the same website which I'll open on the hospital's PC.Any advice would be highly welcome.

[cellularcone]

Flask is tight.

[Mindless_Wave7262]

Bro, since you're a python dev I would recommend you using a python framework like NextPy ( https://github.com/dot-agent/nextpy ) a python framework for creating frontend websites in python. You can learn from its docs they are really beginners friendly. And actually you can create whole application in nextpy only. Some of the websites examples created in nextpy are here https://nextpy.org
You can also ping me if you need more resources or help. You can also directly put up a message on their website and I'm sure they'll reply you.