boilerplate solidjs client and a simple socket.io/express server

lukedigiovanna · Apr 19, 2024 · 62299e0 · 62299e0
commit 62299e0
Show file tree

Hide file tree

Showing 23 changed files with 302 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+
+pnpm-lock.yaml
diff --git a/client/.gitignore b/client/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/client/README.md b/client/README.md
@@ -0,0 +1,34 @@
+## Usage
+
+Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
+
+This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev` or `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <title>Solid App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>
diff --git a/client/package.json b/client/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "vite-template-solid",
+  "version": "0.0.0",
+  "description": "",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "build:watch": "vite build --watch --emptyOutDir",
+    "serve": "vite preview"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "solid-devtools": "^0.29.2",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vite-plugin-solid": "^2.8.2"
+  },
+  "dependencies": {
+    "@solidjs/router": "^0.13.2",
+    "solid-js": "^1.8.11"
+  }
+}
diff --git a/client/postcss.config.js b/client/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -0,0 +1,20 @@
+import { lazy, type Component } from 'solid-js';
+
+import { Route, Router } from "@solidjs/router";
+
+// import Home from './pages/Home';
+// import Game from './pages/Game';
+
+const Home = lazy(() => import("./pages/Home"))
+const Game = lazy(() => import("./pages/Game"))
+
+const App: Component = () => {
+  return (
+    <Router>
+      <Route path="/" component={Home}/>
+      <Route path="/game/:id" component={Game}/>
+    </Router>
+  );
+};
+
+export default App;
diff --git a/client/src/index.css b/client/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -0,0 +1,15 @@
+import { render } from 'solid-js/web';
+
+import "./index.css";
+
+import App from './App';
+
+const root = document.getElementById('root');
+
+if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
+  throw new Error(
+    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
+  );
+}
+
+render(() => <App />, root!);
diff --git a/client/src/pages/Game.tsx b/client/src/pages/Game.tsx
@@ -0,0 +1,17 @@
+import type { Component } from "solid-js";
+
+import { useParams } from "@solidjs/router";
+
+const Game: Component = () => {
+    const params = useParams();
+
+    return <>
+        <div>
+            Game
+
+            <p>id: {params.id}</p>
+        </div>
+    </>
+}
+
+export default Game;
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
@@ -0,0 +1,12 @@
+import type { Component } from "solid-js";
+
+const Home: Component = () => {
+    return <>
+        <div>
+            Hello
+            <a href="/game/fuck">Click me</a>
+        </div>
+    </>
+}
+
+export default Home;
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "types": ["vite/client"],
+    "noEmit": true,
+    "isolatedModules": true,
+  },
+}
diff --git a/client/vite.config.ts b/client/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import solidPlugin from 'vite-plugin-solid';
+// import devtools from 'solid-devtools/vite';
+
+export default defineConfig({
+  plugins: [
+    solidPlugin(),
+  ],
+  build: {
+    target: 'esnext',
+    outDir: "../server/public_html"
+  },
+});
diff --git a/server/package.json b/server/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "ts-node src/index.ts",
+    "dev": "npx nodemon --exec ts-node src/index.ts"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "nodemon": "^3.1.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.5"
+  },
+  "dependencies": {
+    "express": "^4.19.2",
+    "join": "^3.0.0",
+    "path": "^0.12.7",
+    "socket.io": "^4.7.5"
+  }
+}
diff --git a/server/public_html/assets/Game-W9Uid2N0.js b/server/public_html/assets/Game-W9Uid2N0.js
diff --git a/server/public_html/assets/Home-Z5TWT8ds.js b/server/public_html/assets/Home-Z5TWT8ds.js
@@ -0,0 +1 @@
+import{t as e}from"./index-XWT_Xj9B.js";var t=e("<div>Hello<a href=/game/fuck>Click me");const m=()=>t();export{m as default};
diff --git a/server/public_html/assets/index-TE0QHHZ5.css b/server/public_html/assets/index-TE0QHHZ5.css
diff --git a/server/public_html/assets/index-XWT_Xj9B.js b/server/public_html/assets/index-XWT_Xj9B.js
diff --git a/server/public_html/index.html b/server/public_html/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <title>Solid App</title>
+    <script type="module" crossorigin src="/assets/index-XWT_Xj9B.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-TE0QHHZ5.css">
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+  </body>
+</html>
diff --git a/server/src/index.ts b/server/src/index.ts
@@ -0,0 +1,32 @@
+import express from "express";
+import { createServer } from "http";
+import { join } from "path";
+import { Socket, Server as SocketServer } from "socket.io";
+
+const port = 3000;
+
+const app = express();
+app.use(express.static(join(process.cwd(), "public_html")));
+
+app.get('*', (req, res) => {
+    res.sendFile(join(process.cwd(), 'public_html', 'index.html'));
+});
+
+const server = createServer(app);
+
+const io = new SocketServer(server);
+
+io.on("connection", (socket: Socket) => {
+    socket.on("disconnect", () => {
+        console.log(socket.id, "disconnected");
+    });
+
+    socket.on("register", (clientID: string) => {
+        console.log("Client registered with ID: " + clientID);
+    })
+});
+
+server.listen(port, () => {
+    console.log(`Started server on http://localhost:${port}`);
+});
+
diff --git a/server/tsconfig.json b/server/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es2016",                                  
+    "module": "commonjs",                                
+    "esModuleInterop": true,                             
+    "forceConsistentCasingInFileNames": true,            
+    "strict": true,                                      
+    "skipLibCheck": true,
+    "paths": {
+      "@shared/*": ["../shared/*"]
+    }
+  }
+}
diff --git a/shared/models.ts b/shared/models.ts
@@ -0,0 +1,16 @@
+interface Player {
+    id: string;
+    username: string;
+    points: 0;
+    connected: false;
+    selectedArticle: string | null;
+}
+
+interface Game {
+    players: Player[];
+    host: number;
+    currentArticle: string | null;
+    inRound: boolean;
+}
+
+export { Player, Game };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import{t as e}from"./index-XWT_Xj9B.js";var t=e("<div>Hello<a href=/game/fuck>Click me");const m=()=>t();export{m as default};