Fase 1: Control de proyecto

Contenidos

  • Instalación de pnpm / Ecosistema Node
  • Estructura de carpetas
  • Uso y configuración de Linters
  • Uso básico de Git + GitHub + GitHub Pages
  • Automatizar desde CLI

Entiende, mejora y haz más eficientes tus procesos para construir cosas.

Instalación de Node

# Instalamos pnpm
curl -fsSL https://get.pnpm.io/install.sh | sh -
pnpm --version

# Instalamos Node (LTS)
pnpm env use --global lts
node --version
  • ¿Por qué pnpm y no npm?

Instalación de otros lenguajes

  • Toolchain de instalación de Rust → RustUp
  • Lenguaje: Rust
# Instalación de dependencias necesarias
# Descarga del instalador de Rust e instalación
sudo apt install curl build-essential -y
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Comprobación de la versión del instalador de Rust
cargo --version
rustc --version

# Ejemplo de instalación
cargo install nuls
  • Instalación manual de Go → Descarga
  • Lenguaje: Go
# Borramos la carpeta de Go y descargamos la nueva versión
rm -rf /usr/local/go
wget "https://go.dev/dl/go1.26.0.linux-amd64.tar.gz"

# Descomprimimos en la ruta /usr/local y añadimos al PATH
tar -C /usr/local -xzf go1.23.2.linux-amd64.tar.gz
set -Ux PATH /usr/local/go/bin $PATH

# Comprobamos la versión instalada
go version
  • Instalación automática de Python
  • Lenguaje: Python
# Instalación de dependencias de Python
sudo apt install python3-full python3 python3-pip

# Crear un entorno virtual para Python
python3 -m venv ~/.python

# Activar el entorno
. ~/.python/bin/activate.fish

Estructura de carpetas

  • ¿Sabrías replicar esta estructura de carpetas?
📁 /home/manz/workspace               # Carpeta de trabajo (donde están otros proyectos)
 ├── 📁 project-name                  # Carpeta del proyecto (la que hay que abrir en VSCode)
 │    ├── 📁 src                      # Código editable y ficheros relacionados
 │    │    ├── 🟧 index.html          # Nuestro HTML
 │    │    ├── 🟪 index.css           # Nuestro CSS
 │    │    └── 🟨 index.js            # Nuestro Javascript
 │    ├── 📄 README.md                # Instrucciones o comentarios del proyecto
 │    ├── 📄 .gitignore               # Ficheros o carpetas a ignorar (lo que no nos interesa)
 :    └── 📄 package.json             # Fichero de información del proyecto

Estructura de carpetas

# Forma fácil

cd workspace
mkdir project-name
cd project-name
pnpm init
mkdir src
touch src/index.html
touch src/index.css
touch src/index.js
touch README.md
touch .gitignore

# Forma pro
cd workspace
mkdir -p project-name/src
cd project-name
pnpm init
touch src/index.{html,css,js}
touch {README.md,.gitignore}

# Forma cobarde
cd workspace
mkdir project-name && cd project-name
code .

Estructura de carpetas (II)

📁 project-name                  # Carpeta del proyecto
 ├── 📁 src                      # Código fuente editable
 │    ├── 📁 assets              # Ficheros estáticos
 │    │    ├── 📁 fonts          # Tipografías
 │    │    └── 📁 images         # Imágenes
 │    ├── 🟧 index.html          # Nuestro HTML
 │    ├── 📁 css                 # Carpeta de estilos
 │    │    └── 🟪 global.css     # Archivo CSS
 │    ├── 📁 modules             # Carpeta de modulos Javascript
 │    └── 🟨 main.js             # Javascript principal
 ├── 📄 README.md                # Instrucciones o comentarios del proyecto
 ├── 📄 .gitignore               # Ficheros o carpetas a ignorar (lo que no nos interesa)
 └── 📄 package.json             # Fichero de información del proyecto

