# 🛠️ How to Build cPanel Deployment File - Step by Step Guide

## 📋 Prerequisites

Before building the cPanel deployment file, ensure you have:

- ✅ **Node.js** installed (version 16 or higher)
- ✅ **npm** or **yarn** package manager
- ✅ **Git** (optional, for version control)
- ✅ **Code editor** (VS Code, Sublime Text, etc.)

## 🚀 Step-by-Step Build Process

### Step 1: Prepare Your Project

1. **Navigate to your project directory:**
   ```bash
   cd path/to/your/solana-ico-project
   ```

2. **Install dependencies:**
   ```bash
   npm install
   # or
   yarn install
   ```

### Step 2: Configure Next.js for Static Export

1. **Open `next.config.js` and ensure it has:**
   ```javascript
   /** @type {import('next').Config} */
   const nextConfig = {
     reactStrictMode: true,
     output: 'export',           // Required for static export
     trailingSlash: true,        // Adds trailing slash to URLs
     images: {
       unoptimized: true         // Required for static export
     },
     assetPrefix: process.env.NODE_ENV === 'production' ? './' : '',
     basePath: '',
     distDir: 'out',
     experimental: {
       appDir: false
     }
   }
   
   module.exports = nextConfig
   ```

2. **Verify your `package.json` has the build script:**
   ```json
   {
     "scripts": {
       "build": "next build",
       "export": "next export"
     }
   }
   ```

### Step 3: Build the Application

1. **Run the build command:**
   ```bash
   npm run build
   # or
   yarn build
   ```

2. **Wait for build completion** - you should see:
   ```
   info  - Compiled successfully
   info  - Creating an optimized production build
   info  - Generating static pages
   info  - Finalizing page optimization
   Route (pages)                              Size     First Load JS
   ┌ ○ / (2282 ms)                            87.7 kB         277 kB
   └ ○ /404                                   181 B           189 kB
   ```

### Step 4: Verify Build Output

1. **Check that the `out/` directory was created:**
   ```bash
   dir out
   # or on Unix/Mac
   ls -la out/
   ```

2. **Verify the contents include:**
   - `index.html` - Main page
   - `404.html` - Error page
   - `_next/` - Static assets directory
   - `.htaccess` - Apache configuration
   - All your images and assets

### Step 5: Create cPanel Deployment Directory

1. **Create a new directory for cPanel deployment:**
   ```bash
   mkdir gizverse-coin-presale-cpanel
   ```

2. **Copy all files from `out/` to the new directory:**
   ```bash
   # On Windows
   xcopy out gizverse-coin-presale-cpanel /E /I /H /Y
   
   # On Unix/Mac
   cp -r out/* gizverse-coin-presale-cpanel/
   ```

### Step 6: Verify Deployment Package

1. **Check the deployment directory contents:**
   ```bash
   dir gizverse-coin-presale-cpanel
   # or
   ls -la gizverse-coin-presale-cpanel/
   ```

2. **Ensure all files are present:**
   - ✅ `index.html`
   - ✅ `404.html`
   - ✅ `.htaccess`
   - ✅ `_next/` directory
   - ✅ All static assets

### Step 7: Create ZIP File for cPanel

1. **On Windows (using PowerShell):**
   ```powershell
   Compress-Archive -Path gizverse-coin-presale-cpanel -DestinationPath gizverse-coin-presale-cpanel.zip -Force
   ```

2. **On Unix/Mac (using zip command):**
   ```bash
   zip -r gizverse-coin-presale-cpanel.zip gizverse-coin-presale-cpanel/
   ```

3. **Alternative: Use GUI tools**
   - Right-click the folder → "Send to" → "Compressed (zipped) folder"
   - Use 7-Zip, WinRAR, or other compression tools

### Step 8: Verify Final Package

1. **Check the ZIP file size and contents:**
   ```bash
   dir *.zip
   # or
   ls -la *.zip
   ```

2. **The ZIP should contain:**
   - All HTML files
   - All JavaScript bundles
   - All CSS files
   - All images and assets
   - `.htaccess` configuration

## 🔧 Troubleshooting Common Build Issues

### Issue 1: Build Fails
```bash
# Solution: Clear cache and reinstall
rm -rf .next node_modules
npm install
npm run build
```

### Issue 2: Static Export Not Working
```bash
# Check next.config.js has:
output: 'export'
images: { unoptimized: true }
```

### Issue 3: Assets Not Loading
```bash
# Verify assetPrefix in next.config.js
assetPrefix: process.env.NODE_ENV === 'production' ? './' : ''
```

### Issue 4: Large Bundle Size
```bash
# Analyze bundle
npm install --save-dev @next/bundle-analyzer
# Add to next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
})
```

## 📁 Expected File Structure

After successful build, your `out/` directory should look like:

```
out/
├── .htaccess                 # Apache configuration
├── index.html               # Main page
├── 404.html                # Error page
├── logo.png                # Main logo
├── theblockchaincoders.png # Additional branding
├── _next/                  # Next.js static assets
│   ├── static/
│   │   ├── css/           # Stylesheets
│   │   ├── chunks/        # JavaScript chunks
│   │   └── [hash]/        # Build manifests
│   └── ...
├── 404/                    # 404 page assets
└── [other static files]
```

## 🚀 Build Commands Summary

```bash
# 1. Install dependencies
npm install

# 2. Build the application
npm run build

# 3. Create deployment directory
mkdir gizverse-coin-presale-cpanel

# 4. Copy build files
xcopy out gizverse-coin-presale-cpanel /E /I /H /Y

# 5. Create ZIP file
powershell Compress-Archive -Path gizverse-coin-presale-cpanel -DestinationPath gizverse-coin-presale-cpanel.zip -Force

# 6. Verify package
dir gizverse-coin-presale-cpanel.zip
```

## ✅ Build Checklist

- [ ] Dependencies installed (`npm install`)
- [ ] Next.js config updated for static export
- [ ] Build completed successfully (`npm run build`)
- [ ] `out/` directory created with all files
- [ ] Deployment directory created and populated
- [ ] ZIP file created successfully
- [ ] ZIP file contains all necessary files
- [ ] File size is reasonable (typically 10-50MB)

## 🎯 Final Notes

- **Always test the build locally** before creating the deployment package
- **Keep the `out/` directory** for debugging if needed
- **Verify the ZIP file** can be extracted and contains all files
- **Test the extracted files** in a local web server if possible
- **Document any custom configurations** for future builds

## 🔄 Updating the Build

To update your deployment package:

1. Make your code changes
2. Run `npm run build` again
3. Copy new files to deployment directory
4. Create new ZIP file
5. Test the new build
6. Deploy to cPanel

---

*This guide ensures you can consistently build cPanel deployment packages for your Gizverse Coin Presale application.*