Help with Flask - How to view webview

Question:
How do I view my index.html file when using flask from the Flask template on replit?
I have a main.py file with my flask/Python stuff; and a templates folder with my index.html file, htlm code, and the stuff to use the flask template.

Am I supposed to use the ‘HTML, CSS, JS’ template?
My project directory looks something like this

|-- templates/
   |-- index.html
|-- flask.py

main.py
My main.py folder holds this content

from flask import Flask, render_template

app = Flask(__name__)

responses = []


@app.route("/")
def index():
    return render_template("index.html", responses=responses)


# Start of meta setup - head #
# Imports - to be used later in the program #
import datetime
import random
import sys
import time


# This portion makes it possible for a delay between print statements #
def delay(seconds):
    start_time = datetime.datetime.now()
    while (datetime.datetime.now() - start_time).total_seconds() < seconds:
        pass


###
# "*" indicates code
# Example Usage of random:
#
# The below makes "operator" randomly '+', '-', '*', or '/' when printed
# * operator = random.choice(['+', '-', '*', '/']) *
#
# This one randomly chooses a number between 1-100 when printed
# * random_number1 = random.randint(1, 100) *
###

# End of meta setup #

# Start of display content - body #
while True:
    username = input("What is your name?\n").strip()

    # Split the input into words and assign to variables #
    name_parts = username.split()

    if len(name_parts) == 3:
        firstname = name_parts[0]
        lastname = name_parts[1]
        MN = name_parts[2]
    elif len(name_parts) == 2:
        firstname = name_parts[0]
        lastname = name_parts[1]
    elif len(name_parts) == 1:
        firstname = name_parts[0]
    else:
        # Handle cases where too many words are provided #
        print(
            "Hey, please only enter either your name in the format of either;"
            " firstname, first and last, or first last middle"
        )
        continue  # This will restart the loop
    break
#
OCName = input("What is the name of your OC?\n").strip()

print("\nOkay, " + firstname + "! Your character's name is " + OCName + "!\n")

delay(1)
while True:
    # Story Choices #
    storytype = input(
        "You have some choices for your type of story. 'Adventure through the"
        " rainforest' or 'Quest for a Magical Artifact'\n"
    ).strip()

    ########## Adventure through the rainforest Storyline ##########
    if (
        storytype.lower() == "adventure through the rainforest"
        or storytype.lower() == "rainforest"
        or storytype.lower() == "the rainforest"
        or storytype.lower() == "adventure"
    ):
        print("Great choice")
        delay(1)

        break
    ########## End of Adventure through the rainforest Storyline ##########

    ########## Quest for a Magical Artifact Storyline ##########
    if (
        storytype.lower() == "quest for a magical artifact"
        or storytype.lower() == "magical artifact"
        or storytype.lower() == "quest"
        or storytype.lower() == "artifact"
    ):
        text_to_type = (
            "Due to technical difficulties, 'Quest for a Magical Artifact' has been"
            " temporarilly disabled\n\n"
        )
        for char in text_to_type:
            sys.stdout.write(char)
            sys.stdout.flush()
            time.sleep(0.025)
        continue
    ########## End of Quest for a Magical Artifact Storyline ##########
    # End of Story Choices #
    # Handel inccorect inputs for type of story (storytype) #
    else:
        print("\nInncorrect input.")
        delay(1)
        print(
            "\nAccepted inputs for 'Quest for a Magical Artifact': 'quest for a magical"
            " artifact', 'magical artifact', 'quest', and 'artifact'\nAccepted inputs"
            " for 'Adventure through the rainforest': 'adventure through the"
            " rainforest', 'rainforest', 'the rainforest', and 'adventure'\n"
        )
        continue
text_to_type = (
    "That's all that's made for now. Thanks for playing!\n\
To get permission to use the"
    " 'I completed the Wings of Fire Interactive Story!' badge, submit a screenshot of"
    " this (your entire screen) to User:Moonwatcher x Qibli"
)
for char in text_to_type:
    sys.stdout.write(char)
    sys.stdout.flush()
    time.sleep(0.025)
if __name__ == "__main__":
    app.run(debug=True)
app.run(host="0.0.0.0", port=81)

index.html
My index.html file holds this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responses</title>
</head>
<body>
    <h1>User Responses</h1>
    <ul>
        {% for response in responses %}
            <li>{{ response }}</li>
        {% endfor %}
    </ul>
</body>
</html>

oh my god that code looks like you copy pasted from like 5 different projects at once.

well if you want the app to start you’ll need to break out of the while loop, so enter the story type in the Console…

you may also run into issues with debug=True, so just delete that bit

1 Like

What do you mean?

okay

So, how do I view the HTML?

you have a forever loop:

and because of that, the app is not starting
so for it to start, either delete that forever loop, or type something in the Console so that it breaks.

just explained ^^^


And for a good explanation on how to use Flask, there are lots of resources here, actually:

https://ask.replit.com/search?expanded=true&q=flask%20%23general%20tags%3Aresource%20in%3Atitle

for beginners,

the while True is there for a reason, so I can’t delete it. How could I edit the code to make it not an indefinite loop? I tried to break it at the end but the break was unreachable for some reason

Where? I still don’t understand how to look at the webview

the thing is, there already is some code to break out of the loop. first, just type a name when it asks your name

then it asks you to put the name of your OC

then say the story type

then the app will start

which will open up the WebView

which will allow you to view the HTML

@QwertyQwerty88 Two questions,

  1. When i get to the point to enter a storytype and i do, nothing happens at all.
  2. When others run the code from the cover page will it take them to the webview, or have them finnish the program?

The point of this code was to record responses to the python program to the webview.

You may want to delete this
There is already an app.run there on default

I lready did per @QwertyQwerty88 suggestion

Maybe you can go {project name, space->hyphen}.{your replit username}.repl.co/

That is the website for the web view, if the ‘you cant see the webview’ means the web view window doesn’t pop up

Pretty sure it will ask them the questions, then show the WebView, but Idk

Are you sure you are choosing “adventure”, “rainforest”, “the rainforest”, or “adventure through the rainforest”?

@DigitalKandra

The reason that nothing was being shown in the rendered page is because you never appended any of the user’s responses to the responses list.

I went in your code and at line 34, added this:

    username = input("What is your name?\n").strip()
    responses.append(username)

And at 58:

OCName = input("What is the name of your OC?\n").strip()
responses.append(OCName)

Unfortunately this will only work in the workspace, not on the Cover Page. On the Cover Page, it just shows a 404 error.