diff --git a/DEPLOYMENT_GUIDE.md b/DEPLOYMENT_GUIDE.md new file mode 100644 index 0000000..3b2c40c --- /dev/null +++ b/DEPLOYMENT_GUIDE.md @@ -0,0 +1,312 @@ +# Deployment Guide - The Old Vine Hotel Website + +This guide explains how to deploy the website to **any server** after cloning the repository. + +## ✅ What Makes This Portable + +- **Fully Static**: No backend/server-side code required +- **No Database**: All content is in JSON files +- **No Environment Variables**: Works out of the box +- **Standard Web Server**: Works with Apache, Nginx, or any static hosting + +## 🚀 Quick Deployment Steps + +### Step 1: Clone the Repository + +```bash +git clone https://github.com/t-sharabi/oldvine.git +cd oldvine +``` + +### Step 2: Install Dependencies + +```bash +cd client +npm install +``` + +### Step 3: Build for Production + +```bash +npm run build +``` + +This creates an optimized production build in `client/build/` directory. + +### Step 4: Deploy the Build Folder + +Upload the **entire contents** of `client/build/` to your web server. + +--- + +## 📦 Deployment Options + +### Option 1: cPanel / Shared Hosting (GoDaddy, Bluehost, etc.) + +1. **Build the website** (steps 1-3 above) + +2. **Upload via cPanel File Manager:** + - Log into cPanel + - Open File Manager + - Navigate to `public_html` (or `www` or `htdocs`) + - Upload all files from `client/build/` to this directory + - Ensure `.htaccess` file is uploaded (for routing) + +3. **Or upload via FTP:** + ```bash + # Using command line FTP + cd client/build + ftp your-server.com + # Upload all files to public_html/ + ``` + +4. **Verify:** + - Visit your domain + - Check that all pages load correctly + - Test language switching + +### Option 2: VPS / Cloud Server (DigitalOcean, AWS, etc.) + +#### Using SCP: + +```bash +# Build first +cd client +npm run build + +# Upload to server +scp -r build/* user@your-server.com:/var/www/html/ +``` + +#### Using Git on Server: + +```bash +# On your server +cd /var/www/html +git clone https://github.com/t-sharabi/oldvine.git +cd oldvine/client +npm install +npm run build + +# Copy build to web root +cp -r build/* /var/www/html/ +``` + +### Option 3: Netlify (Recommended for Easy Deployment) + +1. **Connect Repository:** + - Go to [Netlify](https://www.netlify.com) + - Click "New site from Git" + - Connect your GitHub repository + - Select `oldvine` repository + +2. **Build Settings:** + - **Base directory:** `client` + - **Build command:** `npm run build` + - **Publish directory:** `client/build` + +3. **Deploy:** + - Netlify will automatically build and deploy + - Your site will be live at `your-site.netlify.app` + - You can add a custom domain + +### Option 4: Vercel + +1. **Install Vercel CLI:** + ```bash + npm i -g vercel + ``` + +2. **Deploy:** + ```bash + cd client + vercel + ``` + +3. **Or connect via GitHub:** + - Go to [Vercel](https://vercel.com) + - Import your GitHub repository + - Set root directory to `client` + - Deploy + +### Option 5: GitHub Pages + +1. **Install gh-pages:** + ```bash + cd client + npm install --save-dev gh-pages + ``` + +2. **Add to package.json:** + ```json + "homepage": "https://t-sharabi.github.io/oldvine", + "scripts": { + "predeploy": "npm run build", + "deploy": "gh-pages -d build" + } + ``` + +3. **Deploy:** + ```bash + npm run deploy + ``` + +### Option 6: AWS S3 + CloudFront + +1. **Build the website:** + ```bash + cd client + npm run build + ``` + +2. **Upload to S3:** + ```bash + aws s3 sync build/ s3://your-bucket-name --delete + ``` + +3. **Configure CloudFront** to serve from S3 bucket + +--- + +## 🔧 Server Configuration + +### Apache (.htaccess) + +The repository includes `.htaccess` for Apache servers. It handles: +- React Router (SPA routing) +- URL rewriting +- Proper MIME types + +**No additional configuration needed** - just ensure `.htaccess` is uploaded. + +### Nginx + +If using Nginx, add this to your server block: + +```nginx +server { + listen 80; + server_name your-domain.com; + root /var/www/html; + index index.html; + + location / { + try_files $uri $uri/ /index.html; + } + + # Cache static assets + location /static { + expires 1y; + add_header Cache-Control "public, immutable"; + } +} +``` + +### IIS (Windows Server) + +Create `web.config` in the root: + +```xml + + + + + + + + + + + + + + + + + +``` + +--- + +## 📋 Pre-Deployment Checklist + +- [ ] Build completed successfully (`npm run build`) +- [ ] All files in `client/build/` are ready +- [ ] `.htaccess` file is included (for Apache) +- [ ] Images are optimized and included +- [ ] Static data JSON files are present +- [ ] Tested locally with `npm start` + +--- + +## 🌐 Post-Deployment Verification + +After deploying, verify: + +1. **Homepage loads:** `https://your-domain.com` +2. **All pages accessible:** + - `/about` + - `/rooms` + - `/gallery` + - `/contact` + - `/facilities` +3. **Language switching works:** EN, AR, FR +4. **Images load correctly:** Check galleries and room images +5. **Mobile responsive:** Test on mobile devices +6. **404 handling:** Non-existent routes redirect to homepage + +--- + +## 🔄 Updating the Website + +To update content after deployment: + +1. **Edit content files:** + - `client/public/static-data/*.json` - Content data + - `client/src/locales/*.json` - Translations + +2. **Rebuild:** + ```bash + cd client + npm run build + ``` + +3. **Redeploy:** + - Upload new `client/build/` contents to server + - Or push to Git and let CI/CD handle it (if configured) + +--- + +## 🆘 Troubleshooting + +### Issue: Routes return 404 + +**Solution:** Ensure `.htaccess` (Apache) or proper Nginx config is in place for SPA routing. + +### Issue: Images not loading + +**Solution:** Check that `images/` folder is uploaded and paths are correct. + +### Issue: Language switching not working + +**Solution:** Verify `locales/` JSON files are included in build. + +### Issue: Blank page + +**Solution:** +- Check browser console for errors +- Verify all files uploaded correctly +- Check server error logs + +--- + +## 📞 Support + +For issues or questions: +- Check the main [README.md](README.md) +- Review server logs +- Verify all build files are present + +--- + +**The website is fully portable and can be deployed to any static hosting service!** 🎉 diff --git a/README.md b/README.md index 7bf0eeb..c2646dd 100644 --- a/README.md +++ b/README.md @@ -99,17 +99,36 @@ Users can switch languages using the language selector in the header. ## 📦 Deployment -The website is deployed as a static site. To deploy: +The website is **fully portable** and can be deployed to **any static hosting service**. -1. Build the production bundle: +### Quick Deploy (3 Steps) + +1. **Clone and build:** ```bash - cd client + git clone https://github.com/t-sharabi/oldvine.git + cd oldvine/client + npm install npm run build ``` -2. Upload the contents of `client/build/` to your web server's `public_html` directory. +2. **Upload `client/build/` contents** to your web server -3. Ensure `.htaccess` is included for proper routing. +3. **Done!** The website is live. + +### Supported Hosting Services + +✅ **cPanel/Shared Hosting** (GoDaddy, Bluehost, etc.) +✅ **VPS/Cloud Servers** (DigitalOcean, AWS, Azure) +✅ **Static Hosting** (Netlify, Vercel, GitHub Pages) +✅ **CDN Services** (Cloudflare Pages, AWS S3 + CloudFront) + +### Detailed Deployment Guide + +See [DEPLOYMENT_GUIDE.md](DEPLOYMENT_GUIDE.md) for: +- Step-by-step instructions for each hosting type +- Server configuration (Apache, Nginx, IIS) +- Troubleshooting tips +- Post-deployment verification checklist ## 📄 License