Deployment Options

Overview

The Bİ DOLU İÇECEK application is a static React app that can be deployed to various hosting platforms. This guide covers deployment to popular platforms and configuration requirements.

Prerequisites

Before deploying, ensure you have:

Built the application (npm run build)
A Git repository with your code
An account on your chosen hosting platform

This application uses static hosting and doesn’t require a server-side runtime. Any platform that can serve static files will work.

Deployment Platforms

Vercel (Recommended)
Netlify
GitHub Pages
Custom Server

Vercel offers the best integration for React applications with Edge Config support.

Install Vercel CLI

npm install -g vercel

vercel login

Deploy the Project

From your project directory:

vercel

Follow the prompts:

Link to existing project or create new
Confirm project settings
Deploy

Deploy to Production

For production deployment:

vercel --prod

Automatic Deployment

Connect your Git repository for automatic deployments:

Go to Vercel Dashboard
Click “New Project”
Import your Git repository
Configure build settings:
- Build Command: npm run build
- Output Directory: build
- Install Command: npm install
Click “Deploy”

Vercel automatically deploys on every push to your main branch, and creates preview deployments for pull requests.

Netlify provides easy deployment with continuous integration.

Install Netlify CLI

npm install -g netlify-cli

netlify login

Initialize and Deploy

netlify init

When prompted:

Build command: npm run build
Publish directory: build

Deploy to Production

netlify deploy --prod

Automatic Deployment

Go to Netlify Dashboard
Click “New site from Git”
Connect your repository
Configure:
- Build command: npm run build
- Publish directory: build
Deploy site

Netlify Configuration File

Create netlify.toml in your project root:

[build]
  command = "npm run build"
  publish = "build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Deploy directly from your GitHub repository.

Install gh-pages

npm install --save-dev gh-pages

Add Homepage to package.json

Add the homepage field:

