Skip to main content

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.
This guide assumes you have basic knowledge of command line operations, Node.js development, and Firebase services.

Prerequisites

Before you begin, ensure you have:

Node.js 18+

Download from nodejs.orgVerify installation:
node --version  # v18.0.0 or higher
npm --version   # 9.0.0 or higher

Git

Download from git-scm.comVerify installation:
git --version

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:
git clone https://github.com/yourusername/LuisITRepair.git
cd LuisITRepair

Project Structure

Understand the project organization:
LuisITRepair/
├── src/
│   ├── components/        # Reusable React components
│   ├── pages/            # Page-level components
│   ├── initializer/      # Firebase configuration
│   ├── js/
│   │   ├── services/     # Business logic & Firebase operations
│   │   └── utils/        # Helper functions
│   ├── css/              # Stylesheets (SCSS)
│   ├── App.jsx           # Main routing
│   └── main.jsx          # Application entry point
├── functions/            # Firebase Cloud Functions
├── public/               # Static assets
├── firebase.json         # Firebase configuration
├── firestore.rules       # Firestore security rules
├── firestore.indexes.json # Firestore indexes
├── vite.config.js        # Vite configuration
└── package.json          # Dependencies

Install Dependencies

Install all required npm packages:
npm install
Key dependencies installed:
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-router-dom": "^7.13.0",
"vite": "^7.2.4"

Part 2: Firebase Project Setup

Create Firebase Project

1

Access Firebase Console

Navigate to Firebase ConsoleSign in with your Google account
2

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
Click Create project and wait for initialization
3

Configure Project Settings

After creation, go to Project Settings (gear icon)Note your Project ID - you’ll need this for deployment

Register Web Application

1

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
2

Copy Configuration

Firebase will display your web app configuration:
const firebaseConfig = {
  apiKey: "AIzaSyBj5ffv-VNRqxkiaWKUhzY4FBKRkzp5rW4",
  authDomain: "hojaservice-3ab3d.firebaseapp.com",
  projectId: "hojaservice-3ab3d",
  storageBucket: "hojaservice-3ab3d.firebasestorage.app",
  messagingSenderId: "747179979894",
  appId: "1:747179979894:web:0a86e472eb8b34fb7e5b57",
  measurementId: "G-CP172JQXTD"
};
Keep these credentials secure. Don’t commit them to public repositories.
3

Update Local Configuration

Edit src/initializer/firebase.js with your configuration:
src/initializer/firebase.js
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.firebasestorage.app",
  messagingSenderId: "YOUR_MESSAGING_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

export const db = getFirestore(app);
export const auth = getAuth(app);

Part 3: Firebase Services Configuration

Enable Firebase Authentication

1

Navigate to Authentication

In Firebase Console, go to BuildAuthenticationClick Get started
2

Enable Email/Password Provider

Go to Sign-in method tabFind Email/Password in the native providers listToggle Enable and click Save
3

Configure Password Policy (Optional)

Go to Settings tabAdjust password requirements:
  • Minimum length (default: 6)
  • Require uppercase/lowercase
  • Require numbers/symbols

Initialize Cloud Firestore

1

Create Firestore Database

Navigate to BuildFirestore DatabaseClick Create database
2

Select Database Mode

Choose Start in production modeWe’ll deploy proper security rules in the next step
3

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.
4

Complete Setup

Click Enable and wait for database initialization

Deploy Firestore Security Rules

1

Install Firebase CLI

Install the Firebase command-line tools globally:
npm install -g firebase-tools
Verify installation:
firebase --version  # 13.0.0 or higher
2

Login to Firebase

Authenticate with your Google account:
firebase login
This will open a browser window for authentication
3

Link Project

Initialize Firebase in your project directory:
firebase use --add
Select your Firebase project from the listEnter an alias (e.g., “default” or “production”)
4

Review Security Rules

The included firestore.rules file provides:
firestore.rules
rules_version='2'

