{"id":24358538,"url":"https://github.com/eniompw/flaskfetch","last_synced_at":"2026-01-28T22:36:58.533Z","repository":{"id":272975695,"uuid":"918354000","full_name":"eniompw/FlaskFetch","owner":"eniompw","description":"Simple Flask Fetch Demo","archived":false,"fork":false,"pushed_at":"2025-01-18T09:57:04.000Z","size":4,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-03T17:22:58.256Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eniompw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-17T18:54:52.000Z","updated_at":"2025-01-18T09:57:06.000Z","dependencies_parsed_at":"2025-01-17T19:46:44.264Z","dependency_job_id":"03d95f8f-b69e-4bbf-b8a2-bace9e899e5b","html_url":"https://github.com/eniompw/FlaskFetch","commit_stats":null,"previous_names":["eniompw/flaskfetch"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eniompw/FlaskFetch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eniompw%2FFlaskFetch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eniompw%2FFlaskFetch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eniompw%2FFlaskFetch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eniompw%2FFlaskFetch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eniompw","download_url":"https://codeload.github.com/eniompw/FlaskFetch/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eniompw%2FFlaskFetch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28853672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T15:15:36.453Z","status":"ssl_error","status_checked_at":"2026-01-28T15:15:13.020Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-18T20:18:59.614Z","updated_at":"2026-01-28T22:36:58.490Z","avatar_url":"https://github.com/eniompw.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple Flask Fetch Demo\r\n\r\nA minimal example showing how to use the Fetch API with Flask. This demo shows how to make a simple request from a webpage to a Flask backend.\r\n\r\n## What it Does\r\n\r\n- Displays a webpage with a button\r\n- When clicked, fetches a message from the Flask server\r\n- Displays the response on the page\r\n\r\n## Project Structure \r\n\r\n```\r\n.\r\n├── README.md\r\n├── app.py\r\n├── requirements.txt\r\n└── templates/\r\n    └── index.html\r\n```\r\n\r\n## Setup\r\n\r\n1. Install Python requirements: \r\n   ```bash\r\n   pip install -r requirements.txt\r\n   ```\r\n\r\n2. Run the Flask app:\r\n   ```bash\r\n   python app.py\r\n   ```\r\n\r\n3. Open your browser to `http://127.0.0.1:5000`\r\n\r\n## Code Explanation\r\n\r\n### Backend (app.py)\r\n- Creates a Flask server with two routes:\r\n  - `/` serves the main webpage\r\n  - `/hello` returns a simple greeting\r\n\r\n### Frontend (index.html)\r\n- Shows a button that triggers a fetch request\r\n- Uses the Fetch API to make a request to `/hello`\r\n- Displays the server's response in a paragraph element\r\n\r\nThe JavaScript code can be written in two equivalent ways. Here's the traditional function notation with detailed comments:\r\n```javascript\r\nfunction sayHello() {\r\n    fetch('/hello')                          // Makes GET request to /hello endpoint\r\n        .then(function(response) {           // Handles the response\r\n            return response.text();          // Converts response to text\r\n        })\r\n        .then(function(text) {              // Handles the text\r\n            document.getElementById('message').textContent = text;  // Updates page\r\n        });\r\n}\r\n```\r\n\r\nAnd here's the same code using modern arrow function notation, which is more concise:\r\n```javascript\r\nfunction sayHello() {\r\n    fetch('/hello')                          // Makes GET request to /hello endpoint\r\n        .then(response =\u003e response.text())    // Arrow function to handle response\r\n        .then(text =\u003e document.getElementById('message').textContent = text);  // Arrow function to update page\r\n}\r\n```\r\n\r\nBoth versions do exactly the same thing:\r\n1. Makes a GET request to the `/hello` endpoint\r\n2. Converts the response to text\r\n3. Updates the page by setting the text content of the element with id=\"message\"\r\n\r\nThe arrow function notation (`=\u003e`) is a shorter way to write functions in JavaScript. It's particularly useful for short callback functions like these. The two notations are equivalent, but arrow functions are more commonly used in modern JavaScript.\r\n\r\n## Learning Points\r\n\r\n- Basic Flask route setup\r\n- Simple HTML structure\r\n- How to use the Fetch API\r\n- Handling responses from a server\r\n- Updating webpage content with JavaScript\r\n\r\n## Next Steps\r\n\r\nTry modifying the code to:\r\n- Return different types of messages\r\n- Add more buttons with different actions\r\n- Style the page with CSS\r\n- Add error handling\r\n- Return JSON data instead of plain text \r\n\r\n## References\r\n\r\nFor more information about the Fetch API:\r\n- [W3Schools - JavaScript Fetch API](https://www.w3schools.com/js/js_api_fetch.asp)\r\n- [MDN Web Docs - Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feniompw%2Fflaskfetch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feniompw%2Fflaskfetch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feniompw%2Fflaskfetch/lists"}