Skip to content

Commit 8cc4d3a

Browse files
en3sisen3sis
authored
Docker, formating & dependencies upgrades (#1)
* ops: docker deployment, production-ready, `.editorconfig` & `prettier` improvements
1 parent 786b3c5 commit 8cc4d3a

20 files changed

+514
-269
lines changed

‎.dockerignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎.editorconfig

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
root = true
2+
3+
[*]
4+
end_of_line = lf
5+
insert_final_newline = true
6+
indent_style = space
7+
indent_size = 2

‎.env.template

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
# Supabase
1+
# Please make sure you fill up the following environment variables in your .env file
2+
3+
# 🌏 Next public envs, will leak into the Frontend, be careful
24
NEXT_PUBLIC_SUPABASE_URL=''
35
NEXT_PUBLIC_SUPABASE_ANON=''
46

7+
# 💢 Super secrets stuff, make sure you protect those
8+
NEXT_AUTH_SECRET=''
59
SUPABASE_SERVICE_ROLE=''
610
SUPABASE_JWT=''
711

8-
9-
# Github Auth
12+
# Github Provider
1013
GITHUB_CLIENT_ID=''
1114
GITHUB_CLIENT_SECRET=''

‎.github/ISSUE_TEMPLATE/feature_request.md

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

‎.github/pull_request_template.md

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

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ yarn-debug.log*
2525
yarn-error.log*
2626

2727
# local env files
28+
.env
2829
.env.local
2930
.env.development.local
3031
.env.test.local

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ package-lock.json
66
package.json
77
.next
88
.code
9+
.github

‎.prettierrc

+14-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
{
2-
"trailingComma": "es5",
3-
"tabWidth": 2,
2+
"arrowParens": "always",
3+
"bracketSpacing": true,
4+
"embeddedLanguageFormatting": "auto",
5+
"htmlWhitespaceSensitivity": "css",
6+
"insertPragma": false,
7+
"jsxSingleQuote": true,
8+
"jsxBracketSameLine": true,
9+
"printWidth": 120,
10+
"proseWrap": "preserve",
11+
"quoteProps": "as-needed",
12+
"requirePragma": false,
413
"semi": false,
514
"singleQuote": true,
6-
"jsxSingleQuote": true,
7-
"bracketSpacing": true,
8-
"arrowParens": "always",
9-
"printWidth": 250
15+
"tabWidth": 2,
16+
"trailingComma": "es5",
17+
"useTabs": false
1018
}

‎Dockerfile

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
FROM node:18-alpine AS base
2+
3+
# Install dependencies only when needed
4+
FROM base AS deps
5+
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
6+
RUN apk add --no-cache libc6-compat
7+
WORKDIR /app
8+
9+
# Install dependencies based on the preferred package manager
10+
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
11+
RUN apk add --update python3 make g++\
12+
&& rm -rf /var/cache/apk/*
13+
RUN \
14+
if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
15+
elif [ -f package-lock.json ]; then npm ci; \
16+
elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
17+
else echo "Lockfile not found." && exit 1; \
18+
fi
19+
20+
21+
# Rebuild the source code only when needed
22+
FROM base AS builder
23+
WORKDIR /app
24+
COPY --from=deps /app/node_modules ./node_modules
25+
COPY . .
26+
27+
# Next.js collects completely anonymous telemetry data about general usage.
28+
# Learn more here: https://nextjs.org/telemetry
29+
# Uncomment the following line in case you want to disable telemetry during the build.
30+
ENV NEXT_TELEMETRY_DISABLED 1
31+
ENV YARN_CACHE_FOLDER=/dev/shm/yarn_cache
32+
RUN yarn build
33+
34+
# If using npm comment out above and use below instead
35+
# RUN npm run build
36+
37+
# Production image, copy all the files and run next
38+
FROM base AS runner
39+
WORKDIR /app
40+
41+
ENV NODE_ENV production
42+
# Uncomment the following line in case you want to disable telemetry during runtime.
43+
ENV NEXT_TELEMETRY_DISABLED 1
44+
45+
RUN addgroup --system --gid 1001 nodejs
46+
RUN adduser --system --uid 1001 nextjs
47+
48+
COPY --from=builder /app/public ./public
49+
50+
# Automatically leverage output traces to reduce image size
51+
# https://nextjs.org/docs/advanced-features/output-file-tracing
52+
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
53+
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
54+
55+
USER nextjs
56+
57+
EXPOSE 3000
58+
59+
ENV PORT 3000
60+
61+
CMD ["node", "server.js"]

‎README.md

+20-8
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,14 @@ TypeScript base project with Next.JS as React framework, Supabase with PostgreSQ
66

77
### Features:
88

9-
- Next 13 with app directory (BETA)
9+
- Next 13 with app directory disabled for now (you can enable it)
1010
- GitHub Auth with Next-Auth and Supabase
1111
- Absolute Imports and Module path aliases for Next.js
1212
- Initial state example for Zustand
1313
- Prettier & ESLint rules
1414

15-
### Other dependencies:
16-
17-
- Zustand: https://github.com/pmndrs/zustand
18-
- Tailwind CSS: https://tailwindcss.com/
19-
- Next-Auth: https://next-auth.js.org/
20-
- Supabase: https://supabase.io/
15+
Other libraries used:
16+
[Zustand](https://github.com/pmndrs/zustand) | [TailwindCSS](https://tailwindcss.com/) | [Next-Auth](https://next-auth.js.org/) | [Supabase](https://supabase.io/)
2117

2218
---
2319

@@ -37,7 +33,7 @@ Once you have your Supabase Instance and configuration, you can [generate the ty
3733
```bash
3834
# Install dependencies
3935
yarn install
40-
# or
36+
# Run development server
4137
yarn dev
4238
```
4339

@@ -46,3 +42,19 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
4642
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
4743

4844
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.
45+
46+
### Production
47+
48+
You can deploy your application with [Vercel](https://vercel.com/) or [Docker](https://www.docker.com/)
49+
The image build will be in `standalone` mode with a very small image size.
50+
51+
```bash
52+
# Builds the image, starts the container and expose the app vía nginx
53+
docker-compose up -d
54+
55+
# Stop the container
56+
docker-compose down
57+
```
58+
59+
If you need to rebuild the image, you can use the following command:
60+
`docker-compose up -d --build webapp`

‎app/layout.tsx

-10
This file was deleted.

‎docker-compose.yml

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
version: '3.8'
2+
3+
services:
4+
webapp:
5+
build: .
6+
image: nextwind:latest
7+
restart: always
8+
env_file:
9+
- .env # in case you want to use .env file
10+
environment:
11+
NODE_ENV: production
12+
working_dir: /app
13+
networks:
14+
- nextwind
15+
16+
nginx:
17+
image: nginx
18+
restart: always
19+
ports:
20+
- 80:80
21+
volumes:
22+
- ./nginx.conf:/etc/nginx/nginx.conf
23+
depends_on:
24+
- webapp
25+
networks:
26+
- nextwind
27+
28+
networks:
29+
nextwind:

‎utils/supabase.ts ‎libs/supabase.ts

File renamed without changes.

‎next.config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
module.exports = {
22
reactStrictMode: true,
3-
experimental: { appDir: true },
3+
experimental: { appDir: false }, // It stills buggy, we need to wait for the next release.
4+
output: 'standalone',
45
images: {
56
domains: ['upload.wikimedia.org'],
67
},

‎nginx.conf

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
events {
2+
}
3+
4+
http {
5+
server {
6+
listen 80;
7+
8+
location / {
9+
proxy_pass http://webapp:3000;
10+
proxy_http_version 1.1;
11+
proxy_set_header Upgrade $http_upgrade;
12+
proxy_set_header Connection 'upgrade';
13+
proxy_set_header Host $host;
14+
proxy_cache_bypass $http_upgrade;
15+
}
16+
}
17+
}

‎package.json

+14-14
Original file line numberDiff line numberDiff line change
@@ -15,30 +15,30 @@
1515
},
1616
"dependencies": {
1717
"@next-auth/supabase-adapter": "^0.2.1",
18-
"@supabase/supabase-js": "^2.7.1",
18+
"@supabase/supabase-js": "^2.8.0",
1919
"@types/jsonwebtoken": "^9.0.1",
2020
"eslint-config-prettier": "^8.6.0",
21-
"framer-motion": "^7.6.1",
21+
"framer-motion": "^9.0.7",
2222
"husky": "^8.0.3",
2323
"jsonwebtoken": "^9.0.0",
24-
"next": "^13.1.1",
24+
"next": "^13.1.6",
2525
"next-auth": "^4.19.2",
2626
"react": "^18.2.0",
2727
"react-dom": "^18.2.0",
28-
"zustand": "^4.1.3"
28+
"zustand": "^4.3.3"
2929
},
3030
"devDependencies": {
31-
"@types/node": "^17.0.35",
32-
"@types/react": "^18.0.9",
33-
"@typescript-eslint/eslint-plugin": "^5.48.1",
34-
"@typescript-eslint/parser": "^5.26.0",
31+
"@types/node": "^18.14.0",
32+
"@types/react": "^18.0.28",
33+
"@typescript-eslint/eslint-plugin": "^5.53.0",
34+
"@typescript-eslint/parser": "^5.53.0",
3535
"autoprefixer": "^10.4.12",
36-
"eslint": "8.16.0",
37-
"eslint-config-next": "^13.1.1",
36+
"eslint": "8.34.0",
37+
"eslint-config-next": "^13.1.6",
3838
"postcss": "^8.4.18",
39-
"prettier": "^2.6.2",
40-
"prettier-plugin-organize-imports": "^2.3.4",
41-
"tailwindcss": "^3.2.1",
42-
"typescript": "^4.7.2"
39+
"prettier": "^2.8.4",
40+
"prettier-plugin-organize-imports": "^3.2.2",
41+
"tailwindcss": "^3.2.7",
42+
"typescript": "^4.9.5"
4343
}
4444
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import GitHubProvider from 'next-auth/providers/github'
77
// https://next-auth.js.org/configuration/options
88
export default NextAuth({
99
// https://next-auth.js.org/configuration/providers
10+
secret: process.env.NEXT_AUTH_SECRET,
1011
providers: [
1112
GitHubProvider({
1213
clientId: process.env.GITHUB_CLIENT_ID,
@@ -33,5 +34,4 @@ export default NextAuth({
3334
return session
3435
},
3536
},
36-
// ...
3737
})

‎pages/index.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ export default function IndexPage() {
22
return (
33
<div className='flex flex-col gap-2'>
44
<h1 className='text-2xl'>Welcome!</h1>
5-
<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>
5+
<p>
6+
TypeScript base project with Next.JS as React Framework, Supabase with PostgreSQL as DataBase, Tailwind CSS as
7+
Style Framework, and Zustand for State Management.
8+
</p>
69
</div>
710
)
811
}

0 commit comments

Comments
 (0)