Trabajar con un servidor local

  • Simular un entorno real en local
  • Accesible desde [http://localhost:1234] (a veces 127.0.0.1 en vez de localhost)
  • Actualización al hacer cambios
# Opción 1: servor (✅ rápido, ✅ ligero, ✅ sin dependencias)
pnpm add servor

pnpx servor src/ index.html 1234 --reload

# Opción 2: live-server (popular)
pnpm add live-server

pnpx live-server src/ --no-browser --port=1234

# Opción 3: vite (potente, DX, hace muchas cosas extra, lo usaremos más adelante)
pnpm add vite

pnpx vite src/ --port 1234
  • Comparación en npmx
  • Asegúrate de que el live reload funcione, a veces puede dar problemas

Crear un proyecto con pnpm

  • El fichero package.json
  • El name en minúsculas, con guiones. Mismo nombre que la carpeta.
  • Realmente, las dependencias que no participan en la web final, son de desarrollo.
# Inicializa. Crea `package.json`. ESM.
pnpm init
pnpm pkg set type=module

# Instala dependencias en node_modules/
pnpm add -D servor

# Desinstala dependencias
pnpm remove servor

{
  "name": "project-name",
  "description": "My pet project",
  "type": "module",
  "author": "ManzDev",
  "devDependencies": {
    "servor": "^4.0.2",
  }
}

Trabajar con dependencias

{
  "name": "project-name",
  "description": "My pet project",
  "type": "module",
  "author": "ManzDev",
  "dependencies": {
    "servor": "^4.0.2",
  }
}

pnpm add servor             # ^4.x.x
pnpm add -E servor@4.0.2    # 4.0.2 (exacta)
pnpm add -D servor          # De desarrollo
pnpm add -g servor          # Global (evitar)
pnpx npm-check -u           # Actualizaciones

# Truco: añade siempre versiones exactas
echo "save-exact=true" >>.npmrc

Automatizar scripts

  • Identifica comandos complejos para simplificarlos
  • Añadelos en la propiedad scripts del package.json
{
  "scripts": {
    "test": "echo \"Error...\" && exit 1",      <- Puedes eliminar esta linea
    "dev": "servor src/ index.html 1234 --reload",
    "lint": "oxlint src/",
    "format": "oxfmt src/"
  }
}

Ahora, simplemente ejecutalos con su nombre: pnpm run dev

Linters / Formatters

Linters / Formatters (I)

  • Herramientas que revisan tu código, formatean y evitan problemas
  • ESLint > OxLint
  • Comprueba primero que funciona desde terminal
// src/index.js
const unused_var = "ManzDev";
const   url = "https://manz.dev/";

url = "esto no se puede hacer";

   console.log(url);

# Instalación de linter + formateador
pnpm add -D oxlint oxfmt

# Crea reglas de configuración
pnpx oxlint --init
echo "node_modules/" >.eslintignore

# Ejecutamos
pnpx oxlint

Linters / Formatters (II)

{
  "css.validate": false,
  "javascript.validate.enable": false,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "oxc.oxc-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.oxc": "always"
  },
}


// Desactiva el linter nativo de CSS
// Desactiva el linter nativo de JS
// Activa formatear al guardar
// Usa OXC como formateador por defecto

// Cuando guardas, corrige código

Linters / Formatters (III)

{
  "editor.defaultFormatter": "oxc.oxc-vscode", ❌
  "[javascript]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
}

Git

Git (I)

  • ¿Qué es Git? Control de versiones de código
  • Instalación de Git-SCM (Windows) y cliente (WSL, Linux)
sudo apt install git
git --version

git config --global user.name "usuario"                   # Aunque no es necesario 100%, intenten
git config --global user.email "usuario@dominio.com"      # que coincidan con los de GitHub
git config --global --list

# Necesario si usas HTTPS
git config --global credential.helper \
  "/mnt/c/Program\ Files/Git/mingw64/bin/git-credential-manager.exe"

Git (II)

  • Inicializar repositorio local con git init
  • Añadir y revisar cambios con git add <file> / git reset <file>
  • Guardar cambios en local con git commit
# Vamos a la carpeta del proyecto
cd workspace/project-name

# Inicializamos repositorio git local
git init

# Comprobamos el estado
git status

# Añadimos nuevos ficheros
git add index.html
git add index.css

git status

# Guardamos los cambios
git commit -m "Add first files"

Git (III)

  • Consultar commits git log
  • Clonar un repositorio remoto git clone (vía HTTPS, solo cosas sencillas)
