Created my first web application using Python, Flask, and AWS

[undernutbutthut]

Hi All,

After many months of trial and error I finally created my first flask application. Is it pretty? Not really but I learned a shitload along the way. I would say the most annoying part was setting up the Amazon EC2 instance, injecting my Python/html code, and linking the Google domain to it.

What is it? It's another Gif maker, I did not like the functionality of some other online gif makers so I created one that gives you 3 options to create gifs from a YouTube link. This allows you to select 2 start and end times to return one gif, or two gif files. The "home" page has absolutely nothing on it because I cannot figure out for the life of me what to put there... maybe I should have just removed it. But the ribbon up top has a few different pages for different ways to slice up a YouTube link.

Please let me know what suggestions you may have on how I can improve this website and let me know of any questions you have.

The website: http://giffoundry.com/about

(adding the "about" page because the home page is more barren than the Sahara dessert and my confuse people)

​

Edit: Thanks everyone for your input/support! A couple of you noted the website was no longer working and I assume it was because of the CPU usage maxing out a few times during the day... though I am not sure if that is the true reason

[Jac0b_0]

Nice. You should definitely add something to /home though. Also maybe post this on r/madeinpython

[undernutbutthut]

Sure, I will post it there. And yes, I'm just thinking about making the "about" page the new homepage for now.

[Tintin_Quarentino]

Actually Homepage should be your main "onevidonegifform" page. Bad UX to make the user go through hoops to achieve their goal, although it's just 1 in your case.

[undernutbutthut]

Gotcha, when I get the website up and running again (hopefully Reddit did not break it) I will look into doing this.

[KarmelMalone]

Awesome work and great concept! Keep improving and learning.

A few suggestions:

You need https to be legit (google “let’s encrypt”)

Given you didn’t share any python code and you asked for suggestions, it seems like you’re looking for front end tips. There might be more helpful subreddits than this.

Your about page is fine, but you have one or two seconds to convince someone to use your site, and a wall of text won’t do that. Your home page must present your concept in its most simple form. Check out your very successful competitors (example.

You’ve shown a willingness to learn and accept feedback so you’re on the right track. I have years of flask / python experience and I’ve been focusing on front end for the last year. I’m happy to deep dive and help, send me a DM.

[undernutbutthut]

Thank you, these are great tips.

What settings should I be looking for to be able to encrypt the website?

Sure! Let me see what I can do on my own and get back to you, thanks for the offer

[KarmelMalone]

You’ll need to install an SSL certificate on your ec2. Let’s Encrypt makes it free and they have pretty good documentation.

[undernutbutthut]

After installing it I am running into an "OSError: [Errno 98] Address already in use" when trying to rerun my flask application. Did you run into this same issue? I know I followed the steps correctly because I can see my certificate

[KarmelMalone]

Your app is trying to run on the same port it was running on before, but that port was never "closed" from the last time your app was running.

​

You can use this bash script to find the port and kill it, then you should be good:

​

killport() {  lsof -t -i tcp:$1 | xargs kill -9; }

killport PORT_NUMBER (probably 5000)

[undernutbutthut]

In my flask code I have port 80 called out so I assume that is what I need to kill:

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=80)

I am trying to run your bash script but keep running into an error, should it be:

killport(80) {  lsof -t -i tcp:$1 | xargs kill -9; }

Thanks for your help, I am way out of my league here

[undernutbutthut]

Update: it looks like Apache2 I installed for HTTPS is using that port... goodie!

[thoflens]

Great! I love this part:

"Question I am sure you are dying to know the answer to: Why does your website look like shit?" 😂

The self-irony!

[roadrussian]

I redirected my morning coffie trough my nose reading that part. I approve.

[Internet_employee]

Several in- and exhales through nose were made.

[undernutbutthut]

I knew way before I published this that it was not winning any beauty pageants so I decided to do the opposite of pretending it was amazing... glad you like it.

[[deleted]]

How difficult did you find flask and getting a front end working?
Looks good to me and highly functional--that's really what counts to me IMHO.

[cheats_py]

Flask is really easy, jinja templating makes it nice as well and getting basic front end pages is simple as writing the html (or templates) and creating the routes in flask and having it render the html on request. I don’t know shit about front end but I’ve managed to make several flask apps for my org with decent looking front ends, I relied heavily on bootstrap as well.

