Este proyecto fue creado con la ayuda de Create React App. Consulte la documentación para familiarizarse con las funciones opcionales y configurarlas.
Usa este repositorio de la organización GoIT como plantilla para crear el repositorio de tu proyecto.
Para hacer esto, haz clic en «Use this template» y selecciona la opción
«Create a new repository», tal como se muestra en la imagen.
Para el siguiente paso deberás abrir la página para crear un nuevo repositorio.
Ponle nombre, asegúrate de que el repositorio sea público y haz clic en el botón
«Create repository from template».
Ahora ya tienes un repositorio de proyecto personal, junto a una estructura de archivos y carpetas del repositorio de plantillas. Luego trabaja con esto, así como con cualquier otro repositorio personal, realiza una copia en tu computadora y súbelo a GitHub.
- Asegúrate de que la versión LTS de Node.js está instalada en tu computador. Descárguela e instálela de ser necesario.
- Instala las dependencias base del proyecto con el comando
npm install. - Inicia el modo de desarrollo ejecutando el comando
npm start. - En tu navegador, ve a la dirección http://localhost:3000. Esta página se recargará automáticamente después de guardar los cambios en los archivos del proyecto.
La versión de producción del proyecto se verificará, compilará y desplegará
automáticamente en GitHub Pages, en la rama gh-pages, cada vez que se
actualice la rama main. Por ejemplo, después de un Push directo o de una
Pool-request aceptada. Para ello, edita el campo homepage del archivo
package.json, sustituyendo your_username y your_repo_name por los tuyos
propios, y envía los cambios a GitHub.
"homepage": "https://your_username.github.io/your_repo_name/"A continuación, ve a la configuración del repositorio de GitHub (Settings >
Pages) y selecciona distribuir la versión de producción de los archivos desde
la carpeta /root de la rama gh-pages, si no se ha hecho automáticamente.
El estado del último commit se indica con un icono junto al ID del commit.
- Color amarillo - el proyecto está compilado e implementado.
- Color verde - La implementación se completó con éxito.
- Color rojo - Se ha producido un error durante la verificación, la compilación o la implementación
Se puede ver información de estado más detallada haciendo clic en el icono y en
la ventana desplegable del enlace Detalles.
Después de un tiempo, normalmente un par de minutos, la página real se puede ver
en la dirección especificada en la propiedad homepage. Por ejemplo, aquí está
el enlace a la versión activa de este repositorio
https://goitacademy.github.io/react-homework-template.
Si se abre una página en blanco, asegúrate de que no haya errores en la pestaña
Console relacionados con rutas incorrectas de archivos CSS y JS del proyecto
(404). Probablemente tienes un valor incorrecto para la propiedad homepage
en el archivo package.json.
Si la aplicación utiliza la librería react-router-dom para el enrutamiento, el
componente <BrowserRouter> debe ser configurado adicionalmente pasando en la
prop basename, el nombre exacto de tu repositorio. Las barras inclinadas al
principio y al final de la cadena son obligatorias.
<BrowserRouter basename="/your_repo_name/">
<App />
</BrowserRouter>
- Después de cada push a la rama
maindel repositorio GitHub, se ejecuta un script especial (GitHub Action) del archivo.github/workflows/deploy.yml. - Todos los archivos del repositorio se copian en el servidor, donde el proyecto se inicializa, se verifica y se compila antes de ser implementado.
- Si todos los pasos tienen éxito, la versión de producción compilada de los
archivos del proyecto se envía a la rama
gh-pages. De lo contrario, el registro de ejecución del script indicará cuál es el problema.