Deployment Guide

StockPro is a static web application that can be deployed to any static hosting platform. This guide covers deployment to Firebase Hosting, Netlify, and Vercel.

Pre-Deployment Checklist

Before deploying to production, ensure you have:

Configure Firebase

Complete the Firebase Setup with production credentials.

Set Security Rules

Configure Firestore Security Rules to protect your data.

Test Locally

Test all features locally with your production Firebase project.

Create Admin User

Create at least one admin user in Firebase Authentication console.

Never deploy without security rules! Your database will be vulnerable to unauthorized access.

Deployment Options

Option 1: Firebase Hosting (Recommended)

Firebase Hosting provides seamless integration with Firebase services and automatic SSL certificates.

Install Firebase CLI

Install the Firebase command-line tools:

npm install -g firebase-tools

Authenticate with your Google account:

firebase login

Initialize Firebase Hosting

Navigate to your StockPro source directory and initialize hosting:

cd ~/workspace/source
firebase init hosting

When prompted:

Select project: Choose your Firebase project
Public directory: Enter public
Configure as SPA: No
Set up automatic builds: No
Overwrite files: No

Deploy to Firebase

Deploy your application:

firebase deploy --only hosting

Your app will be deployed to: https://your-project.web.app

Custom Domain Setup (Firebase)

Navigate to Hosting Settings

Go to Firebase Console → Hosting → Add custom domain

Enter Your Domain

Enter your domain name (e.g., stockpro.yourdomain.com)

Verify Ownership

Add the provided TXT record to your DNS settings

Configure DNS

Add the A records provided by Firebase to your DNS:

A    @    151.101.1.195
A    @    151.101.65.195

Or for subdomains, use CNAME:

CNAME    stockpro    your-project.web.app

SSL certificates are automatically provisioned and renewed by Firebase. This may take up to 24 hours for initial setup.

Option 2: Netlify

Netlify offers simple drag-and-drop deployment with automatic SSL and global CDN.

Create Netlify Account

Deploy via Drag-and-Drop

Navigate to the Netlify dashboard
Drag your public folder directly onto the deployment zone
Wait for deployment to complete

Your site will be live at: https://random-name-123.netlify.app

Configure Site Settings

Click Site settings
Change site name to something memorable (e.g., stockpro-yourcompany)
Your new URL: https://stockpro-yourcompany.netlify.app

Deploy with Netlify CLI

For automated deployments:

# Install Netlify CLI
npm install -g netlify-cli

# Login
netlify login

# Deploy
cd ~/workspace/source/public
netlify deploy --prod

Custom Domain Setup (Netlify)

Navigate to Domain Settings

Site settings → Domain management → Add custom domain

Add Your Domain

Enter your domain (e.g., stockpro.yourdomain.com)

Configure DNS

Add CNAME record in your DNS provider:

CNAME    stockpro    stockpro-yourcompany.netlify.app

Or for apex domains, use Netlify’s nameservers:

dns1.p05.nsone.net
dns2.p05.nsone.net
dns3.p05.nsone.net
dns4.p05.nsone.net

Enable HTTPS

Netlify automatically provisions SSL certificates. Wait 1-2 minutes for activation.

Option 3: Vercel

Vercel provides fast global deployment with edge network optimization.

Create Vercel Account

Install Vercel CLI

npm install -g vercel

Deploy

cd ~/workspace/source/public
vercel --prod

Follow the prompts:

Set up and deploy: Yes
Link to existing project: No
Project name: stockpro
Directory: ./ (current directory)

Custom Domain Setup (Vercel)

Navigate to Project Settings

Vercel Dashboard → Your Project → Settings → Domains

Add Domain

Enter your domain and click Add

Configure DNS

Add the provided DNS records to your domain registrar:

A    @    76.76.21.21

Or for subdomains:

CNAME    stockpro    cname.vercel-dns.com

Production Configuration

Update Firebase Configuration

Ensure public/js/firebase.js uses your production Firebase project:

const firebaseConfig = {
  apiKey: "YOUR_PRODUCTION_API_KEY",
  authDomain: "stockpro-prod.firebaseapp.com",
  projectId: "stockpro-prod",
  storageBucket: "stockpro-prod.firebasestorage.app",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
};

Do not use development or staging Firebase credentials in production!

Authorize Production Domain

Add your production domain to Firebase authorized domains:

Navigate to Authentication Settings

Firebase Console → Authentication → Settings → Authorized domains

Add Domain

Click Add domain and enter your production URL:

stockpro.yourdomain.com
your-project.web.app (Firebase Hosting)
stockpro-company.netlify.app (Netlify)
stockpro.vercel.app (Vercel)

Set Firestore Security Rules

Before going live, deploy production security rules:

firebase deploy --only firestore:rules

See Security Rules for detailed configuration.

Build Process

StockPro is a static site with no build step required. However, if you want to add optimization:

Optional: Minification

Minify JavaScript and CSS for better performance:

# Install minification tools
npm install -g terser clean-css-cli html-minifier

# Create optimized build
mkdir -p dist