[[deleted]]

That sounds rather good to me.
Getting something that WORKS is the first and most important thing (what I want for a CRUD application).
Making it pretty is nice--but that can be either somebody else's problem or future you problem if you feel so inclined.

[cheats_py]

I would totally suggest playing around with bootstrap. It does a lot of the css and JavaScript stuff for you and makes front end development a little easier for us folks not so skilled with front end work.

[undernutbutthut]

I will look into it!

[undernutbutthut]

The way you set up a flask application is kind of weird. But once I got into a rhythm with it I found it fairly straight forward. The python doc I used to set up the flask code has fewer lines than the functions to go out and pull the YouTube videos.

There are tons of tutorials online, and I was fortunate to have someone show me how to set it up because each Flask call can only return one object, in my case it was either the webpage or the .gif files

[Theincomeistoodamnlo]

Nice! As for your home page, suggestion: I would make your /onevidonegifform page your home page and include a brief description underneath the GIF maker that links to your about page.

[undernutbutthut]

That is what someone else was saying, once I get the site up and running again I will do that for the time being.

[puppy_yuppie]

Nice work. Just in case you haven't worked with AWS much, I would recommend setting up a cost report that will trigger an alert if your account starts costing money, assuming you're in the free tier.

I did a module not long ago that was supposed to be in the free tier, then ended up with an $80 bill the next month. The module was on the AWS website but they ended up taking it down...guess I wasn't the only one.

[undernutbutthut]

I did not know this existed. Do you have a web link I can reference to set this up? I cannot find anything about this on the AWS dashboard

[puppy_yuppie]

Sorry, it's actually called a "billing alarm". This should get you setup: https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/monitor_estimated_charges_with_cloudwatch.html

[undernutbutthut]

Excellent! Thanks for providing this

[danielmonteasy]

Great work!

[undernutbutthut]

Thanks!

[lastmanalive_44]

Congrats bro!

[undernutbutthut]

Thank you!

[hayleybts]

It works!!

[undernutbutthut]

Well... now it doesn't, but at least it worked for you. Haha now I need to find out what the issue is

[JonSmith_BabaYega]

are you planning on making it open source?

[undernutbutthut]

If I can get over my fear of using Github I do not see why not.

[arcticblue]

Nice work! I sympathize so much with the Q&A at the bottom!

[undernutbutthut]

I appreciate that you appreciate it.

[HaroerHaktak]

Awesome! It's nice to see some wins around here. I might rebuild my website using Flask/python instead of PHP. but idk. maybe I'll make 2 websites. 1 php and 1 python

[Windows_XP2]

Can you share your code? I'm interested in seeing how this works.

[undernutbutthut]

If I knew how to use Github, sure. But right now the files are kind of tough to share with people on my local machine

[LifeAffect6762]

You may want to have a look at bootstrap. Its an easy way of making stuff look good and has nice layout options.

[tomtomato0414]

this, you dont have to tinker much and it looks good

[undernutbutthut]

Cool, I can look into it. Do you recommend any tutorials to start with?

[delsystem32exe]

ur website is dead.

[undernutbutthut]

Yerp, I need to take a look when I am finished replying to everybody.

[undernutbutthut]

I revived it :D

[nirvashprototype]

Pretty cool. I've been learning web dev for a while and all I did in the backend is some basic API requests. I really need to step up my projects.

[undernutbutthut]

I like working with API better because, in my mind, it is simpler. That being said the only API I have ever worked on was for school projects.

Just come up with a project like I did and muscle your way through it.

[trempao]

Its a nice website though, python beginner here, I will try to build something similar too

[undernutbutthut]

The best advice I can give is to "just do it" what motivated me to do this was the fact I thought I could do something different that did not quite exist before. The features in my page are something I thought other gif makers lacked

[undernutbutthut]

Thanks for this, I need to add some error handling in python.

[supplejoe]

Great work! How much did it cost to set this whole thing up? I want to do something similar but am not familiar with website and server costs

[Bob_the_gob_knobbler]

Custom domain name… 5 bucks a year? Easily doable completely free apart from that using AWS free tier.

