Question posted in 
I’ve tried to figure out how to do it and I give up. I’m trying to code something that allows users to visit my github website and type into a textbox, then the website stores their output into a text file located into the website. I found out you could use a node.js module "fs" to append text into that file, so I tried to implement it. But its just not working no matter what I try. Right now, its giving me the error "require() is not a function" and I seriously don’t understand what the problem is. Any help would be appreciated.
My code: (Pasting the entire html file, just for better help.)
<html><head>
<meta property="og:title" content="OTFT: The Videogame Official Website">
<meta property="og:description" content="The Official Website for OTFT!">
<meta property="og:image:secure_url" content="https://otft.github.io/otft_tvg/images/OTFTSquare.png">
<title>OTFT: The Videogame</title>
<link rel="icon" href="../images/iconv1.png">
<style>
h1 {
font-size: 50px;
font-family: FlamingHope;
}
h2 {
font-size: 40px;
font-family: Blackentina;
}
body {
padding:0;
margin:0;
width:100%;
height:100%;
background-image: url("../images/WebsiteBackground02.png");
background-size: cover;
background-repeat: repeat-y;
background-position: center;
background-color: rgba(0,0,0,0.6);
}
p {
font-family: Tomorrow;
font-size:25px;
}
text {
font-family: Blackentina;
font-size:70px;
color:red;
offset-position:50px;
}
a {
font-family: Blackentina;
font-size: 30px;
color:red;
}
div {
display: block;
unicode-bidi: isolate;
}
@font-face {
font-family: FlamingHope;
src: url("../FlamingHope.ttf") format("opentype");
}
@font-face {
font-family: AnotherDanger;
src: url("../another danger.otf") format("opentype");
}
@font-face {
font-family: AnotherDanger;
font-weight: italics;
src: url("../another danger italics.otf") format("opentype");
}
@font-face {
font-family: Blackentina;
src: url("../Blackentina 4F.ttf") format("opentype");
}
@font-face {
font-family: Blackentina;
font-weight: italics;
src: url("../Blackentina 4F-Italic.ttf") format("opentype");
}
@font-face {
font-family: Tomorrow;
src: url("../Tomorrow.ttf") format("opentype");
}
@font-face {
font-family: Tomorrow;
font-weight: italics;
src: url("../Tomorrow-Italic.ttf") format("opentype");
}
@font-face {
font-family: Tomorrow;
font-weight: bold;
src: url("../Tomorrow-Bold.ttf") format("opentype");
}
</style>
</head><body><center><div id="headerthingie" style="background-color: black;color: white;display: flex;justify-content: center;align-items: center;flex-direction: column;"><h1 style="font-size:40px;">OTFT: The Videogame</h1><template id="weblinksDiv"></template><script type="text/javascript" src="../reusedivfix.js"></script></div>
<div style="width:700px;display: block;"><h1>FAQ</h1>
<p>For now, the FAQ will be stored in a file that I will check for new entries! Later on, I will update the website to display the questions.</p>
<textarea id="inputQuestion" rows="4" cols="50" placeholder="Question goes here..."></textarea>
<br>
<input type="submit" value="Submit" onclick="submitData()">
</center>
<br>
<div id="footerthingie" style="background-color: black;color: white;display: flex;justify-content: center;align-items: center;flex-direction: column;position: relative;bottom: 0px;width: 100%;"><template id="weblinksDiv01"></template><script type="text/javascript" src="../reusablesubdiv.js"></script><p style="height:20px;font-size:20px;">ⓒ OTFT Studios 2024</p></div>
</body>
<script type="module">
window.submitData = submitData();
import * as require from 'https://requirejs.org/docs/release/2.3.5/minified/require.js';
function submitData() {
var fs = require('node:fs');
let newData = "n" + document.getElementById("inputQuestion").value;
fs.appendFile('storeduserdata.txt', newData, (err) => {
if (err) throw err;
})
}
</script>
</html>
I tried a couple things, like double checking spelling, or my semi-colons, or reorganizing where everything goes. I’ve also consulted google to try and find my way around coding this, but now I’m stuck here.
3
Answers
You’re trying to implement server-side code (with nodeJS modules) within a browser client context.
Github Pages, like every static hosting service, doesn’t support server-side code execution.
You can only serve static HTML, CSS, and client-side JavaScript.
You need a proper server.
Also you’re assigning
window.submitData = submitData();before its declaration, but that’s the least of your worries for the time on.If you need a starting point, you could check a web framework like sveltekit with a github pages adapter since that’s where you want your pages hosted. Then you could rely on a third party service to store data, you have plenty of options ranging from remote databases, custom servers, key/values simple stores etc.
Be aware that it may take some time to grasp those concepts (in case you needed to quickly achieve something).
You’re trying to implement server-side code (with nodeJS modules) within a browser client context. If you want to make this you can use server side engines like expressjs
The code you are trying to write that uses the require() function belongs to the server side, but right now, you are trying to write it on the client side. In order to make it work, create the server Node.js app, write the same logic there, and then call the API corresponding from the client side.