# Copy and minify files
cp -r public/* dist/

find dist -name '*.js' -exec terser {} -o {} \;
find dist -name '*.css' -exec cleancss -o {} {} \;
find dist -name '*.html' -exec html-minifier --collapse-whitespace --remove-comments {} -o {} \;

# Deploy dist folder instead of public

Optional: Environment Variables

For managing multiple environments, use a build script:

import fs from 'fs';

const env = process.env.NODE_ENV || 'development';
const config = {
  development: {
    apiKey: process.env.DEV_FIREBASE_API_KEY,
    projectId: 'stockpro-dev'
  },
  production: {
    apiKey: process.env.PROD_FIREBASE_API_KEY,
    projectId: 'stockpro-prod'
  }
};

const firebaseConfig = config[env];

// Generate firebase.js with environment-specific config
const template = `
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
import { getAuth } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js";

const firebaseConfig = ${JSON.stringify(firebaseConfig, null, 2)};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db };
`;

fs.writeFileSync('public/js/firebase.js', template);
console.log(`Built for ${env}`);

Post-Deployment Verification

After deployment, verify everything works:

Test Authentication

Navigate to your production URL
Try logging in with a test account
Verify authentication redirects work correctly

Test Firestore Access

Check that data loads correctly
Verify create/update/delete operations
Confirm security rules are enforced

Check Browser Console

Open developer tools and check for:

No JavaScript errors
No Firebase configuration errors
No CORS or security warnings

Test All Features

Go through your application workflow:

User authentication
Inventory management
POS functionality
Reports and analytics

Rollback Strategy

Firebase Hosting Rollback

# View deployment history
firebase hosting:channel:list

# Rollback to previous version
firebase hosting:rollback

Netlify Rollback

Go to Netlify Dashboard → Deploys
Find previous working deployment
Click options menu → Publish deploy

Vercel Rollback

Go to Vercel Dashboard → Deployments
Find previous working deployment
Click … → Promote to Production

Continuous Deployment

GitHub Actions (Firebase)

Automate deployments with GitHub Actions:

.github/workflows/deploy.yml

name: Deploy to Firebase Hosting

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          channelId: live
          projectId: your-project-id

Git Integration (Netlify/Vercel)

Both Netlify and Vercel offer automatic deployments from Git:

Connect Git Repository

Link your GitHub, GitLab, or Bitbucket repository

Configure Build Settings

Base directory: Leave empty
Build command: Leave empty (no build needed)
Publish directory: public

Enable Auto Deploy

Every push to your main branch will trigger automatic deployment

Monitoring and Analytics

Firebase Analytics

Track user behavior with Firebase Analytics:

public/js/firebase.js

import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-analytics.js";

const analytics = getAnalytics(app);
export { auth, db, analytics };

Performance Monitoring

Monitor app performance:

import { getPerformance } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-performance.js";

const perf = getPerformance(app);

Troubleshooting

Deployment Succeeds but Site Shows Old Version

Cause: Browser caching or CDN cache Solution:

Clear browser cache (Ctrl+Shift+R)
Wait 5-10 minutes for CDN propagation
Use cache-busting query parameters: ?v=2

”Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR”

Cause: SSL certificate not yet provisioned Solution: Wait 24 hours for SSL certificate provisioning, then refresh.

Authentication Works Locally but Not in Production

Cause: Production domain not authorized in Firebase Solution: Add domain to Firebase Console → Authentication → Settings → Authorized domains

Get Started

Core Features

User Guide

Configuration

Pre-Deployment Checklist

Deployment Options

Option 1: Firebase Hosting (Recommended)

Custom Domain Setup (Firebase)

Option 2: Netlify

Deploy with Netlify CLI

Custom Domain Setup (Netlify)

Option 3: Vercel

Custom Domain Setup (Vercel)

Production Configuration

Update Firebase Configuration

Authorize Production Domain

Set Firestore Security Rules

Build Process

Optional: Minification

Optional: Environment Variables

Post-Deployment Verification

Rollback Strategy

Firebase Hosting Rollback

Netlify Rollback

Vercel Rollback

Continuous Deployment

GitHub Actions (Firebase)

Git Integration (Netlify/Vercel)

Monitoring and Analytics

Firebase Analytics

Performance Monitoring

Troubleshooting

Deployment Succeeds but Site Shows Old Version

”Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR”

Authentication Works Locally but Not in Production

Next Steps

Security Rules

Dashboard Metrics

Build docs developers (and LLMs) love

Get Started

Core Features

User Guide

Configuration

​Pre-Deployment Checklist

​Deployment Options

​Option 1: Firebase Hosting (Recommended)

​Custom Domain Setup (Firebase)

​Option 2: Netlify

​Deploy with Netlify CLI

​Custom Domain Setup (Netlify)

​Option 3: Vercel

​Custom Domain Setup (Vercel)

​Production Configuration

​Update Firebase Configuration

​Authorize Production Domain

​Set Firestore Security Rules

​Build Process

​Optional: Minification

​Optional: Environment Variables

​Post-Deployment Verification

​Rollback Strategy

​Firebase Hosting Rollback

​Netlify Rollback

​Vercel Rollback

​Continuous Deployment

​GitHub Actions (Firebase)

​Git Integration (Netlify/Vercel)

​Monitoring and Analytics

​Firebase Analytics

​Performance Monitoring

​Troubleshooting

​Deployment Succeeds but Site Shows Old Version

​”Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR”

​Authentication Works Locally but Not in Production

​Next Steps

Security Rules

Dashboard Metrics

Build docs developers (and LLMs) love

Pre-Deployment Checklist

Deployment Options

Option 1: Firebase Hosting (Recommended)

Custom Domain Setup (Firebase)

Option 2: Netlify

Deploy with Netlify CLI

Custom Domain Setup (Netlify)

Option 3: Vercel

Custom Domain Setup (Vercel)

Production Configuration

Update Firebase Configuration

Authorize Production Domain

Set Firestore Security Rules

Build Process

Optional: Minification

Optional: Environment Variables

Post-Deployment Verification

Rollback Strategy

Firebase Hosting Rollback

Netlify Rollback

Vercel Rollback

Continuous Deployment

GitHub Actions (Firebase)

Git Integration (Netlify/Vercel)

Monitoring and Analytics

Firebase Analytics

Performance Monitoring

Troubleshooting

Deployment Succeeds but Site Shows Old Version

”Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR”

Authentication Works Locally but Not in Production

Next Steps