From a previous post, we went through the setup of building a Serverless URL Shortener with API Gateway, Lambda, and DynamoDB on AWS. Today we will build a Web User Interface using Python Flask, Bootstrap and JavaScript that will communicate to our API to shorten URL’s.
Note: Although using Python Flask is a Hosted option, you could also use this example to host it as a web page on Amazon S3, for the complete serverless route.
Dependencies:
We need Flask, Gunicorn (optional) and Requests:
1
|
|
Application Code:
It’s good practice to use a API Key for some level of security, but if not, you can just remove the headers section of x-api-key
.
The application relies on 3 environment variables: APP_TITLE
- which is the banner name (defaults to “My URL Shortener” if none is set), TINY_API_URL
- which is the URL to create the shortened url and X_API_KEY
which is the api key for your API.
The content of app.py
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
|
JavaScript
We want to copy the value of the shortened url response to clipboard when clicking on a button. For that functionality, we need some javascript.
1 2 |
|
the content for our javascript function - static/js/clipboard.js
:
1 2 3 4 5 |
|
HTML
The content for templates/index.html
:
The content for templates/results.html
:
Run the Server
Before we run the server, we need to set the environment variables as mentioned earlier:
1 2 |
|
Run the Server:
1
|
|
After booting the server, access the server on http://localhost:8080/
and the response should look like:
Dockerizing this Application
The source code for this project is available on my github repository
Thank You
Please feel free to show support by, sharing this post, making a donation, subscribing or reach out to me if you want me to demo and write up on any specific tech topic.