Installation Overview
This guide covers the complete installation process for Luis IT Repair, including development setup, Firebase project configuration, Firestore database initialization, and production deployment to Firebase Hosting.Prerequisites
Before you begin, ensure you have:Node.js 18+
Git
Google Account
Required for Firebase Console accessSign up at accounts.google.com
Code Editor
Recommended: VS Code with extensions
- ESLint
- Firebase
- Vite
Part 1: Repository Setup
Clone the Repository
Clone the Luis IT Repair source code:Project Structure
Understand the project organization:Install Dependencies
Install all required npm packages:- Core
- Firebase
- UI Libraries
- Utilities
Part 2: Firebase Project Setup
Create Firebase Project
Access Firebase Console
Navigate to Firebase ConsoleSign in with your Google account
Create New Project
Click Add project
- Project name: Enter a descriptive name (e.g., “luis-it-repair-prod”)
- Google Analytics: Optional (recommended for production)
- Analytics account: Select existing or create new
Register Web Application
Add Web App
In Project Overview, click the web icon
</>- App nickname: “Luis IT Repair Web App”
- Check “Also set up Firebase Hosting”
- Click Register app
Part 3: Firebase Services Configuration
Enable Firebase Authentication
Enable Email/Password Provider
Go to Sign-in method tabFind Email/Password in the native providers listToggle Enable and click Save
Initialize Cloud Firestore
Select Database Mode
Choose Start in production modeWe’ll deploy proper security rules in the next step
Choose Database Location
Select a region close to your users:
- North America:
us-central1,us-east1 - South America:
southamerica-east1 - Europe:
europe-west1 - Asia:
asia-northeast1
Database location cannot be changed after creation.
Deploy Firestore Security Rules
Login to Firebase
Authenticate with your Google account:This will open a browser window for authentication
Link Project
Initialize Firebase in your project directory:Select your Firebase project from the listEnter an alias (e.g., “default” or “production”)
Configure Cloud Functions (Optional)
Part 4: Database Initialization
Create Initial Collections
Create Folio Counter
Click Start collection
- Collection ID:
contadores_folio - Document ID:
global - Fields:
Create Collections Structure
The application will auto-create collections on first use:
servicios- Service ordersclientes- Customersproductos- Product inventoryventas- Sales transactionscortes_caja- Daily cash reportsegresos_diarios- Daily expensesempleados- Employee recordsautorizados- Authorized users
Create Admin User
Add User via Authentication
Go to Authentication → UsersClick Add user
- Email: [email protected]
- Password: Choose a strong password
Part 5: Local Development
Run Development Server
Start the Vite development server:Test the Application
Development Tips
Hot Module Replacement (HMR)
Hot Module Replacement (HMR)
Vite provides instant HMR. Changes to React components update in the browser without full reload.Edit any
.jsx file and see changes immediately.Firebase Emulators (Optional)
Firebase Emulators (Optional)
Use Firebase emulators for local development:This runs local versions of Firestore, Functions, and Auth for testing without consuming production quota.
Debug Firestore Queries
Debug Firestore Queries
Enable Firestore debug logging:
Part 6: Production Build
Build for Production
Create an optimized production build:dist/ directory:
Preview Production Build
Test the production build locally:dist/ folder on http://localhost:4173
Part 7: Deploy to Firebase Hosting
Configure Firebase Hosting
Thefirebase.json configuration is already set up:
firebase.json
The rewrite rules enable:
- SPA routing (all routes serve index.html)
- Cloud Functions integration for API proxying
Deploy to Hosting
Custom Domain (Optional)
Add Custom Domain
In Firebase Console, go to Hosting → Add custom domainEnter your domain (e.g.,
repairs.yourcompany.com)Part 8: Post-Deployment Configuration
Configure Business Settings
After deployment, configure your business-specific settings:Configure Appearance
Navigate to
/configuracion/aparienciaSet:- Business name
- Logo
- Color scheme
- Theme (light/dark)
Configure POS Settings
Go to
/configuracion/posSet:- Tax rates
- Receipt header/footer
- Payment methods
- Barcode scanner settings
Monitoring and Maintenance
Monitor Usage
Firebase Console
Monitor in Firebase Console:
- Authentication: Daily active users
- Firestore: Read/write operations
- Hosting: Bandwidth usage
- Functions: Invocations and errors
Performance Monitoring
Enable Firebase Performance Monitoring:
Backup Strategy
Automatic Backups
Set up automated Firestore backups:Go to Firestore → Backups in Google Cloud ConsoleCreate a backup schedule (daily recommended)
Update Application
To update your deployed application:Troubleshooting
Build fails with memory errors
Build fails with memory errors
Increase Node.js memory limit:
package.json
Firebase deploy fails with permissions error
Firebase deploy fails with permissions error
Ensure you’re logged in to the correct account:
Routes return 404 after deployment
Routes return 404 after deployment
Verify
firebase.json includes the SPA rewrite:Firestore quota exceeded
Firestore quota exceeded
Monitor usage in Firebase ConsoleUpgrade to Blaze plan for higher limits:
- Spark (free): 50K reads, 20K writes per day
- Blaze: Pay-as-you-go pricing
Authentication issues in production
Authentication issues in production
Verify authorized domains in Firebase Console:Authentication → Settings → Authorized domainsAdd your custom domain if using one
Next Steps
Creating Service Tickets
Learn how to create and manage service tickets
API Reference
Explore the Firebase services and functions
POS Configuration
Configure the Point of Sale system
Appearance
Customize the application appearance
Need Help? Check our FAQ, community forums, or open a GitHub issue for technical support.