service cloud.firestore {
  match /databases/{database}/documents {
    
    // Public read for service status (customer portal)
    match /servicios/{document=**} {
      allow read: if true;
      allow write: if request.auth != null;
    }
    
    // Authenticated users only
    match /autorizados/{document=**} {
      allow read, write: if request.auth != null;
    }
    
    match /clientes/{document=**} {
      allow read, write: if request.auth != null;
    }
    
    match /productos/{document=**} {
      allow read, write: if request.auth != null;
    }
    
    match /ventas/{document=**} {
      allow read, write: if request.auth != null;
    }
    
    match /cortes_caja/{document=**} {
      allow read, write: if request.auth != null;
    }
    
    match /folios/{document=**} {
      allow read, write: if request.auth != null;
    }
    
    match /contadores_folio/{document=**} {
      allow read, write: if request.auth != null;
    }
    
    match /egresos_diarios/{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}
5

Deploy Rules

Deploy security rules to Firebase:
firebase deploy --only firestore:rules
Output:
=== Deploying to 'your-project-id'...

i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules

✔  Deploy complete!

Configure Cloud Functions (Optional)

1

Install Functions Dependencies

Navigate to the functions directory:
cd functions
npm install
cd ..
2

Review Function Code

The project includes a Mercado Libre search proxy:
functions/src/index.ts
import * as functions from "firebase-functions";

export const mlSearch = functions
  .region("southamerica-east1")
  .https.onRequest(async (req, res) => {
    // Proxy for Mercado Libre API
    // Used by price comparison feature
  });
3

Deploy Functions

Deploy Cloud Functions:
firebase deploy --only functions
Functions require Firebase Blaze (pay-as-you-go) plan.

Part 4: Database Initialization

Create Initial Collections

1

Navigate to Firestore Console

Go to Firestore Database in Firebase Console
2

Create Folio Counter

Click Start collection
  • Collection ID: contadores_folio
  • Document ID: global
  • Fields:
    servicios: 0 (number)
    ventas: 0 (number)
    
This tracks the next available folio numbers
3

Create Collections Structure

The application will auto-create collections on first use:
  • servicios - Service orders
  • clientes - Customers
  • productos - Product inventory
  • ventas - Sales transactions
  • cortes_caja - Daily cash reports
  • egresos_diarios - Daily expenses
  • empleados - Employee records
  • autorizados - Authorized users

Create Admin User

1

Add User via Authentication

Go to AuthenticationUsersClick Add userClick Add user and copy the generated User UID
2

Authorize in Firestore

Go to Firestore DatabaseCreate document in autorizados collection:
  • Collection ID: autorizados
  • Document ID: Paste the User UID from previous step
  • Fields:
    activo: true (boolean)
    email: "[email protected]" (string)
    nombre: "Administrator" (string)
    online: false (boolean)
    rol: "admin" (string)
    permisos: {
      servicios.crear: true,
      servicios.ver: true,
      servicios.editar: true,
      clientes.ver: true,
      clientes.editar: true,
      productos.ver: true,
      productos.editar: true,
      ventas.pos: true,
      reportes.ver: true,
      configuracion.ver: true,
      empleados.gestionar: true
    } (map)
    
The user must exist in both Authentication and autorizados collection with matching UIDs.

Part 5: Local Development

Run Development Server

Start the Vite development server:
npm run dev
Expected output:
  VITE v7.2.4  ready in 823 ms

  Local:   http://localhost:5173/
  Network: use --host to expose
  press h + enter to show help

Test the Application

1

Open Browser

Navigate to http://localhost:5173
2

Login

Use the admin credentials created earlierThe login process:
src/pages/login.jsx
const userCredential = await signInWithEmailAndPassword(
  auth,
  email.trim(),
  password
);

const docRef = doc(db, "autorizados", user.uid);
const snap = await getDoc(docRef);

if (!snap.exists() || !snap.data().activo) {
  await signOut(auth);
  setError("Usuario no autorizado.");
  return;
}
3

Verify Dashboard

After login, you should see:
  • Dashboard with KPI cards
  • Revenue charts (empty initially)
  • Service calendar
  • Navigation menu

Development Tips

Vite provides instant HMR. Changes to React components update in the browser without full reload.Edit any .jsx file and see changes immediately.
Use Firebase emulators for local development:
firebase emulators:start
This runs local versions of Firestore, Functions, and Auth for testing without consuming production quota.
Enable Firestore debug logging:
import { enableIndexedDbPersistence } from "firebase/firestore";

enableIndexedDbPersistence(db)
  .catch((err) => {
    console.log("Persistence error:", err.code);
  });

Part 6: Production Build

Build for Production

Create an optimized production build:
npm run build
Vite will bundle and optimize your application:
vite v7.2.4 building for production...
 1247 modules transformed.
dist/index.html                   0.89 kB gzip:   0.47 kB
dist/assets/index-DHlPuqnJ.css   89.23 kB gzip:  18.45 kB
dist/assets/index-B2xK7Mno.js   687.12 kB gzip: 198.34 kB
 built in 8.45s
The build output goes to the dist/ directory:
dist/
├── index.html
├── assets/
│   ├── index-[hash].js
│   ├── index-[hash].css
│   └── [other chunks]
└── favicon.ico

Preview Production Build

Test the production build locally:
npm run preview
This serves the dist/ folder on http://localhost:4173

Part 7: Deploy to Firebase Hosting

Configure Firebase Hosting

The firebase.json configuration is already set up:
firebase.json
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/api/ml/search",
        "function": {
          "functionId": "mlSearch",
          "region": "southamerica-east1"
        }
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
The rewrite rules enable:
  • SPA routing (all routes serve index.html)
  • Cloud Functions integration for API proxying

Deploy to Hosting

1

Build Application

Ensure you have a fresh production build:
npm run build
2

Deploy to Firebase

Deploy everything (hosting + rules + functions):
firebase deploy
Or deploy only hosting:
firebase deploy --only hosting
Output:
=== Deploying to 'your-project-id'...

i  deploying hosting
i  hosting[your-project-id]: beginning deploy...
i  hosting[your-project-id]: found 25 files in dist
✔  hosting[your-project-id]: file upload complete
i  hosting[your-project-id]: finalizing version...
✔  hosting[your-project-id]: version finalized
i  hosting[your-project-id]: releasing new version...
✔  hosting[your-project-id]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/your-project-id/overview
Hosting URL: https://your-project-id.web.app
3

Verify Deployment

Open the Hosting URL in your browserTest critical flows:
  • Login with admin account
  • Create a service order
  • Access customer status portal at /status

Custom Domain (Optional)

1

Add Custom Domain

In Firebase Console, go to HostingAdd custom domainEnter your domain (e.g., repairs.yourcompany.com)
2

Verify Ownership

Add the provided TXT record to your DNS settingsClick Verify in Firebase Console
3

Configure DNS Records

Add the A records provided by Firebase:
A    @    151.101.1.195
A    @    151.101.65.195
4

Enable SSL

Firebase automatically provisions SSL certificatesWait 24-48 hours for full propagation

Part 8: Post-Deployment Configuration

Configure Business Settings

After deployment, configure your business-specific settings:
1

Login as Admin

Access your deployed application and login
2

Configure Appearance

Navigate to /configuracion/aparienciaSet:
  • Business name
  • Logo
  • Color scheme
  • Theme (light/dark)
3

Configure POS Settings

Go to /configuracion/posSet:
  • Tax rates
  • Receipt header/footer
  • Payment methods
  • Barcode scanner settings
4

Add Products

Navigate to /productosImport or manually add inventory items
5

Add Employees

Go to /configuracion/empleadosCreate employee accounts with appropriate roles:
  • admin - Full access
  • tecnico - Service management
  • vendedor - POS and sales
  • recepcion - Customer intake only

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:
import { getPerformance } from "firebase/performance";
const perf = getPerformance(app);

Backup Strategy

Implement regular backups of your Firestore data.
1

Automatic Backups

Set up automated Firestore backups:Go to FirestoreBackups in Google Cloud ConsoleCreate a backup schedule (daily recommended)
2

Export Data

Manual export via gcloud CLI:
gcloud firestore export gs://your-bucket/backups/$(date +%Y%m%d)

Update Application

To update your deployed application:
# Pull latest changes
git pull origin main

# Install new dependencies
npm install

# Build and deploy
npm run build
firebase deploy

Troubleshooting

Increase Node.js memory limit:
package.json
{
  "scripts": {
    "build": "NODE_OPTIONS=--max_old_space_size=4096 vite build"
  }
}
Ensure you’re logged in to the correct account:
firebase logout
firebase login
firebase use your-project-id
Verify firebase.json includes the SPA rewrite:
"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  }
]
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
Verify authorized domains in Firebase Console:AuthenticationSettingsAuthorized 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.

Build docs developers (and LLMs) love