https://github.com/neoland-school-es/bootcamp-fullstack
Repositorio para el bootcamp fullstack de Neoland
https://github.com/neoland-school-es/bootcamp-fullstack
angular css express html javascript litelement mongodb nodejs reactjs redux vuejs webcomponents
Last synced: 2 months ago
JSON representation
Repositorio para el bootcamp fullstack de Neoland
- Host: GitHub
- URL: https://github.com/neoland-school-es/bootcamp-fullstack
- Owner: Neoland-School-es
- License: mit
- Created: 2024-12-26T10:43:59.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-12T14:40:53.000Z (over 1 year ago)
- Last Synced: 2025-02-12T15:43:09.692Z (over 1 year ago)
- Topics: angular, css, express, html, javascript, litelement, mongodb, nodejs, reactjs, redux, vuejs, webcomponents
- Homepage: https://neoland.es/bootcamps/web-development/
- Size: 184 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bootcamp Fullstack de Neoland - Enero 2025
Repositorio para el Bootcamp de Fullstack de Neoland, en su convocatoria de Enero de 2025.
A continuación tenéis las instrucciones para configurar vuestro equipo, es un paso fundamental para poder trabajar con el código así que ve paso a paso y si tienes cualquier duda intenta [resolverla primero con tu squad](https://github.com/Neoland-School-es/bootcamp-fullstack/discussions/) o en caso de encontrar un problema puedes [crear una incidencia](https://github.com/Neoland-School-es/bootcamp-fullstack/issues) en el panel de control del repositorio.
## Programas necesarios
Necesitas instalar los siguientes programas para llevar a cabo el curso:
* [Google Chrome](https://www.google.com/intl/es_es/chrome/) será nuestro navegador de desarrollo
* [VS Code](https://code.visualstudio.com/) es la herramienta que usaremos para programar, y las extensiones que usaremos:
* [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) es un servidor local para nuestras páginas html dentro de VS Code
* [Conventional Commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits) nos ayudará a documentar cada cambio de código que subamos al repositorio. Podéis leer la documentación oficial en [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)
* [commitlint](https://marketplace.visualstudio.com/items?itemName=joshbolduc.commitlint) se asegurará de que escribamos bien los comentarios de los cambios en el repositorio
* [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)
* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) nos chivará los errores que cometamos en el código, es una herramienta fundamental para agilizar nuestro trabajo
* [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) igualmente se encargará de guiarnos en la senda del buen programador, a la hora de editar estilos css
* [GitHub Pull Requests](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github) nos facilita la tarea a la hora de gestionar los cambios en el código dentro de nuestro repositorio
* [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) nos ayudará a escribir correctamente el marcado de los documentos de tipo _markdown_
* [Postman](https://marketplace.visualstudio.com/items?itemName=Postman.postman-for-vscode) nos permite trabajar con las APIs que desarrollemos localmente
* [PWABuilder Studio](https://marketplace.visualstudio.com/items?itemName=PWABuilder.pwa-studio) sirve para generar el código necesario para instalar nuestra web como una aplicación nativa
* [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) es el sistema de iconos estándar de Google Material Design
* [lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html) añade compatibilidad para trabajar con LitElement
* [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) nos ayudara a mantener un estandard de configuración de los archivos de nuestro proyecto
* [Codeium](https://marketplace.visualstudio.com/items?itemName=Codeium.codeium) nos ayudara a escribir códigos de manera inteligente gracias a la IA
* [Cascade](https://marketplace.visualstudio.com/items?itemName=rampus-bit.cascade) es un theme de color personalizado, adecuado para el trabajo contínuo con el código
* [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) nos ayudara a cerrar correctamente las etiquetas de html
* [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) nos ayudara a renombrar correctamente las etiquetas de html
* [MongoDB for VS Code](https://marketplace.visualstudio.com/items?itemName=mongodb.mongodb-vscode) nos ayudara a trabajar con la base de datos MongoDB
* [Git](http://git-scm.com/) será nuestro sistema de control de versiones
* Asegúrate de elegir la opción **Git Bash** durante la instalación
* [NodeJS](https://nodejs.org/en) es el lenguaje de programación que usaremos para el backend, y también para nuestras herramientas de automatización
* Una vez instalado, tendrás que añadir a las variables del sistema la ruta para el ejecutable de node:
* En Windows:
1. Busca el programa "Editar las variables de entorno del sistema"
2. Pulsa el botón "Variables de entorno"
3. Haz doble click en la línea que indica **PATH**
4. Pulsa en "Nueva" y añade esta dirección (o la ruta de tu instalación): ```"C:\Program Files\nodejs"```
5. Modifica esta línea si te aparece ```C:\Users\\AppData\Roaming\npm``` a ```"C:\Program Files\nodejs\node_modules\npm\bin"```, o añádela si no está
* En Mac:
1. Abre VS Code
2. Si no tienes abierta una ventana del terminal, ábrela desde el menú (View > Terminal)
3. Ejecuta: ```cd ~/``` y luego ```code .bashrc```, se abrirá una ventana de edición en VS Code.
4. Añade esta línea al archivo: ```PATH=/usr/bin/node:$PATH```, guárdalo y ciérralo
* En Linux:
1. Abre el Terminal
2. Ejecuta ```export PATH=$PATH:/usr/local/nodejs/bin```
* Recuerda que cada vez que modifiques las variables de entorno o rutas del sistema tienes que reiniciar todas las ventanas de terminal o VS Code que tengas abiertas para que recoja los cambios (en Windows tendrás que reiniciar el ordenador).
* [NVM](https://github.com/nvm-sh/nvm) es una herramienta que nos permite cambiar de versiones de NodeJS fácilmente
* Crea el directorio ```C:\Users\\AppData\Roaming\npm```
* Abre el Terminal **BASH** y ejecuta ```curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash```
* **Si te indica algún tipo de error tipo "la función de revocación"**, usa este comando en su lugar: ```curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh --ssl-no-revoke | bash```
* **SI nvm ls-remote devuelve N/A**, añade esta línea a tu .bashrc o .zshrc: ```export NVM_NODEJS_ORG_MIRROR=http://nodejs.org/dist```
* Reinicia el Terminal
* Ahora puedes ejecutar ```nvm install 22```, y cambiar fácilmente de versión de NodeJS a partir de ahora
* [WSL](https://github.com/microsoft/WSL) es el subsistema de Linux, que necesitaremos en Windows para alguna tarea en particular
* Descarga la [última versión estable de WSL](https://github.com/microsoft/WSL/releases/download/2.3.26/wsl.2.3.26.0.x64.msi) y ejecuta el instalador
* Abre Windows PowerShell **como administrador** y ejecuta los comandos:
* ```wsl --set-default-version 2```
* ```wsl --install -d Ubuntu```
* Te preguntará por un nombre y contraseña para Ubuntu (**el usuario en minúsculas**), ¡apúntalos en un lugar seguro para no perderlos!
* Notarás que el terminal "ha cambiado", ahora estás en la versión del terminal de Ubuntu, ejecuta este comando (te pedirá el usuario y la contraseña):
* ```sudo apt update```
* ```sudo apt upgrade```
* Con ésto ya tenemos Ubuntu actualizado, ejecuta ```exit``` para salir de la consola de Ubuntu y luego puedes cerrar la ventana del Power Shell
* A partir de ahora tendremos disponible el Terminal de Ubuntu directamente dentro de Windows
* [MongoDB](https://www.mongodb.com/docs/manual/installation/#std-label-tutorial-installation) es la base de datos documental que aprenderás durante el curso
* [Usar este enlace para la descarga en caso de duda](https://www.mongodb.com/try/download/community)
* Durante la instalación te preguntará si instalar **Compass**, es el editor visual para la base de datos, es importante instalarlo también
* [MonghoDB Shell](https://www.mongodb.com/docs/mongodb-shell/install/) es el intérprete de comandos para interactuar con la base de datos de MongoDB, también será necesario instalarlo
## Configuraciones particulares
**Git** necesita identificar nuestro usuario a la hora de recibir nuestro código, así que tenemos que ejecutar estos dos comandos en el terminal para poder subir el código local al repositorio, **usa el email que tengas configurado en github.com**:
```bash
git config --global user.email "you@example.com"
git config --global user.name "Your Name"
```
En nuestro caso vamos a trabajar con archivos que el sistema oculta habitualmente, así que tenemos que habilitar su visualización:
* En Windows: abre el explorador de archivo, en el menú selecciona **Opciones**, luego en la pestaña **Ver** desmarca la opción "Ocultar las extensiones de archivo para archivos conocidos".
* También es recomendable [activar la opción para desarrolladores](https://learn.microsoft.com/es-es/windows/dev-home/), que optimiza el sistema y te da herramientas de desarrollo.
* En Mac: ejecuta en el Terminal el comando: ```defaults write com.apple.finder AppleShowAllFiles true; killall Finder```
* Si en algún momento el Mac te muestra este error: **Fix 'xcrun: error: invalid active developer path, missing xcrun'**, tendrás que ejecutar en el Terminal el comando ```xcode-select --install``` y seguir los pasos que te indique
## Dando una nota de color al código
Vamos a darle un poco de color a VS Code y al Terminal para hacerlos más ergonómicos y agradables a la vista.
_Nota: esta parte es opcional, puedes dejarla para otro momento si lo consideras conveniente._
* Instalamos las siguientes extensiones de VS Code:
* [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) para unificar los iconos de los archivos
* [Cascade theme](https://marketplace.visualstudio.com/items?itemName=rampus-bit.cascade) un theme de color personalizado, adecuado para el trabajo contínuo con el código
* [GitHub Markdown Preview](https://marketplace.visualstudio.com/items?itemName=bierner.github-markdown-preview) para trabajar más cómodamente con los documentos de tipo _markdown_ con el formato de GitHub
* Tipografías adecuadas para el código: mi recomendación es usar [MesloLGS NF](https://github.com/romkatv/powerlevel10k#meslo-nerd-font-patched-for-powerlevel10k)
* Instalar Zsh dentro de Git Bash
1. Download the latest Zsh package from the [MSYS2 package repository](https://packages.msys2.org/package/zsh?repo=msys&variant=x86_64). The file will be named something like “zsh-5.8–5-x86_64.pkg.tar.zst”.
2. Install an extractor that can open TAR and ZST archives, such as [7-Zip](https://www.7-zip.org/) and [facebook/zstd](https://github.com/facebook/zstd) (named something like “zstd-v1.5.2-win64.zip”). First, use zstd to extract the TAR file. Later, use 7-Zip to extract the files into the Git Bash directory.
3. Extract the archive’s files using 7-Zip (which should include etc and usr folders) into your Git Bash installation directory. This directory is usually located at "C:\Program Files\Git". If asked, merge the contents of the folder (no files should be overwritten).
4. Open Git Bash and test Zsh: ```zsh```.
**IMPORTANT:** Configure tab completion and history in Zsh using the first-use wizard. If, for some reason, it doesn’t appear, or you skipped it, re-run it:
```bash
autoload -U zsh-newuser-install
zsh-newuser-install -f
```
* Instalamos [Oh My Zsh](https://ohmyz.sh/): ```sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"```
* **Si tienes problemas de certificados**, usa esta versión del comando: ```sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh --ssl-no-revoke)"```
* Puedes ajustar el theme como quieras, a mí me gusta usar el de Powerlevel10k: ```git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k```, añadiendo ```ZSH_THEME="powerlevel10k/powerlevel10k"``` a tu archivo ```~/.zshrc.```
* No olvides ejecutar ```p10k configure``` después de estos cambios
* Ejecuta estos comandos a continuación: ```autoload -U zsh-newuser-install``` y ```zsh-newuser-install -f```
* Finalmente editamos el archivo con ```code ~/.bashrc``` añadiendo estas líneas:
```yaml
if [ -t 1 ]; then
exec zsh
fi
```
Con ésto ya puedes cerrar las ventanas de Terminal y VS Code y volver a abrirlas, verás todos los cambios aplicados