Update package.json and app.ts, fix file validation in bin.ts, and modify index.html

typicode · typicode · commit a74c0c22683f · 2023-12-27T01:35:59.000+01:00
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "css": "tailwindcss -i ./views/input.css -o ./public/output.css",
-    "watch-ts": "tsx watch src/bin.ts db.json",
+    "watch-ts": "tsx watch src/bin.ts fixtures/db.json",
     "watch-css": "npm run css -- --watch",
     "dev": "concurrently npm:watch-*",
     "build": "rm -rf lib && tsc && npm run css",
diff --git a/src/app.ts b/src/app.ts
@@ -33,7 +33,7 @@ export function createApp(db: Low<Data>, options: AppOptions = {}) {
   app.use(json())
 
   // Static files
-  app.use(sirv(join(__dirname, '../public')))
+  app.use(sirv(join(__dirname, '../public'), { dev: !isProduction }))
   options.static
     ?.map((path) => (isAbsolute(path) ? path : join(process.cwd(), path)))
     .forEach((dir) => app.use(sirv(dir, { dev: !isProduction })))
diff --git a/src/bin.ts b/src/bin.ts
@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { readFileSync } from 'node:fs'
+import { existsSync, readFileSync } from 'node:fs'
 import { extname, join } from 'node:path'
 import { parseArgs } from 'node:util'
 
@@ -41,7 +41,7 @@ const { values, positionals } = parseArgs({
 })
 
 if (values.help || positionals.length === 0) {
-  console.log(`Usage: json-server [options] [file]
+  console.log(`Usage: json-server [options] <file>
 Options:
   -p, --port <port>  Port (default: 3000)
   -h, --host <host>  Host (default: localhost)
@@ -59,10 +59,21 @@ if (values.version) {
 }
 
 // App args and options
-const file = positionals[0] ?? 'db.json'
+const file = positionals[0] ?? ''
 const port = parseInt(values.port ?? process.env['PORT'] ?? '3000')
 const host = values.host ?? process.env['HOST'] ?? 'localhost'
 
+// Check file
+if (file === '') {
+  console.log('No file specified')
+  process.exit(1)
+}
+
+if (!existsSync(file)) {
+  console.log(`File ${file} not found`)
+  process.exit(1)
+}
+
 // Set up database
 let adapter: Adapter<Data>
 if (extname(file) === '.json5') {
@@ -95,8 +106,8 @@ if (process.env['NODE_ENV'] !== 'production') {
   observer.onWriteEnd = () => {
     writing = false
   }
-  observer.onReadStart = () => console.log(`reloading ${file}...`)
-  observer.onReadEnd = () => console.log('reloaded')
+  observer.onReadStart = () => console.log(`Reloading ${file}...`)
+  observer.onReadEnd = () => console.log('Reloaded')
   watch(file).on('change', () => {
     // Do no reload if the file is being written to by the app
     if (!writing) {
@@ -114,5 +125,5 @@ if (process.env['NODE_ENV'] !== 'production') {
 
 app.listen(port, () => {
   console.log(`Started on :${port}`)
-  console.log(routes(db))
+  console.log(routes(db).join('\n'))
 })
diff --git a/views/index.html b/views/index.html
@@ -7,26 +7,32 @@
   <link href="/output.css" rel="stylesheet" />
 </head>
 
-<body class="container mx-auto prose">
+<body class="container mx-auto prose pt-6 bg-white text-gray-900">
   <header>
-    <h1>JSON Server [alpha]</h1>
+    <nav class="mx-auto flex items-center justify-between">
+      <strong>JSON Server {:.:}</strong>
+      <div class="flex gap-x-6">
+        <a href="https://github.com/typicode/json-server">
+          <span class="ml-2">GitHub</span>
+        </a>
+        <a href="https://github.com/sponsors/typicode">
+          <span class="ml-2">Sponsor</span>
+        </a>
+      </div>
+    </nav>
   </header>
-  <main>
-    <h2>Routes</h2>
-    <ul class="font-mono">
-      <% Object.entries(it.data).forEach(function([name]) { %>
-        <li>
-          <a href="<%= name %>">
-            /<%= name %>
-          </a>
-        </li>
-        <% }) %>
-    </ul>
+  <main class="my-12">
+    <% if (Object.keys(it.data).length === 0) { %>
+      <p>No resources found in JSON file</p>
+    <% } %>
+    <% Object.entries(it.data).forEach(function([name]) { %>
+      <div class="py-1">
+        <a href="<%= name %>">
+          /<%= name %>
+        </a>
+      </div>
+    <% }) %>
   </main>
-  <footer class="space-x-4">
-    <a href="https://github.com/typicode/json-server">🐱 GitHub</a>
-    <a href="https://github.com/sponsors/typicode">♥ Sponsor</a>
-  </footer>
 </body>
 
 </html>
