Setting the backend up
I’ve been away for a little while, moving into a new house, so I’m coming back to this with fresh eyes, and mid to high levels of enthusiasm which means this is still worth doing 😅
First step in actually moving this project along is setting up a GitHub repository, which I did here.
Once I got my mac talking to the remote repo, I started thinking about how I should structure the project itself. I’m making no assumptions about the host as I want to be able to “drag and drop” the engine anywhere, so no relative filepaths. No relying on system packages, as not every system is the same!
Docker is the way to go here, but I’m new to Docker and so I had to do some research. Seems like a Dockerfile is exactly what I need in this scenario. Once I get to running a bunch of different things at once, I’ll use Docker Compose, so I can keep everything in sync!
I chose to set the backend up in Flask as it’s what I’m familiar with:
from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
return "Hello is online"
app.run(host="0.0.0.0", port=5000)
Nice and complex 👍
I created my requirements.txt and then jammed all that into a Dockerfile. After I ran docker build and docker run I went down a brief troubleshooting rabbit hole involving some ports being in use on my machine that I didn’t expect, and some autobackup settings confusing docker build.
Happy to say, after adding some files to .dockerignore and tweaking the api, I was able to curl localhost:5000 and see “Hello world!” 🎉
Setting the Frontend up
The frontend is basically an afterthought.. all I need is an input box, and a script loaded into the HTML that calls the authentication endpoint that I’ll create:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Password Submit</title>
</head>
<body>
<h2>Enter Password</h2>
<input type="password" id="password" placeholder="Enter password" />
<button onclick="sendPassword()">Submit</button>
<p id="response"></p>
<script>
async function sendPassword() {
const password = document.getElementById("password").value;
try {
const res = await fetch("http://localhost:5000/api", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ password })
});
const data = await res.json();
document.getElementById("response").innerText = data.message;
} catch (err) {
document.getElementById("response").innerText = "Error connecting to server";
}
}
</script>
</body>
</html>
I’ve run out of time for this post, but to round off;
- I’ve demonstrated setting a micro api up with Docker that I can spin up anywhere
- I’ve designed a simple front end I intend to use for authentication
Next, I’ll be looking at:
- Developing the api to handle simple authentication (later I’ll use it for the ephemeral compute jobs)
- Connecting front to back (I’ll have to revisit this when I start developing a way to play against Stockfish))
- Using Docker Compose to run the two together
Thanks and hope you enjoyed 👋🏻check back in soon for my next post!