20 KiB

Raw Blame History

Read these guidelines in

Configura freeCodeCamp localmente en tu sistema

Sigue esta guía para poder configurar freeCodeCamp localmente en tu sistema. Esto es altamente recomendable si quieres realizar contribuciones regularmente.

El flujo de trabajo de las contribuciones puede desear y mostrar vistas previas de las páginas para la guía o los desafíos de programación. La depuración o el arreglo de errores en la base de código requiere que tengamos freeCodeCamp ejecutándose de manera local.

Como hacer Forking a un repositorio en GitHub

'Forking' es un paso donde obtienes tu propia copia del repositorio principal de freeCodeCamp (también conocido como repo) en GitHub.

Esto es esencial, porque de esta manera puedes trabajar en tu propia copia de freeCodeCamp en GitHub, o descargarla para trabajar con ella de manera local. Despues, podrias solicitar que los cambios sean extraídos al repositorio principal al realizar un pull request o solicitud de cambio.

ProTip: El repositorio principal en https://github.com/freeCodeCamp/freeCodeCamp es a menudo referido como upstream repositorio. Tu fork en > https://github.com/YOUR_USER_NAME/freeCodeCamp es a menudo conocido como origin repositorio.

Sigue estos pasos para hacer fork en el repositorio de https://github.com/freeCodeCamp/freeCodeCamp:

Ve al repositorio de freeCodeCamp en GitHub: https://github.com/freeCodeCamp/freeCodeCamp
Haga click en el botón "Fork" en la parte superior derecha de la interfaz (mas detalles aquí)
Despues serás llevado a tu copia de freeCodeCamp en https://github.com/YOUR_USER_NAME/freeCodeCamp

Preparando el entorno de desarrollo

Una vez que tengas los requisitos previos instalados, necesitas preparar tu entorno de desarrollo. Esto es común para muchos flujos de trabajo, y tendrás que hacer esto solo una vez.

Sigue estos pasos para tener tu entorno de desarrolloo listo:

Instala Git o tu cliente favorito de Git, si tu no lo tienes aun. Actualiza a la ultima version, el que vino con tu OS se puede quedar obsoleto.
(Opcional pero recomendado) Configura una SSH Key para GitHub.
Instala un editor de código de tu elección.

Nosotros recomendamos usar VS Code o Atom. Estos son unos grandes editores de código fuente libre.
Configuración de linting para su editor de códigos.

Tu deberías tener ESLint corriendo en tu editor, y destacará cualquier cosa que no cumpla con freeCodeCamp's JavaScript Style Guide.

Por favor no ignore nigun error linting. Están destinados a ayudarte y asegurar una base de código limpio y simple.

Clona tu copia de freeCodeCamp

'Cloning' es un paso donde tu descargas una copia del repositorio que es de tu propiedad o de alguien de una localización remota. En tu caso, esta localización remota es tu fork del repositorio de freeCodeCamp, que debería estar disponible en https://github.com/YOUR_USER_NAME/freeCodeCamp.

Ejecuta estos comandos en tu maquina local:

Open a Terminal / Command Prompt / Bash Shell en tu directorio de proyectos

por ejemplo: /yourprojectdirectory/
Clona tu fork de freeCodeCamp, sustituyendo YOUR_USER_NAME con tu GitHub Username
```
git clone https://github.com/YOUR_USER_NAME/freeCodeCamp.git
```

Esto descargará el repositorio completo de freeCodeCamp a tu directorio de proyectos.

Configurar un `upstream` al repositorio principal

Ahora que has descargado una copia de tu fork, necesitarás configurar un upstream.

Como se mencionó antes, el repositorio principal de https://github.com/freeCodeCamp/freeCodeCamp se denomina a menudo upstream repositorio. Tu fork de https://github.com/YOUR_USER_NAME/freeCodeCamp se denomina a menudo como origin repositorio.

Tiene que señalar su clon local al upstream, además de al origin. Esto es para que puedas sincronizar cambios del repositorio principal. De esta manera no tienes que pasar por el forcking y la clonación una y otra vez.

Cambiar el directorio al nuevo directorio de freeCodeCamp:
```
cd freeCodeCamp
```

Añadir un remoto al repositorio principal de freeCodeCamp:

git remote add upstream https://github.com/freeCodeCamp/freeCodeCamp.git

