Skip to main content
SGD-MCS (Sistema de Gestión Documental para Maestrías en Ciencias de la Salud) is a document management system for Master’s programs built with React and Google Apps Script.

​
Overview

This guide will help you deploy SGD-MCS from scratch. You’ll set up:
  • Google Apps Script backend with Google Drive integration
  • React frontend bundled as a single HTML file
  • Google Sheets database for storing entities
1

Prerequisites

Ensure you have the following installed:
  • Node.js (v18 or higher) and npm
  • Google Account with access to Google Drive, Sheets, and Apps Script
  • clasp CLI for deploying Google Apps Script
npm install -g @google/clasp
clasp login
2

Clone and Install

Navigate to the project source and install dependencies:
cd workspace/source/Fronted
npm install
The frontend uses Vite with React 19 and includes visualization libraries like ApexCharts, Recharts, and Leaflet for geospatial mapping.
3

Configure Google Sheets Database

Create a new Google Sheet to serve as your database with the following sheets (tabs):
  • Estudiantes - Student records
  • Docentes - Faculty/teacher records
  • Tesis - Thesis projects
  • Eventos - Events and activities
  • Instituciones - Partner institutions
  • ParticipantesExternos - External participants
  • Participaciones - Event participation records (M:N relationship)
  • Historial_Documentos - Document history/audit trail
  • Configuracion - System configuration
Copy the Spreadsheet ID from the URL:
https://docs.google.com/spreadsheets/d/{SPREADSHEET_ID}/edit
4

Configure Backend

Update ~/workspace/source/Backend/core/config.js with your IDs:
// Your Google Sheets Database ID
const SPREADSHEET_ID = 'YOUR_SPREADSHEET_ID_HERE';

// Root folder in Google Drive (optional)
const ROOT_FOLDER_ID = 'YOUR_DRIVE_FOLDER_ID'; // Leave empty to use Drive root
Keep your SPREADSHEET_ID secure. Anyone with this ID can access your database if the sheet permissions allow it.
5

Build Frontend

Build the React app into a single HTML file:
cd workspace/source/Fronted
npm run build
This creates workspace/source/Backend/web/index.html with all assets inlined. The Vite config is set up to:
build: {
  outDir: '../backend/web',
  emptyOutDir: false,
  target: 'esnext',
  assetsInlineLimit: 100000000, // Inline everything
  rollupOptions: {
    output: {
      inlineDynamicImports: true, // Single bundle
    },
  },
}
6

Deploy to Google Apps Script

Initialize clasp in the backend directory (first time only):
cd workspace/source/Backend
clasp create --type webapp --title "SGD-MCS v3.0" --rootDir ./
Or if .clasp.json already exists, just push:
cd workspace/source/Backend
clasp push
Deploy as a web app:
clasp deploy --description "SGD-MCS Production v3.0"
7

Configure Web App Permissions

After deployment:
  1. Run clasp open to open the Apps Script editor
  2. Click Deploy > Manage deployments
  3. Select your deployment and click Edit
  4. Set:
    • Execute as: User accessing the web app (or “Me” for service account mode)
    • Who has access: Anyone (for public access) or specific domain
  5. Copy the Web app URL
The appsscript.json manifest includes required OAuth scopes:
  • https://www.googleapis.com/auth/spreadsheets
  • https://www.googleapis.com/auth/drive
  • https://www.googleapis.com/auth/script.external_request
8

Test the Application

Open the Web app URL in your browser. You should see:
  1. Dashboard with statistics cards showing:
    • Total students (active, graduated, alumni)
    • Thesis projects (in progress, completed)
    • Recent events
  2. Navigation with modules:
    • Students, Teachers, Thesis, Events
    • Document Hub for file management
    • Repository for uploaded documents
The app uses doGet() to serve the React SPA:
function doGet() {
  return HtmlService.createHtmlOutputFromFile('web/index')
    .setTitle('SGD-MCS v3.0')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

​
Next Steps

Installation Guide

Detailed setup instructions and configuration options

Architecture

Learn how the system is structured

API Reference

Explore backend API functions

Customization

Customize themes, colors, and branding

​
Common Issues

Make sure the Backend/web directory exists:
mkdir -p workspace/source/Backend/web
Verify that:
  1. Your SPREADSHEET_ID in config.js is correct
  2. The Google account deploying has access to the spreadsheet
  3. All required sheet tabs exist
Check the browser console for errors. Common causes:
  1. index.html wasn’t generated in Backend/web/
  2. Apps Script deployment is outdated (run clasp push again)

Build docs developers (and LLMs) love

Get started for freeTalk to us