Linking html text and other text data to a separate file

(this is a personal project that I want my fellow friends and classmates to be able to do at school, as I said its a personal project not an assigned school project)I have a repl that’s a string of puzzles and that the user is timed on how fast they can get through them all. I want to be able to save the amount of time and their name which they enter afterwards, in a separate file for me to view when ever and I want them to stay there permanently afterwards unless deleted, I know about flask but I don’t know how to move and edit things to work with flask b/c my pages arnt made to work separately with the html files in a separate folder from the css and js files in another folder. trust me I tried/tested them by putting the html files into a folder separate from the css and js files in another folder. any help or suggestions would be greatly appreciated.

You just have to organize the files according to the Flask structure.

/project folder

After that you just update the paths to CSS and JavaScript files.
Remember that you must reference the directories in the .py file like

from flask import Flask, render_template, request, redirect, url_for, etc

i sorta understand, the parts that are confusing is first, referencing the directories and then the last one is exactly how to organize the files, i know you gave a basic example but im a bit confused still, also just a thought, is it possible to make a new replit project that I send the data from the first replit that gets the data to the new one

1 Like

You just have to remember that:

Static Files : These are your CSS, JavaScript, and image files. And Flask kinda expects these to be in a folder named static by default.

The same applies to Templates: Flask uses the Jinja2 templating engine to render HTML. So, all HTML files should go into a folder named templates .

To link CSS/JavaScript in your HTML files, you use Flask’s url_for function (this help flask to find the file), for example:

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script src="{{ url_for('static', filename='js/script.js') }}"></script>

Yes, just set up a basic API in the second project to receive data. You can use AJAX/Flask to make the iteration between the two projects.


Thank you so much, I still have a few clarification questions to ask, first the linking the files would it be like href="{{ url_for(‘static’, filename=‘home_page.css’) like how does it know which one to connect to, also for the separate project would I need to deploy it.

This looks under the folder called static, for a file called home_page.css.

1 Like

Ok i just wanted to be sure that i didnt have to put the css/style part in there, but going back to my second question i had, would i need to deploy the second project being used as the database.

Probably, if not, I’m not too sure how you would do it without it being deployed.
You could make Selenium enter the repl and press the run button for you, but that’s against Replit’s ToS, so I wouldn’t try that option.

how would I make a flask API that would work as a database

You can use ReplitDB or Object Storage here on Replit.
You could also use Google Firebase’s Firestore.
Hope this helps!

Sorry for the delay, you can use @NateDhaliwal answer as reference, he gave good options for use.

where would I find these and how do I use them.

Object Storage:
The information is on these sites.


So I have a quick question, one, for these, would I need to deploy this project, and two, would the data stay even if someone else accessed the site and left, would I be able to view the amount of time it took them to complete the puzzles. Also I really appreciate all the help you guys have been providing me, and I hope I’m not being to pushy/ asking to much and bothering you guys, either way thanks you and I would love all your help in the future.

All the databases I mentioned above will save data, no matter the user or re-deployment.

I suppose so, as it won’t work if you stop running the repl.