Add minimal frontend dev server
This commit is contained in:
parent
904e0ff20f
commit
ea8fed58e9
12
frontend/package-lock.json
generated
Normal file
12
frontend/package-lock.json
generated
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"name": "beatmatchr-frontend",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"": {
|
||||||
|
"name": "beatmatchr-frontend",
|
||||||
|
"version": "0.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
9
frontend/package.json
Normal file
9
frontend/package.json
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"name": "beatmatchr-frontend",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"description": "Simple development server for the beatmatchr frontend.",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "node server.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
16
frontend/public/index.html
Normal file
16
frontend/public/index.html
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Beatmatchr</title>
|
||||||
|
<link rel="stylesheet" href="/styles.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main class="container">
|
||||||
|
<h1>Beatmatchr</h1>
|
||||||
|
<p>Welcome to the Beatmatchr prototype frontend.</p>
|
||||||
|
<p>This lightweight development server ensures <code>npm run dev</code> works.</p>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
41
frontend/public/styles.css
Normal file
41
frontend/public/styles.css
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
background: radial-gradient(circle at top, #1f2937, #111827 60%);
|
||||||
|
color: #f3f4f6;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
text-align: center;
|
||||||
|
background: rgba(17, 24, 39, 0.7);
|
||||||
|
border: 1px solid rgba(147, 197, 253, 0.2);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 48px;
|
||||||
|
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: rgba(37, 99, 235, 0.2);
|
||||||
|
padding: 0.1rem 0.35rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-family: 'Fira Code', 'Source Code Pro', monospace;
|
||||||
|
}
|
||||||
34
frontend/server.js
Normal file
34
frontend/server.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
const http = require('http');
|
||||||
|
const path = require('path');
|
||||||
|
const fs = require('fs');
|
||||||
|
|
||||||
|
const PORT = process.env.PORT || 5173;
|
||||||
|
const PUBLIC_DIR = path.join(__dirname, 'public');
|
||||||
|
|
||||||
|
function serveFile(res, filePath, contentType = 'text/html') {
|
||||||
|
fs.readFile(filePath, (err, data) => {
|
||||||
|
if (err) {
|
||||||
|
res.writeHead(500, { 'Content-Type': 'text/plain' });
|
||||||
|
res.end('Internal Server Error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
res.writeHead(200, { 'Content-Type': contentType });
|
||||||
|
res.end(data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const server = http.createServer((req, res) => {
|
||||||
|
if (req.url === '/' || req.url === '/index.html') {
|
||||||
|
serveFile(res, path.join(PUBLIC_DIR, 'index.html'));
|
||||||
|
} else if (req.url === '/styles.css') {
|
||||||
|
serveFile(res, path.join(PUBLIC_DIR, 'styles.css'), 'text/css');
|
||||||
|
} else {
|
||||||
|
res.writeHead(404, { 'Content-Type': 'text/plain' });
|
||||||
|
res.end('Not Found');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
server.listen(PORT, () => {
|
||||||
|
console.log(`Beatmatchr frontend available at http://localhost:${PORT}`);
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user