Oliver/sb-prompt-studio

Fork 0

Manish Tanwar 7aa7c1e6b7 Updated Remote Ready to Build Code with LoginName-Logout Bar

2025-12-11 19:50:26 +05:30

6.9 KiB

Raw Permalink Blame History

Deploy Now - Quick Command Reference

🚀 Complete Deployment Steps

Follow these commands in order to deploy your application.

Part 1: Upload Files via FileZilla

Files to Upload:

✅ src/
✅ public/
✅ index.html
✅ package.json
✅ package-lock.json
✅ vite.config.js
✅ tailwind.config.js
✅ postcss.config.js
✅ eslint.config.js
✅ .env
✅ .htaccess (simplified version - already updated)

❌ DO NOT UPLOAD:
   - node_modules/
   - dist/
   - .git/
   - .claude/

Upload to: /var/www/html/prompt/

Part 2: SSH Commands (Run in Order)

Step 1: Connect to Server

ssh your-username@your-server-ip

Step 2: Navigate to Project Directory

cd /var/www/html/prompt

Step 3: Install Dependencies

npm install

Step 4: Build the Application

npm run build

Verify dist folder was created:

ls -la dist/

You should see:

index.html
assets/ folder with CSS and JS files

Part 3: Configure Apache

Step 1: Backup Current Configuration

sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/000-default.conf.backup

Step 2: Edit Apache Configuration

sudo nano /etc/apache2/sites-available/000-default.conf

Step 3: Add Configuration

Scroll to the bottom of the <VirtualHost *:80> block (before </VirtualHost>).

Add these lines:

# CinePrompt Studio - /prompt Application
Alias /prompt /var/www/html/prompt/dist

<Directory /var/www/html/prompt/dist>
    Options -Indexes +FollowSymLinks
    AllowOverride All
    Require all granted
    FallbackResource /prompt/index.html
</Directory>

# Redirect root to /prompt
RedirectMatch ^/$ /prompt/

Save and exit:

Press Ctrl + O (save)
Press Enter (confirm)
Press Ctrl + X (exit)

Step 4: If You Have HTTPS, Edit SSL Config Too

sudo nano /etc/apache2/sites-available/default-ssl.conf

Add the same configuration inside the <VirtualHost *:443> block.

Step 5: Test Apache Configuration

sudo apache2ctl configtest

Expected output: Syntax OK

If you see errors, re-edit the config and fix typos.

Step 6: Restart Apache

sudo systemctl restart apache2

Step 7: Verify Apache is Running

sudo systemctl status apache2

Expected: active (running) in green

Press q to exit.

Part 4: Set Proper Permissions

# Set ownership to Apache user
sudo chown -R www-data:www-data /var/www/html/prompt

# Set directory permissions
sudo find /var/www/html/prompt -type d -exec chmod 755 {} \;

# Set file permissions
sudo find /var/www/html/prompt -type f -exec chmod 644 {} \;

Part 5: Configure Azure AD Redirect URI

Step 1: Go to Azure Portal

Visit: https://portal.azure.com
Sign in with your Azure account

Step 2: Navigate to Your App

Search for "App registrations"
Find app with Client ID: 9079054c-9620-4757-a256-23413042f1ef
Click on it

Step 3: Add Redirect URI

Click "Authentication" in left sidebar
Under "Single-page application", click "Add URI"
Enter: https://ai-sandbox.oliver.solutions/prompt/
⚠️ Important: Include the trailing slash /
Click "Save"

Step 4: Wait

Wait 1-2 minutes for Azure to propagate the changes.

Part 6: Test Your Deployment

Step 1: Clear Browser Cache

Press Ctrl + Shift + Delete
Select "Cached images and files"
Click "Clear data"

Step 2: Visit Your Site

Open: https://ai-sandbox.oliver.solutions/prompt/

Expected Result:

✅ Login page appears (not blank screen)
✅ No console errors in browser DevTools (F12)
✅ Microsoft SSO login button visible

Click "Sign in with Microsoft"
Login with your Microsoft account
Should redirect back to your app
App dashboard/main page should appear

Step 4: Test Page Refresh

Navigate to different pages in your app
Press F5 to refresh
Page should reload correctly (not show 404 or blank)

Verification Checklist

After deployment, verify:

https://ai-sandbox.oliver.solutions/prompt/ shows login page
No blank screen
Microsoft SSO login works
After login, app loads correctly
Page refresh on any route works
Browser console (F12) shows no errors
Assets (CSS, images) load correctly

Test Security:

https://ai-sandbox.oliver.solutions/prompt/.env returns 403 or 404 (blocked)
https://ai-sandbox.oliver.solutions/prompt/package.json returns 403 or 404 (blocked)
https://ai-sandbox.oliver.solutions/prompt/src/ is not accessible

Troubleshooting

Blank Screen Still Appears

Check Apache error logs:

sudo tail -f /var/log/apache2/error.log

Refresh the page and watch for errors.

Check if dist folder exists:

ls -la /var/www/html/prompt/dist/

If missing, run: npm run build

Check Apache configuration was added:

sudo grep -A 5 "Alias /prompt" /etc/apache2/sites-available/000-default.conf

Should show your configuration.

MSAL Error Still Appears

Check .env file on server:

cat /var/www/html/prompt/.env | grep REDIRECT_URI

Should show: https://ai-sandbox.oliver.solutions/prompt/

If changed, rebuild:

cd /var/www/html/prompt
npm run build

Double-check Azure AD:

Redirect URI matches exactly: https://ai-sandbox.oliver.solutions/prompt/
Added under "Single-page application" platform
Clicked "Save"

404 Errors for Assets

Check Vite config:

cat /var/www/html/prompt/vite.config.js | grep base

Should show: base: '/prompt/'

Rebuild if needed:

cd /var/www/html/prompt
npm run build

Quick Command Summary

# Upload files via FileZilla to /var/www/html/prompt/

# SSH into server
ssh your-username@your-server-ip
cd /var/www/html/prompt

# Build
npm install
npm run build

# Configure Apache
sudo nano /etc/apache2/sites-available/000-default.conf
# (Add Alias configuration)

# Test and restart
sudo apache2ctl configtest
sudo systemctl restart apache2

# Set permissions
sudo chown -R www-data:www-data /var/www/html/prompt
sudo find /var/www/html/prompt -type d -exec chmod 755 {} \;
sudo find /var/www/html/prompt -type f -exec chmod 644 {} \;

# Configure Azure AD (via browser)
# Add redirect URI: https://ai-sandbox.oliver.solutions/prompt/

# Test
# Visit: https://ai-sandbox.oliver.solutions/prompt/

Need Help?

If you encounter issues: