Docker, formating & dependencies upgrades (#1)

* ops: docker deployment, production-ready, `.editorconfig` & `prettier` improvements

.dockerignore

@@ -0,0 +1 @@
+node_modules

.editorconfig

@@ -0,0 +1,7 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2

.env.template

@@ -1,11 +1,14 @@
-# Supabase
+# Please make sure you fill up the following environment variables in your .env file
+
+# 🌏 Next public envs, will leak into the Frontend, be careful
 NEXT_PUBLIC_SUPABASE_URL=''
 NEXT_PUBLIC_SUPABASE_ANON=''
 
+# 💢 Super secrets stuff, make sure you protect those
+NEXT_AUTH_SECRET=''
 SUPABASE_SERVICE_ROLE=''
 SUPABASE_JWT=''
 
-
-# Github Auth
+# Github Provider
 GITHUB_CLIENT_ID=''
 GITHUB_CLIENT_SECRET=''

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,15 @@
+---
+name: Feature request & tasks
+about: Suggest an idea, feature or create a task for this project
+title: Your title here
+labels: needs triage
+---
+
+**📝 Is your feature request related to a problem? Please describe.**
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
+
+**💠 Describe the solution you'd like**
+<!-- A clear and concise description of what you want to happen. -->
+
+**🔆 Additional context**
+<!-- Add any other context or screenshots about the feature request here. -->

.github/pull_request_template.md

@@ -0,0 +1,22 @@
+Fix: #PR_NUMBER
+
+---
+
+**IMPORTANT: Please do not create a Pull Request without creating an issue first.**
+
+> _Any change needs to be discussed before proceeding. Failure to do so may result in the rejection of the pull request._
+
+
+## 🧬 Details
+
+> Explain the details for making this change. What existing problem does the pull request solve?
+<!-- Example: When "Adding a function to do X", explain why it is necessary to have a way to do X. -->
+
+## 🧪 Testing
+> Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.
+
+---
+
+Checkboxes:
+
+- [ ] I ran `yarn lint` and there were no errors

.gitignore

@@ -25,6 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

.prettierignore

@@ -6,3 +6,4 @@ package-lock.json
 package.json
 .next
 .code
+.github

.prettierrc

@@ -1,10 +1,18 @@
 {
-  "trailingComma": "es5",
-  "tabWidth": 2,
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxSingleQuote": true,
+  "jsxBracketSameLine": true,
+  "printWidth": 120,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
   "semi": false,
   "singleQuote": true,
-  "jsxSingleQuote": true,
-  "bracketSpacing": true,
-  "arrowParens": "always",
-  "printWidth": 250
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
 }

Dockerfile

@@ -0,0 +1,61 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN apk add --update python3 make g++\
+   && rm -rf /var/cache/apk/*
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+ENV NEXT_TELEMETRY_DISABLED 1
+ENV YARN_CACHE_FOLDER=/dev/shm/yarn_cache
+RUN yarn build
+
+# If using npm comment out above and use below instead
+# RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["node", "server.js"]

README.md

@@ -6,18 +6,14 @@ TypeScript base project with Next.JS as React framework, Supabase with PostgreSQ
 
 ### Features:
 
-- Next 13 with app directory (BETA)
+- Next 13 with app directory disabled for now (you can enable it)
 - GitHub Auth with Next-Auth and Supabase
 - Absolute Imports and Module path aliases for Next.js
 - Initial state example for Zustand
 - Prettier & ESLint rules
 
-### Other dependencies:
-
-- Zustand: https://github.com/pmndrs/zustand
-- Tailwind CSS: https://tailwindcss.com/
-- Next-Auth: https://next-auth.js.org/
-- Supabase: https://supabase.io/
+Other libraries used:
+[Zustand](https://github.com/pmndrs/zustand) | [TailwindCSS](https://tailwindcss.com/) | [Next-Auth](https://next-auth.js.org/) | [Supabase](https://supabase.io/)
 
 ---
 
@@ -37,7 +33,7 @@ Once you have your Supabase Instance and configuration, you can [generate the ty
 ```bash
 # Install dependencies
 yarn install
-# or
+# Run development server
 yarn dev
 ```
 
@@ -46,3 +42,19 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
 The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+### Production
+
+You can deploy your application with [Vercel](https://vercel.com/) or [Docker](https://www.docker.com/)
+The image build will be in `standalone` mode with a very small image size.
+
+```bash
+# Builds the image, starts the container and expose the app vía nginx
+docker-compose up -d
+
+# Stop the container
+docker-compose down
+```
+
+If you need to rebuild the image, you can use the following command:
+`docker-compose up -d --build webapp`

docker-compose.yml

@@ -0,0 +1,29 @@
+version: '3.8'
+
+services:
+  webapp:
+    build: .
+    image: nextwind:latest
+    restart: always
+    env_file:
+      - .env # in case you want to use .env file
+    environment:
+      NODE_ENV: production
+    working_dir: /app
+    networks:
+      - nextwind
+
+  nginx:
+    image: nginx
+    restart: always
+    ports:
+      - 80:80
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf
+    depends_on:
+      - webapp
+    networks:
+      - nextwind
+
+networks:
+  nextwind:

next.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   reactStrictMode: true,
-  experimental: { appDir: true },
+  experimental: { appDir: false }, // It stills buggy, we need to wait for the next release.
+  output: 'standalone',
   images: {
     domains: ['upload.wikimedia.org'],
   },

nginx.conf

@@ -0,0 +1,17 @@
+events {
+}
+
+http {
+  server {
+    listen 80;
+
+    location / {
+      proxy_pass http://webapp:3000;
+      proxy_http_version 1.1;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection 'upgrade';
+      proxy_set_header Host $host;
+      proxy_cache_bypass $http_upgrade;
+    }
+  }
+}

package.json

@@ -15,30 +15,30 @@
   },
   "dependencies": {
     "@next-auth/supabase-adapter": "^0.2.1",
-    "@supabase/supabase-js": "^2.7.1",
+    "@supabase/supabase-js": "^2.8.0",
     "@types/jsonwebtoken": "^9.0.1",
     "eslint-config-prettier": "^8.6.0",
-    "framer-motion": "^7.6.1",
+    "framer-motion": "^9.0.7",
     "husky": "^8.0.3",
     "jsonwebtoken": "^9.0.0",
-    "next": "^13.1.1",
+    "next": "^13.1.6",
     "next-auth": "^4.19.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "zustand": "^4.1.3"
+    "zustand": "^4.3.3"
   },
   "devDependencies": {
-    "@types/node": "^17.0.35",
-    "@types/react": "^18.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.26.0",
+    "@types/node": "^18.14.0",
+    "@types/react": "^18.0.28",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
     "autoprefixer": "^10.4.12",
-    "eslint": "8.16.0",
-    "eslint-config-next": "^13.1.1",
+    "eslint": "8.34.0",
+    "eslint-config-next": "^13.1.6",
     "postcss": "^8.4.18",
-    "prettier": "^2.6.2",
-    "prettier-plugin-organize-imports": "^2.3.4",
-    "tailwindcss": "^3.2.1",
-    "typescript": "^4.7.2"
+    "prettier": "^2.8.4",
+    "prettier-plugin-organize-imports": "^3.2.2",
+    "tailwindcss": "^3.2.7",
+    "typescript": "^4.9.5"
   }
 }

pages/api/auth/[...nextauth].ts

@@ -7,6 +7,7 @@ import GitHubProvider from 'next-auth/providers/github'
 // https://next-auth.js.org/configuration/options
 export default NextAuth({
   // https://next-auth.js.org/configuration/providers
+  secret: process.env.NEXT_AUTH_SECRET,
   providers: [
     GitHubProvider({
       clientId: process.env.GITHUB_CLIENT_ID,
@@ -33,5 +34,4 @@ export default NextAuth({
       return session
     },
   },
-  // ...
 })

pages/index.tsx

@@ -2,7 +2,10 @@ export default function IndexPage() {
   return (
     <div className='flex flex-col gap-2'>
       <h1 className='text-2xl'>Welcome!</h1>
-      <p>TypeScript base project with Next.JS as React Framework, Supabase with PostgreSQL as DataBase, Tailwind CSS as Style Framework, and Zustand for State Management.</p>
+      <p>
+        TypeScript base project with Next.JS as React Framework, Supabase with PostgreSQL as DataBase, Tailwind CSS as
+        Style Framework, and Zustand for State Management.
+      </p>
     </div>
   )
 }