Skip to content

EXAMPLES.md

Latest commit

 

History

History
375 lines (302 loc) · 8.9 KB

EXAMPLES.md

File metadata and controls

375 lines (302 loc) · 8.9 KB

Environment Variables Examples

This document shows real examples of generated .env files for different project types.

Example 1: Create React App with LINE & Payment Gateway

Configuration

Project Type: CRA + Express
Project Name: E-commerce LINE Shop
Frontend URL: https://shop.example.com
Backend URL: https://api.shop.example.com
Database: PostgreSQL
Features: JWT, LINE, Payment Gateway, Email, Redis

Generated Frontend .env

# E-commerce LINE Shop - Frontend Environment Variables
# Generated at: 2025-10-30T10:00:00.000Z

# Build Configuration
INLINE_RUNTIME_CHUNK=false
GENERATE_SOURCEMAP=false

# Application
REACT_APP_SYSTEM_TITLE="E-commerce LINE Shop"
REACT_APP_SYSTEM_DESCRIPTION=""
REACT_APP_SYSTEM_NAME="E-commerce LINE Shop"
REACT_APP_ENV=development
REACT_APP_API_URL=https://api.shop.example.com

# Test User (Development Only)
REACT_APP_TEST_USER=test@example.com
REACT_APP_TEST_USER_PASSWORD=Test@123456

# LINE Integration
REACT_APP_LINE_QR_URL=https://line.me/R/ti/p/@your-line-id
REACT_APP_LINE_ADD_FRIEND_URL=https://line.me/R/ti/p/@your-line-id
REACT_APP_LINE_LIFF_ID=your-liff-id
REACT_APP_CHAT_LINE_CONTACT_LINK=https://line.me/R/ti/p/@your-line-id

# Payment Gateway
REACT_APP_VERITRANS_POP_CLIENT_KEY=your-veritrans-client-key
REACT_APP_GMO_PRODUCTION_MODE=false
REACT_APP_SHOP_API_KEY=your-shop-api-key
REACT_APP_SHOP_PUBLIC_KEY=your-shop-public-key

# Additional Configuration
REACT_APP_CATEGORY_VERSION=1.0.0
REACT_APP_HTTPS=false
REACT_APP_KEY_HEADER_FILE_MAKER=x-file-maker-key

Generated Backend .env

# E-commerce LINE Shop - Backend Environment Variables
# Generated at: 2025-10-30T10:00:00.000Z

# Application
APP_NAME="E-commerce LINE Shop"
NODE_ENV=development
PORT=3001
APP_URL=https://api.shop.example.com
FRONTEND_URL=https://shop.example.com

# Security
APP_SECRET=abc123def456...xyz789
SESSION_SECRET=abc123def456...
ENCRYPTION_KEY=def456ghi789...

# CORS
CORS_ORIGIN=https://shop.example.com

# Database
DATABASE_URL=postgresql://postgres:postgres@localhost:5432/ecommerce_line_shop
DB_HOST=localhost
DB_PORT=5432
DB_DATABASE=ecommerce_line_shop
DB_USERNAME=postgres
DB_PASSWORD=postgres

# JWT Authentication
JWT_SECRET=AbCdEfGhIjKl...MnOpQrSt==
JWT_EXPIRES_IN=7d
JWT_REFRESH_SECRET=UvWxYzAbCdEf...GhIjKlMn==
JWT_REFRESH_EXPIRES_IN=30d

# Email Configuration
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=your-email@gmail.com
SMTP_PASSWORD=your-app-password
MAIL_FROM_ADDRESS=noreply@example.com
MAIL_FROM_NAME="E-commerce LINE Shop"

# Redis
REDIS_HOST=localhost
REDIS_PORT=6379
REDIS_PASSWORD=
REDIS_DB=0

# LINE Messaging API
LINE_CHANNEL_ID=your-line-channel-id
LINE_CHANNEL_SECRET=your-line-channel-secret
LINE_CHANNEL_ACCESS_TOKEN=your-line-channel-access-token
LINE_WEBHOOK_URL=https://api.shop.example.com/webhook/line
LINE_LOGIN_CHANNEL_ID=your-line-login-channel-id
LINE_LOGIN_CHANNEL_SECRET=your-line-login-channel-secret
LINE_CALLBACK_URL=https://api.shop.example.com/auth/line/callback

