Revert to pnpm (#4)

* refactor: use pnpm * fix: biome cmd * feat: docker fixes
risv1 · Oct 25, 2024 · f1a012d · f1a012d
1 parent 9e6e21a
commit f1a012d
Show file tree

Hide file tree

Showing 16 changed files with 8,983 additions and 109 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,5 @@
+node_modules
+.git
+.gitignore
+.nuxt
+dist
diff --git a/Dockerfile b/Dockerfile
@@ -1,27 +1,17 @@
-FROM oven/bun:1.0-slim as builder
+FROM node:20-slim
 
 WORKDIR /app
 
-COPY package.json bun.lockb ./
+RUN npm install -g pnpm
 
-RUN bun install --frozen-lockfile
+COPY package.json pnpm-lock.yaml ./
 
-COPY . .
-
-RUN bun run build
+RUN pnpm install
 
-FROM oven/bun:1.0-slim
-
-WORKDIR /app
+COPY . .
 
-COPY --from=builder /app/.output /app/.output
-COPY --from=builder /app/.nuxt /app/.nuxt
-COPY --from=builder /app/package.json /app/package.json
+RUN pnpm build
 
 EXPOSE 3000
 
-ENV NODE_ENV=production
-
-CMD ["bun", "run", ".output/server/index.mjs"]
-
-
+CMD ["node", ".output/server/index.mjs"]
diff --git a/Makefile b/Makefile
@@ -1,20 +1,29 @@
 run:
-	@bun run dev
+	@pnpm run dev
 
 build-client:
-	@bun run generate
-	@bunx serve .output/public
+	@pnpm run generate
+	@pnpm dlx serve .output/public
+
+start:
+	@pnpm run start
 
 build:
-	@bun run build
-	@bun .output/server/index.mjs 
+	@pnpm run build
+	@node .output/server/index.mjs 
 
 format:
-	@bunx biome format --write ./app ./server
+	@pnpm biome format --write ./app ./server
 
 lint:
-	@bunx biome lint --write ./app ./server 
+	@pnpm biome lint --write ./app ./server 
 
 upgrade-deps:
 	@ncu -u
-	@bun i
+	@pnpm i
+
+up:
+	@docker compose up -d
+
+down:
+	@docker compose down -v
diff --git a/README.md b/README.md
@@ -1,13 +1,12 @@
 # Nuxt 3 Starter Template
 
-A modern Nuxt 3 starter template with Drizzle ORM, Biome, Pinia, Docker, UnoCSS and Bun. This template provides a robust foundation for building full-stack applications with best practices and powerful tools.
+A modern Nuxt 3 starter template with Drizzle ORM, Biome, Pinia, Docker, and UnoCSS. This template provides a robust foundation for building full-stack applications with best practices and powerful tools.
 
 ## 🚀 Stack
 
 ![Nuxt 3 Starter Template](app/public/images/image.png)
 
 - **[Nuxt 3](https://nuxt.com/)** - The Intuitive Vue Framework
-- **[Bun](https://bun.sh/)** - Fast JavaScript runtime & package manager
 - **[UnoCSS](https://unocss.dev/)** - Instant On-demand Atomic CSS Engine
 - **[Drizzle ORM](https://orm.drizzle.team/)** - TypeScript ORM with powerful migrations
 - **[Biome](https://biomejs.dev/)** - Fast linter and formatter

diff --git a/app/app.css b/app/app.css
@@ -0,0 +1,27 @@
+@font-face {
+    font-family: 'Satoshi-Variable';
+    src: url('/fonts/Satoshi-Variable.ttf') format('trueType');
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.border {
+    border-width: 1px;
+    border-style: solid;
+}
+
+.border-2 {
+    border-width: 2px;
+    border-style: solid;
+}
+
+.border-4 {
+    border-width: 4px;
+    border-style: solid;
+}
diff --git a/app/app.vue b/app/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="font-satoshi">
+  <div class="font-satoshi w-full h-full">
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>

diff --git a/app/components/Hero.vue b/app/components/Hero.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
 const icons = [
+	{
+		name: "nuxt",
+		iconName: "logos:nuxt-icon",
+		label: "Nuxt",
+	},
 	{
 		name: "pinia",
 		iconName: "logos:pinia",
@@ -20,11 +25,6 @@ const icons = [
 		iconName: "logos:docker-icon",
 		label: "Docker",
 	},
-	{
-		name: "bun",
-		iconName: "devicon:bun",
-		label: "Bun",
-	},
 	{
 		name: "unocss",
 		iconName: "logos:unocss",
@@ -34,31 +34,23 @@ const icons = [
 </script>
 
 <template>
-    <section class="bg-inherit w-full h-full justify-center overflow-auto items-center flex flex-col">
-        <div class="max-w-6xl mx-auto flex flex-col items-center">
-            <div class="flex flex-col items-center gap-4 ">
-                <Icon name="mdi:nuxt" class="text-green-500 w-16 h-16" />
-                <h1 class="dark:text-gray-100 text-gray-900 text-4xl font-bold">Nuxt Starter</h1>
-            </div>
-            <div class="grid grid-cols-1 text-gray-900 dark:text-gray-100 md:grid-cols-3 gap-4 w-full max-w-4xl">
-                <div v-for="icon in icons"
-                    class="dark:bg-neutral-800/50 bg-gray-100 p-6 rounded-xl border-2 border-neutral-700/50 hover:border-green-500">
-                    <div class="flex flex-col items-center gap-3">
-                        <Icon :name="icon.iconName" :class="icon.name == 'drizzle' ? 'text-yellow-400' : ''"
-                            class="w-12 h-12 group-hover:scale-110" />
-                        <span class="font-medium">{{ icon.label }}</span>
-                    </div>
-                </div>
-                <div
-                    class="md:col-span-3 dark:bg-neutral-800/50 bg-gray-100 p-6 rounded-xl border-2 border-neutral-700/50 hover:border-green-500">
-                    <div class="flex flex-col items-center gap-3">
-                        <Icon name="mdi:nuxt"
-                            class="w-12 h-12 text-green-500 group-hover:scale-110 transition-transform" />
-                        <span class="font-medium">Nuxt 3</span>
-                    </div>
-                </div>
-            </div>
-            <Counter />
-        </div>
-    </section>
+	<section class="bg-inherit w-full h-full justify-center overflow-auto items-center flex flex-col">
+		<div class="max-w-6xl mx-auto flex flex-col items-center">
+			<div class="flex flex-col items-center gap-4 ">
+				<Icon name="logos:nuxt-icon" class="text-green-500 w-16 h-16" />
+				<h1 class="dark:text-gray-100 text-gray-900 text-4xl font-bold">Nuxt Starter</h1>
+			</div>
+			<div class="grid grid-cols-1 text-gray-900 dark:text-gray-100 md:grid-cols-3 gap-4 w-full max-w-4xl">
+				<div v-for="icon in icons"
+					class="dark:bg-neutral-800/50 bg-gray-100 p-6 rounded-xl border-2 border-neutral-700/50 hover:border-green-500">
+					<div class="flex flex-col items-center gap-3">
+						<Icon :name="icon.iconName" :class="icon.name == 'drizzle' ? 'text-yellow-400' : ''"
+							class="w-12 h-12 group-hover:scale-110" />
+						<span class="font-medium">{{ icon.label }}</span>
+					</div>
+				</div>
+			</div>
+			<Counter />
+		</div>
+	</section>
 </template>
diff --git a/app/public/images/image.png b/app/public/images/image.png
diff --git a/bun.lockb b/bun.lockb
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -5,9 +5,6 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    volumes:
-      - .:/app
-      - /app/node_modules
     ports:
       - "3000:3000"
 

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -11,4 +11,8 @@ export default defineNuxtConfig({
     '@pinia/nuxt',
     '@pinia-plugin-persistedstate/nuxt'
   ],
+  unocss: {
+    nuxtLayers: true,
+  },
+  css: ['./app/app.css'],
 })
diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "db:generate": "drizzle-kit generate",
-    "db:push": "drizzle-kit push"
+    "db:push": "drizzle-kit push",
+    "start": "node .output/server/index.mjs"
   },
   "dependencies": {
     "@nuxt/icon": "^1.5.6",
@@ -19,6 +20,7 @@
     "@types/better-sqlite3": "^7.6.11",
     "@types/jsonwebtoken": "^9.0.7",
     "@types/uuid": "^10.0.0",
+    "@unocss/core": "^0.63.6",
     "@unocss/nuxt": "^0.63.6",
     "@vueuse/core": "^11.1.0",
     "@vueuse/nuxt": "^11.1.0",
@@ -39,8 +41,6 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
-    "@types/bun": "^1.1.12",
-    "bun-types": "^1.1.33"
+    "@biomejs/biome": "1.9.4"
   }
 }