Comprueba que la configuración se ve bien para ti:

    git remote -v

 The output should be something like below:

    origin    https://github.com/YOUR_USER_NAME/freeCodeCamp.git (fetch)
    origin    https://github.com/YOUR_USER_NAME/freeCodeCamp.git (push)
    upstream    https://github.com/freeCodeCamp/freeCodeCamp.git (fetch)
    upstream    https://github.com/freeCodeCamp/freeCodeCamp.git (push)

Ejecutando freeCodeCamp localmente en tu maquina

Ahora que tienes una copia local de freeCodeCamp, puedes seguir estas instrucciones para conseguir que se ejecuten localmente. esto te ayudara:

Vista previa de las modificaciones de las páginas tal como aparecería en la plataforma de aprendizaje.
Trabajo en cuestiones relacionadas con la UI y mejoras
Depurar y corregir problemas en los servidores de aplicaciones y aplicaciones de cliente

Puede omitir la ejecución de freeCodeCamp localmente, si se acaba de editar archivos, haciendo un rebase o resolviendo merge conflictos. Puedes volver siempre a esta parte de la instrucción mas adelante.

Saltar la ejecución de freeCodeCamp localmete

Instalando los requisitos previos

Empezar por la instalación de estos requisitos previos de software.

Requisito previo	Version	Notes
MongoDB Community Server	`3.6`	Notas de versión, Nota: Actualmente en `3.6`, un upgrade is planned.
Node.js	`8.x`	LTS Schedule
npm (viene incluido con Node)	`6.x`	No tiene versiones LTS, utilizamos la versión integrada con el Nodo LTS

Importante:

Le recomendamos actualizar a la última versión estable también conocido como Long Term Support (LTS). Si Node.js o MongoDB están ya instalados en tu máquina, ejecuta los siguinetes comandos para validar las versiones:

node -v
mongo --version
npm -v

Si tienes una versión diferente, por favor instala la versión recomendada. Podemos apoyar problemas de instalación solo para las versiones recomendadas.

Estoy teniendo problemas con la instalación de los requisitos previos recomendados. ¿Qué debería hacer?

Nosotros regularmente desarrollamos en populares y últimos sistemas operativos como macOS 10.12 o posteriores, Ubuntu 16.04 o posteriores y Windows 10. Se recomienda la búsqueda de su problema específico en recursos como: Google, Stack Overflow o Stack Exchange. Posiblemente alguien se ha enfrentado al mismo problema y haya una respuesta a tu consulta.

Si estás en un sistema operativo difernte, y/o sigues teniendo problemas, intenta comunicarte con contributors community on our public forum o la Contributor's Chat room. Podemos ser capaces de solucionar algunos problemas comunes.

No podemos apoyarte en Github, porque los problemas de instalación de sofware estan mas allá del alcance de este proyecto.

Instalando dependencias

Emepezar por instalar las dependencias necesarias para la aplicación al inicio.

# Install NPM dependencies
npm install

Entonces tu necesitas añadir las variables de entorno privado (API Keys):

# Crea una copia de "sample.env" y nombrala como ".env".
# Rellena con la necesaria API keys y secrets:

# macOS / Linux
cp sample.env .env

# Windows
copy sample.env .env

Las claves no son necesarias cambiarlas, para ejecutar la app localmente. Puedes dejar los valores por defecto de sample.env como están.

MONGOHQ_URL es la mas importante. A menos que tengas MongoDB ejecutando en una configuración diferente a la predeterminada, la URL en el sample.env debería funcionar bien.

Puedes dejar las otras claves como están.Ten en cuenta que si quiere usasr mas servicios tendrás que obtenertus propias claves API para esos servicios y editar esas entradas en el archivo .env.

Luego, arranque varios servicios, por ejemplo el api-server, el client UI application, etc. Tu puedes aprender mas sobre estos servicios en esta guía.

Arrancando estas atando los vinculos entre los servicios. Ellos son semi-independientes. Quiere decir, en la producción de estos servicios se implementan a sus propias localizaciones, pero mientras se ejecutan localmente quieres que todos esten disponibles para ti.

# Arranque todos los proyectos dentro de este repositorio
npm run bootstrap

Empezar MongoDB

Necesitarás empezar MongoDB, antes de empezar la aplicación:

Empieza el MongoDB servidor en una terminal distinto