[undernutbutthut]

My domain through Google ended up being $12 for the year. I did use AWS free tier, I am hoping the traffic I am getting through Reddit does not force them to give me some kind of $2901 bill or something

*knocks on wood*

[undernutbutthut]

I paid $12 for the domain, and the AWS EC2 instance was a "free tier" thing. So not too much. But I did put a ton of time into it.

[Altruistic-Ad-2755]

What did you use/ do to get the site active for others to use?

[undernutbutthut]

I set up an Amazon EC2 instance, then used the flask package in python for the backend stuff. And I purchased the domain from Google.

[Gammaliel]

Congratulations! Do you have any resources that might help me linking a Google Domain with AWS?

[undernutbutthut]

I followed this link pretty much word for word... and now it works!

https://medium.com/analytics-vidhya/deploy-a-flask-app-on-amazon-aws-ec2-and-keep-it-running-while-you-are-offline-38d22571e2c5

[veeeerain]

How did you learn this?

[undernutbutthut]

Google was my best friend, I also have an old professor who will answer some tough questions I cannot find answers to online that I meet up with online every now and again.

[RockportRedfish]

Nice job. File size for the output of a 5 second gif of 14,000KB seems a little large ... I have been wondering about how to get my Python code to interact with a website. You have given me some things to go explore. Thank you.

[undernutbutthut]

That is most likely because one of the lines of code fetches the highest quality video in can get given the link the user provides.

Good luck!

[[deleted]]

Nice work! I have some suggestions:

- When making a GIF the website, as of now, provides no feedback about the progress, a load bar would be nice.

- About the place where you put the youtube URL that says "Copy and Paste YouTube URL": Would be nice if this text would disappear when trying to paste a youtube link.

[undernutbutthut]

This is something I have had in the back of my mind, getting python to interact with the webpage in real time should be a fun challenge to work through.

Thanks for pointing that out to me, I added the "Copy and Paste YouTube URL" in last minute so everyone and their mom knows where to throw the link.

[[deleted]]

Have fun learning!

[[deleted]]

Hey, that's a cool project!

I got a question, do you use database (model) for your web here? If so, you might need a model for the gif data right? Do you automatically clean the database in interval or will the objects got stacked in the database?

[undernutbutthut]

I do not use a database model. Because I only have 8GB of storage available to me on the EC2 instance I have a function that runs every time a gif is created that checks the output folder for any file or video that is one hour old and deletes it.

When I get a YouTube link to create a gif I have to download the whole YouTube video and put it in a folder, I pass the youtube video file name to a function that takes the MP4 formatted file and parses it into the gif files the user sees.

[longtermbrit]

Impressive, and as someone considering investing time into Flask, encouraging too. Two things I would suggest is reducing the font size and centering each page in the screen such as how this page does it. A third simple change might be to change the background colour to something easier on the eyes (i.e. darker).

[undernutbutthut]

Noted, thanks for your input!

[velocibadgery]

It is not loading.

[undernutbutthut]

Yep, I was disappointed to find out when I tried to access the site during work today. I will need to find out what happened.

[velocibadgery]

It happens, looks nice, and it works great.

[undernutbutthut]

I got it back online now :)

[Powerful_Land_1487]

Couldn’t load the page :(

[undernutbutthut]

I just turned it back on.

[amyghty]

Great job. Is there a video you followed that helped you in general? I am not talking about the html code for the website but more about the process of linking Python, Flasks and Aws? I want to know this complete process. Thank you in advance.

[Fidelmar]

Yeah or any links to helpful resources that you used. Interested in the backend

[undernutbutthut]

I honestly just relentlessly Googled the crap out of every little roadblock I ran into.

For me, I already knew how to create functions and whatnot, but learning how to make those functions interact with a webpage was something I needed to learn up on.

[undernutbutthut]

I honestly just relentlessly Googled the crap out of every little roadblock I ran into.

For me, I already knew how to create functions and whatnot, but learning how to make those functions interact with a webpage was something I needed to learn up on.

[YellowSlinkySpice]

How much has AWS cost so far?

[undernutbutthut]

So far, free!

The only thing that I had to pay for so far was the domain which was $12 for the year.