# Payment Gateway
VERITRANS_SERVER_KEY=your-veritrans-server-key
VERITRANS_CLIENT_KEY=your-veritrans-client-key
VERITRANS_MERCHANT_ID=your-merchant-id
GMO_SITE_ID=your-gmo-site-id
GMO_SITE_PASS=your-gmo-site-pass
GMO_SHOP_ID=your-gmo-shop-id
GMO_SHOP_PASS=your-gmo-shop-pass
GMO_PRODUCTION_MODE=false

# API Keys
API_KEY=sk_abc123def456...xyz789
INTERNAL_API_KEY=internal_abc123def456...
KEY_HEADER_FILE_MAKER=abc123def456

Example 2: Vite + Express with LINE Bot

Configuration

Project Type: Vite + Express
Project Name: Customer Support Bot
Frontend URL: http://localhost:5173
Backend URL: http://localhost:3001
Database: PostgreSQL
Features: LINE, Redis

Generated Frontend .env

# Customer Support Bot - Frontend Environment Variables
# Generated at: 2025-10-30T10:00:00.000Z

# Build Configuration
INLINE_RUNTIME_CHUNK=false
GENERATE_SOURCEMAP=false

# Application
VITE_APP_SYSTEM_TITLE="Customer Support Bot"
VITE_APP_SYSTEM_DESCRIPTION=""
VITE_APP_SYSTEM_NAME="Customer Support Bot"
VITE_APP_ENV=development
VITE_APP_API_URL=http://localhost:3001

# Test User (Development Only)
VITE_APP_TEST_USER=test@example.com
VITE_APP_TEST_USER_PASSWORD=Test@123456

# LINE Integration
VITE_APP_LINE_QR_URL=https://line.me/R/ti/p/@your-line-id
VITE_APP_LINE_ADD_FRIEND_URL=https://line.me/R/ti/p/@your-line-id
VITE_APP_LINE_LIFF_ID=your-liff-id
VITE_APP_CHAT_LINE_CONTACT_LINK=https://line.me/R/ti/p/@your-line-id
VITE_MAX_SIZE_RICH_MENU_MB=1

# Additional Configuration
VITE_APP_CATEGORY_VERSION=1.0.0
VITE_APP_HTTPS=false
VITE_APP_KEY_HEADER_FILE_MAKER=x-file-maker-key

Generated Backend .env

# Customer Support Bot - Backend Environment Variables
# Generated at: 2025-10-30T10:00:00.000Z

# Application
APP_NAME="Customer Support Bot"
NODE_ENV=development
PORT=3001
APP_URL=http://localhost:3001
FRONTEND_URL=http://localhost:5173

# Security
APP_SECRET=abc123def456...xyz789
SESSION_SECRET=abc123def456...
ENCRYPTION_KEY=def456ghi789...

# CORS
CORS_ORIGIN=http://localhost:5173

# Database
DATABASE_URL=postgresql://postgres:postgres@localhost:5432/customer_support_bot
DB_HOST=localhost
DB_PORT=5432
DB_DATABASE=customer_support_bot
DB_USERNAME=postgres
DB_PASSWORD=postgres

# Redis
REDIS_HOST=localhost
REDIS_PORT=6379
REDIS_PASSWORD=
REDIS_DB=0

# LINE Messaging API
LINE_CHANNEL_ID=your-line-channel-id
LINE_CHANNEL_SECRET=your-line-channel-secret
LINE_CHANNEL_ACCESS_TOKEN=your-line-channel-access-token
LINE_WEBHOOK_URL=http://localhost:3001/webhook/line
LINE_LOGIN_CHANNEL_ID=your-line-login-channel-id
LINE_LOGIN_CHANNEL_SECRET=your-line-login-channel-secret
LINE_CALLBACK_URL=http://localhost:3001/auth/line/callback

# LINE Manager Configuration
MENU_ADMIN_LINE_MANAGER_URL=http://localhost:3001/admin/line

# API Keys
API_KEY=sk_abc123def456...xyz789
INTERNAL_API_KEY=internal_abc123def456...
KEY_HEADER_FILE_MAKER=abc123def456

