/sveltekit_tailwindcss_supabase_bolierplate

SvelteKit + Tailwind CSS + Supabase Boilerplate πŸš€

Primary LanguageShellOtherNOASSERTION

Introduction in English

SvelteKit + Tailwind CSS + Supabase Boilerplate πŸš€

This boilerplate provides a quick and easy setup for building modern web applications using SvelteKit, Tailwind CSS, and Supabase. It comes preconfigured with essential libraries and tools to help you kickstart your project in no time! ⚑

Features 🌟

  • SvelteKit for building fast and lightweight web applications 🌐
  • Tailwind CSS for rapid UI development with utility-first classes 🎨
  • Supabase integration for seamless backend and database management πŸ—„οΈ
  • Environment variable setup for secure configuration πŸ”’
  • Preconfigured project structure for easy navigation and development πŸ“‚

Getting Started 🏁

  1. Clone the repository:
git clone https://github.com/yourusername/sveltekit-tailwindcss-supabase-boilerplate.git
  1. Install dependencies
cd sveltekit-tailwindcss-supabase-boilerplate
npm install
  1. Set up environment variables: Create a .env file in the root directory and add the following variables:
VITE_SUPABASE_URL=your-supabase-url
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key
  1. Configure Vite: Update the vite.config.js file with the following configuration:
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    host: '0.0.0.0',
    port: 4173,
  },
});
  1. Configure Nginx:
server {
  listen 80;
  server_name db.corp.reviews;
  return 301 https://$server_name$request_uri;
}

server {
  listen 443 ssl;
  server_name YOUR_DOMAIN_NAME;
  ssl_certificate /your/letsencrypt/fullchain/key/path/fullchain.pem;
  ssl_certificate_key /your/letsencrypt/private/key/path/.pem;privkey.pem;

  location / {
    proxy_pass http://localhost:5173;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    # WebSocket ν”„λ‘μ‹œ μ„€μ • μΆ”κ°€
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}
  1. Set up Supabase client:

Update the src/lib/supabaseClient.js file with the following code:

import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
);
  1. Start the development server:
npm run dev

Your application should now be running at http://localhost:5173. If you have an issue to access your application through local address, then try through network address instead.

Documentation πŸ“š

For more information on setting up and configuring the individual components of this boilerplate, refer to the following documentation:

Project Structure πŸ“

.
β”œβ”€β”€ README.md
β”œβ”€β”€ package.json
β”œβ”€β”€ postcss.config.js
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ app.css
β”‚   β”œβ”€β”€ app.html
β”‚   β”œβ”€β”€ lib
β”‚   β”‚   β”œβ”€β”€ index.js
β”‚   β”‚   └── supabaseClient.js
β”‚   └── routes
β”‚       β”œβ”€β”€ +layout.svelte
β”‚       β”œβ”€β”€ +page.server.js
β”‚       └── +page.svelte
β”œβ”€β”€ static
β”‚   β”œβ”€β”€ favicon.png
β”‚   β”œβ”€β”€ supabase.png
β”‚   β”œβ”€β”€ svelte.png
β”‚   └── tailwindcss.png
β”œβ”€β”€ svelte.config.js
β”œβ”€β”€ tailwind.config.js
└── vite.config.js

Contributing 🀝

Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue or submit a pull request.

License πŸ“„

This project is licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0) License. See the LICENSE file for more details.

ν•œκ΅­μ–΄ μ†Œκ°œ

SvelteKit + Tailwind CSS + Supabase λ³΄μΌλŸ¬ν”Œλ ˆμ΄νŠΈ πŸš€

이 λ³΄μΌλŸ¬ν”Œλ ˆμ΄νŠΈλŠ” SvelteKit, Tailwind CSS 및 Supabaseλ₯Ό μ‚¬μš©ν•˜μ—¬ ν˜„λŒ€μ μΈ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λΉ λ₯΄κ³  μ‰½κ²Œ ꡬ좕할 수 μžˆλ„λ‘ μ œκ³΅ν•©λ‹ˆλ‹€. ν•„μˆ˜ λΌμ΄λΈŒλŸ¬λ¦¬μ™€ 도ꡬ가 사전 κ΅¬μ„±λ˜μ–΄ μžˆμ–΄ ν”„λ‘œμ νŠΈλ₯Ό λΉ λ₯΄κ²Œ μ‹œμž‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€! ⚑

νŠΉμ§• 🌟

  • SvelteKit을 μ‚¬μš©ν•˜μ—¬ λΉ λ₯΄κ³  κ°€λ²Όμš΄ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜ ꡬ좕 🌐
  • Tailwind CSSλ₯Ό μ‚¬μš©ν•˜μ—¬ μœ ν‹Έλ¦¬ν‹° μš°μ„  클래슀둜 μ‹ μ†ν•œ UI 개발 🎨
  • Supabase ν†΅ν•©μœΌλ‘œ μ›ν™œν•œ λ°±μ—”λ“œ 및 λ°μ΄ν„°λ² μ΄μŠ€ 관리 πŸ—„οΈ
  • μ•ˆμ „ν•œ ꡬ성을 μœ„ν•œ ν™˜κ²½ λ³€μˆ˜ μ„€μ • πŸ”’
  • μ‰¬μš΄ 탐색 및 κ°œλ°œμ„ μœ„ν•œ 사전 κ΅¬μ„±λœ ν”„λ‘œμ νŠΈ ꡬ쑰 πŸ“‚