git clone https://github.com/ManzDev/gallinerica
Clonando en 'gallinerica'...
remote: Enumerating objects: 364, done.
remote: Counting objects: 100% (364/364), done.
remote: Compressing objects: 100% (303/303), done.
remote: Total 364 (delta 141), reused 281 (delta 58), pack-reused 0 (from 0)
Recibiendo objetos: 100% (364/364), 4.33 MiB | 5.47 MiB/s, listo.
Resolviendo deltas: 100% (141/141), listo.

git log --oneline

GitHub

GitHub (I)

  • Crear repositorio en GitHub (remoto) -> A través de la web
  • Añadir el repositorio remoto en local -> git remote
  • Subir al remoto -> git push
# Añadimos origin (repo remoto) a main (rama principal local)
git remote add origin https://github.com/ManzDev/gallinerica

# Si hay gente trabajando en el proyecto, traete siempre los cambios
git pull

# Subimos los cambios del repo local al remoto
# (las siguientes simplemente `git push`)
git push -u origin main

GitHub (II)

ssh-keygen -t ed25519 -C "usuario@dominio.com"

# (Clave privada 🔑) -> Tu PC:
# /home/usuario/.ssh/id_ed25519

# (Clave pública 🔒) -> GitHub:
# /home/usuario/.ssh/id_ed25519.pub

cat /home/usuario/.ssh/id_ed25519.pub
ssh-ed25519 ############################ Usuario@dominio.com

# A partir de ahora, mejor así:
git remote add origin git@github.com:ManzDev/gallinerica.git
git clone git@github.com:ManzDev/gallinerica.git

GitHub (III)

# Crea un repositorio público de la carpeta actual, usando el origin
gh repo create --public ManzDev/nombre-de-repo --source . --remote origin

# Ver si existen PR (pull request)
gh pr view

# Echa un vistazo al repositorio
gh repo view

Git (IV)

Comando Modifica último commit Descripción
git commit --amend ✅ Sí Reescribe último commit añadiendo lo nuevo
git reset HEAD~1 ✅ Sí Mantiene los cambios en la carpeta (sin vigilar)
git reset --soft HEAD~1 ✅ Sí Mantiene los cambios en la carpeta (vigilando)
git reset --hard HEAD~1 ✅ Sí Se pierden los cambios en la carpeta
git revert ❌ No Añade nuevo commit deshaciendo el último
  • * HEAD~1 significa «el commit anterior al que estás ahora»
  • Paciencia, lo irás descubriendo poco a poco a medida que lo necesites.

Git (V)

  • Ramas (bifurcaciones): Caminos donde hay variaciones, nuevos desarrollos y/o alternativas.
  • Saltar entre ramas para revisar git checkout
  • Cambiar a ramas concretas git switch
# Saltar a una rama concreta (para revisar)
git log
git checkout <id-commit>

git switch main  # Vuelve a la rama principal

git switch -c nombre-nueva-rama <id-commit>
git branch -d nombre-rama  # Borra rama local
git push origin --delete nombre-rama # remota

# Crea nueva rama desde donde estás
git switch -c nombre-rama

# Vamos a main y traemos cambios remotos
git switch main
git pull origin main

# Mezclamos la rama con nuestro main
git merge nombre-rama

Git (VI)

  • Más adelante, recomendable usar pestaña Git (VSCode) o cosas como LazyGit.
  • Poco a poco, aprenderás a usar funcionalidades más avanzadas.
  • Primero aprende a trabajar tu sólo. Luego, aprende a trabajar con más personas.
  • Flujo habitual (gitflow clásico, no es el único): Rama main, rama develop, ramas para features
  • Pero tómate tiempo en entender las bases de Git practicando.

GitHub Pages

Despliegue en GitHub Pages

  • Código fuente: github.com/user/repo, GitHub Pages (webs alojadas): user.github.io/repo
  • Solo frontend (no backend o bases de datos)
  • Más adelante, la carpeta a desplegar no será src/ sino dist/
# Instalamos comando para desplegar
pnpm add -D gh-pages

# Despliegue en la rama `gh-pages`
gh-pages -d src

# Buena idea: añadirlo en package.json (en scripts)
{
  "deploy": "gh-pages -d src/"
}

Preguntas