Example 3: Next.js E-commerce with Full Features

Configuration

Project Type: E-commerce Full Stack
Project Name: Premium Store
Frontend URL: https://store.example.com
Backend URL: https://api.store.example.com
Database: PostgreSQL
Features: All enabled (JWT, OAuth, Email, Redis, S3, Stripe, Payment)

Generated Frontend .env (Partial)

# Premium Store - Frontend Environment Variables
# Generated at: 2025-10-30T10:00:00.000Z

# Application
NEXT_PUBLIC_APP_SYSTEM_TITLE="Premium Store"
NEXT_PUBLIC_APP_SYSTEM_DESCRIPTION=""
NEXT_PUBLIC_APP_SYSTEM_NAME="Premium Store"
NEXT_PUBLIC_APP_ENV=development
NEXT_PUBLIC_APP_API_URL=https://api.store.example.com

# Test User (Development Only)
NEXT_PUBLIC_APP_TEST_USER=test@example.com
NEXT_PUBLIC_APP_TEST_USER_PASSWORD=Test@123456

# OAuth
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id
NEXT_PUBLIC_FACEBOOK_APP_ID=your-facebook-app-id
NEXT_PUBLIC_GITHUB_CLIENT_ID=your-github-client-id

# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

# Payment Gateway
NEXT_PUBLIC_APP_VERITRANS_POP_CLIENT_KEY=your-veritrans-client-key
NEXT_PUBLIC_APP_GMO_PRODUCTION_MODE=false
NEXT_PUBLIC_APP_SHOP_API_KEY=your-shop-api-key
NEXT_PUBLIC_APP_SHOP_PUBLIC_KEY=your-shop-public-key

# Additional Configuration
NEXT_PUBLIC_APP_CATEGORY_VERSION=1.0.0

Comparison: Framework Prefixes

Create React App (CRA)

REACT_APP_API_URL=https://api.example.com
REACT_APP_LINE_LIFF_ID=your-liff-id
REACT_APP_HTTPS=false

Vite

VITE_APP_API_URL=https://api.example.com
VITE_APP_LINE_LIFF_ID=your-liff-id
VITE_APP_HTTPS=false
VITE_MAX_SIZE_RICH_MENU_MB=1

Next.js

NEXT_PUBLIC_APP_API_URL=https://api.example.com
NEXT_PUBLIC_APP_LINE_LIFF_ID=your-liff-id
# Note: HTTPS config usually not needed in Next.js

Production vs Development

Development Example

REACT_APP_ENV=development
REACT_APP_API_URL=http://localhost:3001
REACT_APP_TEST_USER=test@example.com
REACT_APP_TEST_USER_PASSWORD=Test@123456
GMO_PRODUCTION_MODE=false
GENERATE_SOURCEMAP=false

Production Example

REACT_APP_ENV=production
REACT_APP_API_URL=https://api.example.com
# Remove test user in production
GMO_PRODUCTION_MODE=true
GENERATE_SOURCEMAP=false
INLINE_RUNTIME_CHUNK=false

Tips for Real Projects

1. LINE Integration

Replace these placeholders:

REACT_APP_LINE_QR_URL=https://line.me/R/ti/p/@yourshopid
REACT_APP_LINE_ADD_FRIEND_URL=https://line.me/R/ti/p/@yourshopid
REACT_APP_LINE_LIFF_ID=1234567890-abcdefgh

2. Payment Gateway

For GMO Payment (Japan):

GMO_SITE_ID=tshop00012345
GMO_SITE_PASS=your-site-pass
GMO_SHOP_ID=tshop00012345
GMO_SHOP_PASS=your-shop-pass

For Veritrans/Midtrans (Indonesia):

VERITRANS_SERVER_KEY=SB-Mid-server-abc123
VERITRANS_CLIENT_KEY=SB-Mid-client-xyz789

3. Build Optimization

# Disable for faster builds in development
GENERATE_SOURCEMAP=false
INLINE_RUNTIME_CHUNK=false

# Enable in production for debugging
GENERATE_SOURCEMAP=true

4. Security Headers

# Custom header for file uploads
REACT_APP_KEY_HEADER_FILE_MAKER=x-custom-file-key
KEY_HEADER_FILE_MAKER=your-secret-key-here