En macOS & Ubuntu:
```
mongod
```
En Windows, tienes que especificar el camino completo al binario mongod

Asegurate de reemplazar la 3.6 con la versión que tengas instalada
```
"C:\Program Files\MongoDB\Server\3.6\bin\mongod"
```

ProTip: Usted puede evitar tener que iniciar MongoDB cada vez, mediante la instalación como un servicio en segundo plano. Puedes aprender mas sobre ello en su documentación para tu SO

La siembra de la base de datos

Siguiente, permite la semilla de la base de datos. En este paso, ejecutamos el siguiente comando que llenara el servidor MongoDB con algunos de los primeros conjuntos de datos que es requerido por los otros servicios. Esto incluye algunos de los esquemas, entre otras cosas.

npm run seed

Comience la aplicación cliente de freeCodeCamp y el servidor API

Ahora puede arrancar el servidor API y la aplicación del cliente.

npm run develop

Este comando activará todos los servicios, incluyendo el servidor API y la aplicación del cliente, disponible para trabajar en el.

Ahora abre un navegador web y visita http://localhost:8000. Si la app carga, felicidades - ya está todo listo.

ProTip:

El servidor API sirve las APIs en http://localhost:3000 La Gatsby app sirve la aplicación en http://localhost:8000

Quiere decir que si tu visitas http://localhost:3000/explorer tu deberías ver las APIs que tu tienes.

Felicidades 🎉! Tu ahora tienes una copia completa de la plataforma de aprendizaje de freeCodeCamp ejecutandose en tu máquina local.

Comandos rápidos de referencia cuando trabajas localmente

Aqui hay una rápida referencia a una lista de comandos que tu puedes necesitar localmente de vez en cuando:

Realizar cambios a su copia local de freeCodeCamp

Siguiente, puedes haceer cambios a los archivos, y confirmar los cambios.

Sigue estos pasos:

Comprobar que está en la rama master
```
git status
```
Deberias obtener una salida como esta:
```
On branch master
Your branch is up-to-date with 'origin/master'.

nothing to commit, working directory clean
```
Si no estás en el master o tu directorio de trabajo no esta limpio, resuelve cualquier expediente o comando pendiente y checkout master:
```
git checkout master
```
A continuación le gustaría hacer un rebase del upstream.

Este paso sincronizará los últimos cambios desde el repositorio principal de freeCodeCamp. Es importante que rebase tan a menudo como sea posible, para evitar conflictos posteriores.
```
git pull --rebase upstream master
```
Opcionalmente, se puede impulsar esta rama de vuelta a tu origen, para tener un historial limpio en tu fork en GitHub.
```
git push origin master --force
```
Siguiente, usted tendrá que crear una nueva rama.

Trabajando en una rama separada para cada cuestión, te ayuda a mantener tu copia de trabajo local limpia. Tu nunca debes tranbajar en el master. Esto ensuciará tu copia local de freeCodeCamp y puede que tengas que empezar de nuevo con una copia fresca del fork.

Comprueba que estas en master como se explica anteriormente, y ve construyendo desde ahí:
```
git checkout -b fix/update-guide-for-xyz
```
Tu nombre de rama deberá empezar con un fix/, feat/, etc. Evita el uso de la edición no.s en las ramas. Mantenlas cortas y únicas.

Algunos ejemplos de buenos nombres de rama son:
```
fix/update-challenges-for-react
fix/update-guide-for-html-css
fix/platform-bug-sign-in-issues
feat/add-guide-article-for-javascript
translate/add-spanish-basic-html
```
A continuación puedes trabajar en la edición de páginas y en el código en su editor de texto favorito.
Una vez estés satisfecho con los cambios deberías opcionalmente ejecutar freeCodeCamp localmente para una vista previa de los cambios.
Asegúrese de corregir los errores, y el formateo de los cambios. Contamos con la guía de estilo para los artículos de guía y los We have style guide for the Guide articles y los desafios de codificación.

Siguiente, comprueba y confirma los archivos que estas actualizando

git status

Esto debería mostrar una lista de archivos unstaged que tu has editado.

On branch feat/documentation
Your branch is up to date with 'upstream/feat/documentation'.