{
  "homepage": "https://yourusername.github.io/repository-name",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

Deploy

npm run deploy

GitHub Pages may take a few minutes to update. Also note that Edge Config features require a backend and won’t work with GitHub Pages alone.

Deploy to any server that can serve static files.

Build the Application

npm run build

Copy Build Files

Transfer the build/ directory to your server:

scp -r build/* user@server:/var/www/html/

Configure Web Server

For Apache, create/edit .htaccess:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

For Nginx:

location / {
  try_files $uri $uri/ /index.html;
}

Environment Variables

Configure environment variables for your deployment:

Required Variables

For Vercel Edge Config integration, you’ll need the EDGE_CONFIG environment variable.

EDGE_CONFIG - Edge Config connection string (Vercel only)

EDGE_CONFIG=https://edge-config.vercel.com/[CONFIG_ID]?token=[TOKEN]

Setting Environment Variables

Vercel
Netlify
Local .env

Go to Project Settings → Environment Variables
Add variables for each environment:
- Production
- Preview
- Development
Redeploy for changes to take effect

Or via CLI:

vercel env add EDGE_CONFIG production

Go to Site Settings → Environment Variables
Add key-value pairs
Trigger a new deployment

Or via CLI:

netlify env:set REACT_APP_API_URL https://api.example.com

Create .env.production.local:

REACT_APP_API_URL=https://api.example.com

Build with environment file:

npm run build

Environment variables starting with REACT_APP_ are embedded in the build at build-time. Never commit .env files containing secrets to version control.

Edge Config Setup (Vercel)

The application uses Vercel Edge Config for remote configuration of service hours, store status, and emergency messages.

Create Edge Config Store

Go to Vercel Dashboard
Navigate to Storage → Edge Config
Click “Create Edge Config”
Name it suapp-config

Configure Initial Data

Click “Edit Items” and add the configuration:

{
  "service_hours": {
    "enabled": true,
    "startHour": 8,
    "startMinute": 30,
    "endHour": 22,
    "endMinute": 50,
    "weekdaysEnabled": true,
    "weekendsEnabled": true,
    "closedDates": [],
    "timezone": "Europe/Istanbul"
  },
  "store_status": {
    "isOpen": true,
    "temporarilyClosed": false,
    "maintenanceMode": false,
    "reason": ""
  },
  "emergency_message": {
    "enabled": false,
    "message": "",
    "priority": "normal"
  }
}

Connect to Project

In Edge Config, go to Tokens tab
Copy the Connection String
Add to Project Environment Variables:
- Name: EDGE_CONFIG
- Value: Your connection string
- Environments: All (Production, Preview, Development)

Redeploy Application

vercel --prod

Edge Config Features

With Edge Config, you can remotely control:

Service Hours - Change opening/closing times without redeploying
Store Status - Temporarily close the store or enable maintenance mode
Emergency Messages - Display urgent notifications to customers

Edge Config changes propagate globally within 2 minutes and don’t require rebuilding or redeploying the application.

Managing Edge Config

Temporarily Close Store:

{
  "store_status": {
    "isOpen": false,
    "temporarilyClosed": true,
    "reason": "Teknik bakım nedeniyle geçici olarak kapalıyız."
  }
}

Update Service Hours:

{
  "service_hours": {
    "startHour": 9,
    "endHour": 18,
    "weekendsEnabled": false
  }
}

Add Holiday Closures:

{
  "service_hours": {
    "closedDates": ["2024-01-01", "2024-12-25"]
  }
}

See src/config/edgeConfig.js:1 for implementation details.

Post-Deployment Checklist

After deploying, verify:

Check Application Loads

Visit your deployment URL
Verify the homepage loads correctly
Test navigation between sections

Test Core Features

Product selection and cart functionality
WhatsApp order integration
Service hours display
Responsive design on mobile

Verify Edge Config (Vercel)

Check browser console for Edge Config logs
Test service hours enforcement
Verify store status updates

Performance Check

Run Lighthouse audit
Check page load times
Test on various devices and networks

Common Deployment Issues

Blank Page After Deployment

Cause: Incorrect base URL or routing configuration Solution:

Check homepage in package.json
Ensure server redirects all routes to index.html
Verify build output in deployment logs

Assets Not Loading

Cause: Incorrect asset paths Solution:

Use relative imports: import logo from './logo.png'
Place static assets in public/ folder
Reference public assets with process.env.PUBLIC_URL

Environment Variables Not Working

Cause: Variables not prefixed or not set at build time Solution:

Prefix with REACT_APP_
Set variables before building
Redeploy after changing variables

Edge Config Not Loading

Cause: Missing or incorrect connection string Solution:

# Verify environment variable is set
vercel env ls

# Check connection string format
EDGE_CONFIG=https://edge-config.vercel.com/[ID]?token=[TOKEN]

# Redeploy with correct variable
vercel --prod

If Edge Config fails to load, the application will fall back to local configuration in src/config/serviceHours.js. Check browser console for Edge Config error messages.

Continuous Deployment

Set up automatic deployments for a seamless workflow:

Connect Git Repository

Link your hosting platform to your Git repository (GitHub, GitLab, or Bitbucket)

Configure Build Settings

Build command: npm run build
Output directory: build
Node version: 16.x or higher

Set Up Branch Deployments

Production: Deploy from main branch
Preview: Deploy from pull requests
Development: Deploy from develop branch (optional)

Enable Deploy Hooks

Configure webhooks for automatic deployments:

On git push
On pull request
On tag creation

Monitoring and Analytics

After deployment, monitor your application:

Vercel Analytics - Built-in performance monitoring
Google Analytics - User behavior tracking
Sentry - Error tracking and monitoring
Web Vitals - Core web vitals reporting

The application includes web-vitals package for performance monitoring. Check src/reportWebVitals.js for configuration.

Next Steps

Review Building Guide for build optimization tips
Set up monitoring and analytics
Configure custom domain
Enable HTTPS/SSL certificate
Set up staging environment

Customization

Deployment

Overview

Prerequisites

Deployment Platforms

Automatic Deployment

Automatic Deployment

Netlify Configuration File

Environment Variables

Required Variables

Setting Environment Variables

Edge Config Setup (Vercel)

Edge Config Features

Managing Edge Config

Post-Deployment Checklist

Common Deployment Issues

Blank Page After Deployment

Assets Not Loading

Environment Variables Not Working

Edge Config Not Loading

Continuous Deployment

Monitoring and Analytics

Next Steps

Build docs developers (and LLMs) love

Customization

Deployment

​Overview

​Prerequisites

​Deployment Platforms

​Automatic Deployment

​Automatic Deployment

​Netlify Configuration File

​Environment Variables

​Required Variables

​Setting Environment Variables

​Edge Config Setup (Vercel)

​Edge Config Features

​Managing Edge Config

​Post-Deployment Checklist

​Common Deployment Issues

​Blank Page After Deployment

​Assets Not Loading

​Environment Variables Not Working

​Edge Config Not Loading

​Continuous Deployment

​Monitoring and Analytics

​Next Steps

Build docs developers (and LLMs) love

Overview

Prerequisites

Deployment Platforms

Automatic Deployment

Automatic Deployment

Netlify Configuration File

Environment Variables

Required Variables

Setting Environment Variables

Edge Config Setup (Vercel)

Edge Config Features

Managing Edge Config

Post-Deployment Checklist

Common Deployment Issues

Blank Page After Deployment

Assets Not Loading

Environment Variables Not Working

Edge Config Not Loading

Continuous Deployment

Monitoring and Analytics

Next Steps