μ‹œμž‘ν•˜κΈ° 🏁

  1. μ €μž₯μ†Œ 볡제:

git clone https://github.com/yourusername/sveltekit-tailwindcss-supabase-boilerplate.git

  1. 쒅속성 μ„€μΉ˜:
  cd sveltekit-tailwindcss-supabase-boilerplate
  npm install
  1. ν™˜κ²½ λ³€μˆ˜ μ„€μ •:

루트 디렉토리에 .env νŒŒμΌμ„ μƒμ„±ν•˜κ³  λ‹€μŒ λ³€μˆ˜λ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€:

  VITE_SUPABASE_URL=your-supabase-url
  VITE_SUPABASE_ANON_KEY=your-supabase-anon-key

your-supabase-project-id와 your-supabase-api-keyλ₯Ό μ‹€μ œ Supabase ν”„λ‘œμ νŠΈ ID와 API ν‚€λ‘œ λŒ€μ²΄ν•©λ‹ˆλ‹€. 4. Vite ꡬ성: vite.config.js νŒŒμΌμ„ λ‹€μŒκ³Ό 같이 μ—…λ°μ΄νŠΈν•©λ‹ˆλ‹€:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    host: '0.0.0.0',
    port: 4173,
  },
});
  1. Nginx ꡬ성: λ‹€μŒ λ‚΄μš©μœΌλ‘œ /etc/nginx/sites-available/corpreviews-db.conf Nginx ꡬ성 νŒŒμΌμ„ μƒμ„±ν•©λ‹ˆλ‹€:
server {
  listen 80;
  server_name db.corp.reviews;
  return 301 https://$server_name$request_uri;
}

server {
  listen 443 ssl;
  server_name db.corp.reviews;
  ssl_certificate /etc/letsencrypt/live/db.corp.reviews/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/db.corp.reviews/privkey.pem;

  location / {
    proxy_pass http://localhost:5173;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    # WebSocket ν”„λ‘μ‹œ μ„€μ • μΆ”κ°€
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}
  1. Supabase ν΄λΌμ΄μ–ΈνŠΈ μ„€μ •: src/lib/supabaseClient.js νŒŒμΌμ„ λ‹€μŒκ³Ό 같이 μ—…λ°μ΄νŠΈν•©λ‹ˆλ‹€:
import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
);
  1. 개발 μ„œλ²„ μ‹œμž‘:
  npm run dev

이제 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ http://localhost:5173μ—μ„œ μ‹€ν–‰λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€. 둜컬 μ–΄λ“œλ ˆμŠ€ 접근에 λ¬Έμ œκ°€ λ°œμƒν•œλ‹€λ©΄, λ„€νŠΈμ›Œν¬ μ£Όμ†Œλ₯Ό μ΄μš©ν•΄ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ— μ ‘κ·Όν•΄λ³΄μ„Έμš”.s

λ¬Έμ„œ πŸ“š

이 λ³΄μΌλŸ¬ν”Œλ ˆμ΄νŠΈμ˜ κ°œλ³„ ꡬ성 μš”μ†Œ μ„€μ • 및 ꡬ성에 λŒ€ν•œ μžμ„Έν•œ λ‚΄μš©μ€ λ‹€μŒ λ¬Έμ„œλ₯Ό μ°Έμ‘°ν•˜μ„Έμš”:

ν”„λ‘œμ νŠΈ ꡬ쑰 πŸ“

.
β”œβ”€β”€ README.md
β”œβ”€β”€ package.json
β”œβ”€β”€ postcss.config.js
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ app.css
β”‚   β”œβ”€β”€ app.html
β”‚   β”œβ”€β”€ lib
β”‚   β”‚   β”œβ”€β”€ index.js
β”‚   β”‚   └── supabaseClient.js
β”‚   └── routes
β”‚       β”œβ”€β”€ +layout.svelte
β”‚       β”œβ”€β”€ +page.server.js
β”‚       └── +page.svelte
β”œβ”€β”€ static
β”‚   β”œβ”€β”€ favicon.png
β”‚   β”œβ”€β”€ supabase.png
β”‚   β”œβ”€β”€ svelte.png
β”‚   └── tailwindcss.png
β”œβ”€β”€ svelte.config.js
β”œβ”€β”€ tailwind.config.js
└── vite.config.js

κΈ°μ—¬ν•˜κΈ° 🀝

κΈ°μ—¬λ₯Ό ν™˜μ˜ν•©λ‹ˆλ‹€! μ œμ•ˆ, 버그 보고 λ˜λŠ” κΈ°λŠ₯ μš”μ²­μ΄ μžˆλŠ” 경우 이슈λ₯Ό μ—΄κ±°λ‚˜ ν’€ λ¦¬ν€˜μŠ€νŠΈλ₯Ό μ œμΆœν•΄ μ£Όμ„Έμš”.

λΌμ΄μ„ μŠ€ πŸ“„

이 ν”„λ‘œμ νŠΈλŠ” ν¬λ¦¬μ—μ΄ν‹°λΈŒ 컀먼즈 μ €μž‘μžν‘œμ‹œ 4.0 ꡭ제 (CC BY 4.0) λΌμ΄μ„ μŠ€μ— 따라 λΌμ΄μ„ μŠ€κ°€ λΆ€μ—¬λ©λ‹ˆλ‹€. μžμ„Έν•œ λ‚΄μš©μ€ LICENSE νŒŒμΌμ„ μ°Έμ‘°ν•˜μ„Έμš”.