Changes not staged for commit:
(use "git add/rm <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)

    modified:   CONTRIBUTING.md
    modified:   docs/README.md
    modified:   docs/how-to-setup-freecodecamp-locally.md
    modified:   docs/how-to-work-on-guide-articles.md
...

Fase de cambios y hacer un commit.

En este paso sólo debe marcar los archivos que has editado o añadido. Puede realizar un reinicio y resolver archivos que no desee cambiar.
```
git add path/to/my/changed/file.ext
```
O puede añadir alternativamente todos los archivos unstaged al area de preparación:
```
git add .
```
Solo los archivos que fueron movidos al area de preparación se añadirán cuando hagas un commit.
```
git status
```
Salida:
```
On branch feat/documentation
Your branch is up to date with 'upstream/feat/documentation'.

Changes to be committed:
(use "git reset HEAD <file>..." to unstage)

    modified:   CONTRIBUTING.md
    modified:   docs/README.md
    modified:   docs/how-to-setup-freecodecamp-locally.md
    modified:   docs/how-to-work-on-guide-articles.md
```
Ahora puedes hacer un commit a tus cambios con un mensaje corto como:
```
git commit -m "fix: my short commit message"
```
Algunos ejemplos:
```
fix: update guide article for Java - for loop
feat: add guide article for alexa skills
```
Opcional:

Es muy recomendable hacer un mensaje commit convencional. Esta es una buena práctica que tu verás en algunos de los mas populares repositorios de código abierto. Como desarrollador, esto te anima a seguir las prácticas estándar.

Algunos ejemplos de mensajes commit convencional son:
```
fix: update HTML guide article
fix: update build scripts for Travis-CI
feat: add article for JavaScript hoisting
docs: update contributing guidelines
```
Que sean cortos, no mas de 50 caracteres. Tu siempre puedes añadir información adicional en la descripción del mensaje commit.

Esto no toma más tiempo que un mensaje no convencional como 'update file' or 'add index.md'

Puedes aprender mas sobre porque deberías usar los commits convencionales aquí.
Si te das cuenta que necesitas editar un archivo o actualizar el mensaje commit despues de hacer un commit puedes hacerlo después de la edición de archivos con:
```
git commit --amend
```
Esto abritá por defecto un editor de texto como nano o vi donde puedes editar el titulo del mensaje commit y añadir/editar la descripción.
Despues puedes subir los cambios a tu fork:
```
git push origin branch/name-here
```

Proponiendo un Pull Request (PR)

Una vez que hayan sido editados, se le pedirá que cree una pull request en la página de github de su fork
Por defecto, todas las pull requests debe estar en contra del repositorio principal de freeCodeCamp, master.

asegurate que la base de tu fork está situado en freecodecamp/freecodecamp cuando se recurre a una Pull Request.**
Envíe la pull request de tu rama a la rama master de freeCodeCamp.
En el cuerpo de tu pull request un sumario detallado de los cambios que has hecho y porque.
- Serás presentado con un platilla de la pull request. Este es un cheklist que deberías seguir antes de abrir la pull request.
- Rellena los detalles que te parezcan adecuados. Esta información será revisada y decidiraán si tu pull request es aceptada o no.
- Si la pull request esta destinada a arreglar un bug/error existente entonces añade al final de la descripción la palabra clave closes y #xxxx (donde xxxx es el numero del error). Por ejemplo: closes #1337. Esto le dirá a GitHub que cierre automáticamente el error existente si la pull request es aceptada e incorporada.
Indica si has probado una copia local del sitio o no.

Es muy importante cuando hagas cambios que no sean copias editadas de los archivos markdown. Por ejemplo, cambios a CSS o código JavaScript, etc.

Ten tu pull request aceptada

Para obtener ayuda

SI estás atascado y necesitas ayuda, haznoslo saber preguntando en 'Contributors' category on our forum o en Contributors chat room en Gitter.

Puede haber un error en la consola de tu navegador o en el Terminal / Linea de Comandos que te ayudará a identificar el problema.

Resolución de problemas

Si la app arranca pero te estás encontrando errores con la misma UI, por ejemplo si las fuentes no se cargan o si el editor no se muestra correctamente, deberías intentar seguir los pasos de la resolución de problemas al menos una vez:

# Remove all installed node modules
rm -rf node_modules ./**/node_modules

# Reinstall npm packages
npm install

# Bootstrap the project
npm run bootstrap

# Seed the database
npm run seed

# Re-start the application
npm run develop

20 KiB Raw Blame History