Original article: React Tutorial – Build a Movie List Generator with React and HarperDB
En este tutorial construiremos un generador de películas simple que genera automáticamente una nueva película cada 40 segundos. También tiene un botón llamado "Generar nueva película" para mostrar otra película bajo demanda.
Esta aplicación mostrará una película junto con su título, fecha de lanzamiento, calificación de fans, duración, una descripción corta, estrellas, nombre de los directores y finalmente un botón que enlaza con la página de películas IMDb.
Puedes acceder al código completo de este proyecto (autor original) en el repositorio Github.
¿Cómo vamos a construir esto?
Como con la mayoría de otras aplicaciones web, esta app consiste en un frontend y un backend.
El frontend es la parte que el usuario usa para interactuar. En nuestra app, el front end estará hecho de imágenes de carátulas de películas, su información, y un botón que linkea a la página de películas IMDb.
El backend es donde la data de las películas - tal como el título, descripción, actores, fotografía, etc.
La aplicación generará automáticamente una nueva película aleatoria cada 40 segundos.
Construiremos el frontend de nuestra aplicación usando React. React es una librería frontend de JavaScript usada para construir componentes de la interfaz de usuario (UI) reusables, tales como botones, menús de navegación, cartas y más.
También daremos el estilo a nuestros componentes usando CSS puro.
Como construiremos el Back End
El backend de un sitio web contiene típicamente una base de datos, que es un programa que usa para almacenar y manipular data. La base de datos también tiene que ser accesible vía una API de modo que nuestro frontend pueda acceder a la data y disponerla a los usuarios.
Para lograr esto usaremos una herramienta interesante y entretenida llamada HarperDB.
¿Qué es HarperDB?
HarperDB es un software de base de datos y gestor de base de datos que es increíblemente rápido - se ha probado que puede ser 37 veces más rápido que MongoDB.
La velocidad de una base de datos se refiere tanto a cuan rápido puede leer y escribir data a sus registros, como al computo sobre esa data.
HarperDB también es increíblemente flexible. Te permite hacer lo siguiente:
- Te permire hacer consultas a un único endpoint.
- Usar tanto SQL como NoSQL para consultar tu base de datos.
- Subir data en Json y con consultas SQL.
Si estás trabajando con mucha data, puedes importar toda ella en un solo paso en un archivo CSV. ¡Está buena la cosa!
No tienes que definir los tipos de datos para tu data, ya que HarperDB lo hace dinámicamente por ti. Sin mencionar su simple interfaz para administrar tus instancias en la nube sin problemas.
Como dije, es muy flexible.
Prerrequisitos para este tutorial
Para construir esta app asumiré que tienes conocimientos básicos de los siguientes lenguajes y herramientas:
Npm u otro gestor de paquetes: Necesitaremos esto para instalar React y un hook de HarperDB para React llamado use-harperdb en tu proyecto.
NPM es un acronimo de Node Package Manager (Gestor de paquetes Node). Es una herramienta que conecta tu proyecto local al registro npm, donde hay millones de paquetes de código público, tales como React y useharperdb. También te ayudará a gestionar su código una vez instalado.
Debes asegurarte de tener una versión de Node 12.xx o superior instalada en tu equipo. Puedes chequear tu versión de node con el comando: node-v
SQL: En este proyecto usaremos una o dos consultas básicas, así que no te preocupes si no sabes mucho sobre SQL.
SQL es un acrónimo de Structured Query Language (Lenguaje Estructurado de Consultas). Es un lenguaje popular usado en la consulta de bases de datos relacionales. Lo usaremos en nuestro Hook para consultar nuestra instancia cloud de HarperDB para la data.
React: Nuestra interfaz de usuario se construirá con React. Si sabes JavaScript, entonces aprender React es relativamente sencillo.
Una cuenta de HarperDB: Si no tienes una cuenta de HarperDB, necesitarás crear una. No te preocupes, es completamente gratuita. Te mostraré como crear una cuenta más abajo.
Y finalmente, CSS: Usaremos un poco de CSS para agregar estilo a nuestros elementos.
¿Qué son los Hooks de React?
En el pasado, para trabajar con un componente de React, tenías que definir el componente como un componente de clase. Esto cambió cuando React introdujo los Hooks.
Dicho de forma simple, los Hooks son funciones que te permiten trabajar con la data en un componente sin clase de React (que sea funcional).
Gracias a esto, no tienes que definir un componente de clase React sólo para manejar data dentro de él.
El Hook use-harperdb te permite "enganchar" (hook) tu aplicación a tu instancia cloud de la base de datos para obtener data. Piensa en esto como un puente entre tu app React (Front End) y la base de datos HarperDB (Back End).
Cómo configurar la base de datos
HarperDB es una base de datos flexible, como mencioné antes. Esto te permite usar sus servicios ya sea, configurando tu propio servidor local HarperDB o usando la arquitectura serverless (sin servidor).
En este proyecto usaremos la arquitectura serverless. Esto significa que no implementaremos un servidor (este es el backend) en tu máquina local. En su lugar, aprovecharemos la infraestructura en la nube de HarperDB para administrar nuestra data de películas y hacerla accesible para nuestra app.
Configurando la instancia Cloud de HarperDB
Primero, asumiré que creaste una cuenta gratis como solicité antes. Si no lo has hecho, anda y crea una
Te pedirá el nombre, una dirección e-mail válida y un nombre de subdominio para tu instancia cloud. Con esto HarperDB creará un nombre de sub-dominio para ti.
Luego, crearemos una instancia cloud:
Aquí te pedirá que agregues el nombre de la instancia. No te preocupes, puedes colocar cualquier nombre fácilmente recortable, pero es mejor hacerlo descriptivo.
Para crear la URL de tu instancia, la que necesitarás en tu app cuando consultes data, HarperDB combinara el nombre de tu instancia con el nombre de tu subdominio. También se te pedirá configurar las credenciales de tu instancia (nombre de usuario y password).
Luego, seleccionamos las especificaciones de las instancias. Por el bien de este tutorial usaremos el plan gratuito. También necesitas elegir una región para tu instancia.
Haz click en "Confirm Instance Details" y te enviará a una página que contiene toda la información de tu instancia. Ahora copia el URL, tu nombre de usuario y tu password y guardalos. Los necesitarás más tarde.
Cuando estés preparado haz clic en "Add Instance". Te llevará a una página que mostrará una carta de tu instancia. Tu instancia necesitará un poco de tiempo inicialmente antes de que puedas usarla, pero podemos hacer algunas cosas mientras esperamos
Como configurar la aplicación React
Mientras nuestra instancia cloud está siendo configurada, podemos tomar la oportunidad de configurar el directorio para nuestra app.
Primero inicializamos nuestro proyecto ejecutando el siguiente comando en cualquier terminal:
npx create-react-app harperdb-movies-generatorEste comando creará una carpeta llamada harperdb-movies-app e instalará todas las dependencias que necesitaremos para nuestro proyecto. Esto incluye React y ReactDOM, de modo que no tendremos que hacerlo manualmente.
Ahora vamos a ejecutar el comando que traerá el Hook use-harperdb a nuestro proyecto. Este Hook nos ayudará a conectar nuestra instancia cloud. Para instalarlo, ejecutaremos el siguiente comando en nuestra terminal:
cd harperdb-movies-app
Para cambiar a la raíz de nuestro proyecto
(A la fecha de traducción del tutorial use-harperdb era compatible con React 17.0.2, mientras que la versión actual era la 18.x.x, es por esto que usaremos los flags --legacy-peer-deps y --force para que se ajusten las dependencias de la aplicación
npm install use-harperdb --legacy-peer-deps --forceY eso fue todo con la configuración!
Como integrar HarperDB a nuestra App React
Ahora que el hook use-harperdb se ha instalado, tenemos que hacer una cosa más para poder acceder a la base de datos y hacer operaciones CRUD en ella: tenemos que conectar nuestra app a la instancia cloud. Esto lo haremos con el HarperDBProvider.
Antes de entrar a esta tarea, necesitamos hacer algo primero. Cuando construimos una aplicación CRUD, no es una buena práctica exponer credenciales tales como llaves de API a otras personas, especialmente si tenemos la intención de llevar código a un repositorio público como GitHub.
Para proteger cualquier credencial sensible, necesitamos almacenarlas como variables de entorno. Este es un archivo que almacenará todas las credenciales sensibles, tales como passwords, llaves de API, y en nuestro caso particular, las credenciales de nuestra instancia cloud (URL, nombre de usuario y password).
Crea un .env en la raíz del directorio del proyecto. Puedes hacerlo en tu editor de código, click derecho en la raíz del directorio (harperdb-movie-generator) y seleccionar la opción "crear nuevo archivo".
Llama a este archivo .env y presiona enter. este creará un .env dentro de harperdb-movie-generator. Después de esto, define las siguientes variables:
REACT_APP_DB_URL=**
REACT_APP_USER=**
REACT_APP_PASSWORD=**Asegúrate de usar el mismo formato y pasar la información correcta de tu instancia cloud, en vez de los doble asterisco. Llena los datos con la URL, username y password que te dije que guardaras en algún lugar.
React leerá todas las variables de entorno que usen REACT_APP_ como prefijo, y luego dinámicamente pasará el valor cuando lo necesite.
Con el archivo .env creado, nuestra siguiente acción será envolver toda nuestra aplicación React dentro del HarperDBProvider que importamos.
HarperDBProvider se asegurará que nuestra app tenga el contexto de la base de datos HarperDB.
Para envolver nuestra aplicación React dentro del Provider, iremos al fichero index.js de nuestro proyecto e importaremos el Provider, y de forma segura pasaremos esas variables de entorno en al Provider. Esto deja saber cuales instancias conectar a nuestro front end
import React from 'react';
import ReactDOM from 'react-dom'; // Línea modificada
import './index.css';
import App from './App';
import { HarperDBProvider } from 'use-harperdb/useHarperDB';
import reportWebVitals from './reportWebVitals';
// Renderizado en DOM
ReactDOM.render(
<React.StrictMode>
// Hook de use-harperdb
<HarperDBProvider
url={process.env.REACT_APP_DB_URL}
user={process.env.REACT_APP_USER}
password={process.env.REACT_APP_PASSWORD}
>
<App />
</HarperDBProvider>
</React.StrictMode>,
document.getElementById("root")
);
// Si deseas comenzar a medir el rendimiento en su aplicación, pase una función
// para registrar los resultados (por ejemplo:reportWebVitals(console.log))
// o envia a un punto final de analytics. Más información: https://bit.ly/CRA-vitals
reportWebVitals();Como poblar nuestra base de datos con data
Si te acuerdas, dejamos nuestra instancia cloud mientras aún se estaba configurando. A estas alturas, deberíamos tener nuestra instancia configurada y lista para servir datos. En este caso deberíamos ver el estado OK en nuestra instancia
Tu instancia cloud debería estar lista para usar con tu front end conectado a la instancia también. Sin embargo, el Front End será inútil si no tiene datos (es decir, películas) para mostrar al usuario.
Es por esto que necesitamos poblar nuestra base de datos con películas.
Pero antes de eso, necesitamos crear un esquema para nuestra data de películas. Puedes pensar en un esquema como en una colección de tablas en nuestra base de datos. Yo simplemente llamaré a mi propio esquema "coleccion":
Luego crea una tabla. Llamaré a la mía "pelicula". Una tabla consistirá en registros de películas individuales
Cada película debe tener un hash attribute. Un hash_attribute es simplemente una columna con una única clave que identifica una fila de data en particular, y la distingue de la siguiente fila. Nosotros simplemente usaremos la columna "id" como nuestro hash_attribute.
Como estamos creando una app con más de una película, nuestra tabla consistirá en más de una fila con una película (es decir, registro de datos). También, como cada película tiene muchas propiedades tales como titulo, año, fecha de lanzamiento, etc, tendrá más de un campo de información.
Puedes subir las películas una por una con un único objeto JSON o puedes subir una colección entera de películas con un array de objetos JSON.
HarperDB te permite subir data principalmente de 3 formas:
- Haciendo consultas SQL o NoSQL para crear data en nuestra base de datos.
- Definiendo un único objeto JSON (para un registro) y un array de objetos JSON (para múltriples registros).
- Importando y cargando data con un archivo CSV
Para subir la información de una película, crearemos un objeto JSON el cual contendrá toda la información de una película. Aquí hay un ejemplo de la información en JSON:
{
cover: 'https://res.cloudinary.com/ubahthebuilder/image/upload/v1627129180/avengers_endgame_ilqzqj.png',
date: 2017,
description: 'After the devastating events of Avengers: Infinity War (2018), the universe is in ruins. With the help of remaining allies, the Avengers assemble once more in order to reverse Thanos actions and restore balance to the universe.',
directors: [
'Anthony Russo',
'Joe Russo'
],
genres: [
'Action',
'Adventure',
'Drama'
],
hours: 3,
id: 1,
minutes: 1,
rating: 8.4,
stars: [
'Robert Downey',
'Chris Evans',
'Mark Ruffalo'
],
title: 'Avengers: End Game',
website: 'https://www.imdb.com/title/tt4154796/',
writers: [
'Christopher Markus',
'Stephen McFeely'
]
}
navega a la tabla pelicula dentro de la colección y haz clic en el botón + en la esquina superior derecha de la página, el cual está destacado en la siguiente imagen:
Copia el JSON previamente definido y pégalo en el espacio provisto para ello, reemplazando todo lo que ahí por razones de formato. Haz clic en el botón verde para guardar la información en la tabla película.
Una vez que terminaste de subir la película, la tabla debería verse algo similar a esto.
Puedes usar la data del proyecto desde el repositorio GitHub para insertar múltiples películas de una vez.
Como construir nuestra interfaz de usuario y consultar la base de datos
Ahora que la data está lista, necesitamos mostrarla en nuestro front end para que el usuario pueda interactuar con ella.
Primero necesitamos modificar nuestro archivo app.js:
import React from 'react'
import './App.css';
import Pelicula from './components/Pelicula';
function App() {
return (
<div className="App">
<div className="main-container">
<header>
<h1 className="heading">Lista de películas</h1>
<h3>Un simple generador de películas hecho con React y HarperDB</h3>
</header>
<div>
<Pelicula/>
</div>
</div>
</div>
);
}
export default App;Este será el componente de nivel superior en nuestro proyecto, donde importamos las librerías React, ReactDOM y la hoja de estilos App.css para nuestra aplicación.
Luego en el archivo App.css definiremos nuestros componentes de la app, los cuales retornarán el elemento header y el componente Pelicula
Acá está el estilo para nuestra aplicación completa:
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
/* Estilos base */
body{
font-family:"lato", sans-serif;
color: white;
background-color: #082032;
}
a {
color: black;
font-family: "roboto", sans-serif;
font-size: 3.1rem;
text-decoration: none;
display: inline-block;
}
h1 {
text-align: center;
font-family: "roboto", sans-serif;
font-size: 3.5rem;
font-weight:600;
}
h3 {
text-align: center;
}
p {
font-weight: 300;
}
span {
color: #FFF338;
}
ul {
list-style-type: none;
display: flex;
margin-left: 2rem;
}
li {
outline-color: #2c394B;
outline-style: inset;
outline-width: 2px;
outline-offset: 5px;
margin: 11px;
padding: 0px, 2px;
}
img {
max-height: 500px;
width: 70vw;
margin: 0 auto;
}
/* Clases */
.carga{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.portada-pelicula{
max-width: 800px;
width: 90%;
background-color: #2c394B;
margin: 0 auto;
border-radius: 10px;
}
.circulo {
background-color: transparent;
margin-right: 37px;
text-align: center;
margin-top: 50px;
border: 3px solid #FFF338;
height: 90px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
width: 90px;
}
.ratings {
font-size: 30px;
margin-top: 12px;
}
.mitad-grande, .mitad-pequena {
font-family: "roboto", sans-serif;
font-style: oblique;
color: white;
}
.mitad-pequena {
color: #DAD0C2;
font-size: 1.2rem;
}
.btn-visita-pelicula {
margin: 1rem 2rem;
padding: 1em 1em;
top: 50px;
left: 15px;
font-size: 1.2rem;
outline-style: solid;
color: #FFF338;
outline-color: #FFF338;
outline-offset: 10px;
}
.btn-generar-pelicula {
background-color: #FFF338;
margin: 1rem 2rem;
padding: 1em 1em;
top: 50px;
left: 15px;
font-size: 1.2rem;
text-decoration: none;
text-transform: uppercase;
}
.btn-accion {
width: inherit;
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.titulo{
font-size: 50px;
padding-top: 40px;
padding-left: 30px;
margin-bottom: 0;
}
.info-arriba {
display: flex;
justify-content: space-between;
}
.info-soporte {
padding-left: 30px;
font-weight: bold;
margin-bottom: 20px;
}
.info-abajo {
font-family: "roboto", sans-serif;
max-width: 70vw;
margin: 1rem;
text-align: center;
}
.autores {
text-align: right;
padding: 0;
}
.imagen {
display: flex;
align-items: center;
padding-top: 2rem;
}
otra vez, puedes acceder al código completo para este proyecto desde el repositorio Github.
Como agregar el componente Película
Ahora necesitamos agregar nuestro componente película. Comenzaremos creando un nuevo directorio dentro del directorio "src"
Ahora necesitamos agregar nuestro componente película. COmenzaremos creando un nuevo directorio componentes dentro del directorio src. Luego crearemos un archivo dentro de componentes llamado Pelicula.js. Aquí es donde viene lo bueno.
Además de las librería React, importaremos también el hook use-harperdb.
Vamos a ejecutar la función (Hook) use-harperdb pasandole un objeto como argumento. Dentro del objeto, necesitamos darle la propiedad "query". Esta propiedad determinará qué tipo de operaciones queremos hacer a nuestra base de datos.
import React from "react";
import { useHarperDB } from "use-harperdb"
function Pelicula(){
// Llamada a hook use-harperdb
const [data, loading, error, refresh] = useHarperDB(
{
query: {
operation:'sql',
sql: "select * from colecion.pelicula"
},
interval: 40000 // 40 segundos
}
);
// ... el código continúa más abajoLa primera propiedad dentro de la consulta query, es la propiedad operation, especifica de qué forma quieres consultar la data. En nuestro ejemplo lo haremos con comandos SQL.
La segunda propiedad dentro de la consulta (query) es la propiedad SQL. Aquí es donde escribiremos nuestras consultas SQL para cualquier operación CRUD que queramos realizar. En nuestro caso, simplemente queremos traer las peliculas.
SELECT *FROM coleccion.pelicula(La forma en que se crean los identificadores cambió desde que se creó el artículo original, por lo que la consulta varía respecto a la consulta del autor original)
Después de la consulta, podemos definir la propiedad opcional interval. Con esta propiedad puedes especificar cuanto tiempo tiene que esperar tu app antes que realice otra consulta de forma automática a la base de datos.
Al ejecutar la función useHarperDB con estos parametros correctamente, nos devolverá un array conteniendo algunas cosas importantes. Abajo hay cuatro elementos importantes que obtendremos de useHarperDB:
loading: Este es un booleano que especifica si la base de datos sigue cargando la data o no. De esta forma, puedes colocar opcionalmente un "spinner" de carga.error: Esto indica si un error ha ocurrido mientras se consulta a la base de datos.refresh: Asumiento que no definiste un intervalo de forma adecuada, puedes llamar a esta función cuando quieras para obtener nueva data.data: El elemento principal. Si todas las cosas salen bien, HarperDB devolverá nuestra data a esta variable.
Como mostrar la data en nuestro frontend
Con nuestra data retornada de forma exitosa de la base de datos, es tiempo de pasarla a nuestro template React:
// renderizado cuando está cargando la data
if(loading){
return(<div>Cargando...</div>)
}
// Renderizado en caso de obtener la data
if(data){
// Acá obtiene una película de forma aleatoria en báse al índice del array
const aleatorio = Math.floor(Math.random()*6+1);
return(<div className="carga">
{/* Portada */}
<div className="portada-pelicula">
<div className="info-arriba">
<h2 className="titulo">{data[aleatorio].title}</h2>
<div className="circulo">
<div className="ratings">
<span className="mitad-grande">{data[aleatorio].rating}</span>/<span className="mitad-pequena">10</span>
</div>
</div>
</div>
<div className="info-soporte">
<span className="año">{data[aleatorio].date}</span> -
<span className="duracion"> Duración {data[aleatorio].hours}h:{data[aleatorio].minutes}m</span>
</div>
</div>
<div className="imagen">
<img alt="Portada Pelicula" src={data[aleatorio].cover} />
</div>
<div className="generos">
<ul className="generos-pelicula">
{data[aleatorio].genres.map((genero,index)=>{
return(
<li key={index}><span className="generos-pelicula-item">{genero}</span></li>
)
})}
</ul>
</div>
<div className="info-abajo">
<p>{data[aleatorio].description}</p>
<hr />
<p className="autores">Escritores:
{data[aleatorio].writers.map((escritores,index) =>{
return(
<span key={index} className="escritores">{escritores}</span>
)
} )}
</p>
<p className="autores">Director/es:
{data[aleatorio].directors.map((directores,index)=>{
return(
<span key={index} className="directores">{directores}</span>
)
})}
</p>
<hr />
<div className="btn-accion">
<a className="btn-visita-pelicula" href={data[aleatorio].website}>Mira en IDBM</a>
<a className="btn-generar-pelicula" href="" onClick={refresh}>Otra Pelicula</a>
</div>
</div>
</div>)
}
// Renderizado en caso de error de conexión
if(error){
return(<div className="">Lo sentimos, no encontramos la información {error}</div>)
}No olvides exportar el componente para usarlo en App.js
Si estás familiarizado con React, esto no debería ser extraño para ti. Pero de todas formas explicaré lo que hice acá:
- Como dije, la función
useHarperDBretornará nuestra data. En nuestro caso hicimos una consultaquerypara obtener todas las películas, lo que retornó un array con películas. Como requeríamos una sóla película, creamos un número aleatorio cada vez que carga, para acceder a una pelicula de forma aleatoria en base a su índicedata[aleatorio].llave - Luego tenemos que revisar si la data fue devuelta. Si no hay data simplemente renderizamos un div que muestra el mensaje "Lo sentimos, no encontramos la información".
- Si recibimos la data, pasaremos esta data a nuestro template. Extraemos data campo de nuestro objeto y lo pasamos en el lugar correcto de nuestro template.
Cuando terminamos, finalmente ejecutamos el siguiente comando en la consola:
npm start .envcon el .env te aseguras que pueda leer las variables de entorno que creamos
Esto debería ejecutar nuestro servidor de desarrollo en https://localhost:3000. si toda va bien, deberías ver la aplicación en nuestro navegador.
Con esto tendríamos nuestra app! :)
Como implementar la aplicación en las páginas GitHub
Bienvenido a la última sección del tutorial. Implementaremos nuestra nueva aplicación en las páginas de GitHub para que el mundo la vea.
Si tienes otro proveedor host, puedes hacer el deploy ahí. Si no tienes, y quieres algo gratuito, entonces GitHub Pages es genial!.
Primero, necesitas tener una cuenta GitHub. Si no tienes una puedes crear una cuenta acá.
También tienes que tener el software de control de versiones Git instalado en tu equipo. Esto es algo que cualquier desarrollador debería tener. Sin embargo, si no lo tienes, puedes instalarlo desde acá.
Lo primero que tienes que hacer es crear un nuevo repositorio en tu cuenta de GitHub:
Luego vuelve a tu terminal y ejecuta el siguiente comando:
npm install gh-pages --save-devEsto guardará GitHub Pages en las dependencias de tu proyecto. Si tienes problemas recuerda los flags --force y --legacy-peer-deps
Una vez que hayas hecho esto, si revisas el archivo package.json. Deberías encontrar gh-page instalado de forma segura bajo devDependencies:
"devDependencies": {
"gh-pages": "^4.0.0"
}Luego, debes seguir los siguientes 3 pasos:
- Navega en el directorio de tu proyecto (harperdb-movie-generator) y selecciona el archivo
package.json. En la parte superior de tu json con paquetes, agregarás la siguiente data (reemplazala con la tuya):
"homepage": https://{nombre de usuario GitHub}.github.io/{nombre del proyecto}.gitPara saber tu nombre de usuario y nombre de proyecto GitHub, navega al repositorio recientemente creado. En la parte superior podrás encontrar tu nombre de usuario y tu nombre de proyecto al lado. Copia ambos y llena la información en la plantilla antes mencionada.
La esencia de agregar el "homepage" es especificar el URL donde se alojará nuestra aplicación. Asegúrate de poner una coma al final, para que su package.json pueda ser analizado de forma correcta.
- Ve al campo "scripts" dentro de `package.json` y agrega la siguiente información asegurandote de mantener la indentación de manera apropiada:
Esto es lo que ejecutarás cuando hagas un deploy a GitHub Pages."predeploy": "npm run build", "deploy": "gh-pages -d build" -
Finalmente, revisarás si tu proyecto tiene inicializado Git con el comando
git statusen la terminal estando en la raíz del proyecto.
En el caso que no retorne información del proyecto puedes iniciarlo en la terminal, estando en la raíz del proyecto, con el comandogit init
Te falta enlazar tu proyecto con tu repositorio GitHub. Para hacer esto debes ejecutar los siguientes comandos:
git branch main
git remote add origin https://github.com/{nombre de usuario}/{nombre de proyecto}.git.gitignore
importantísimo.
Debes modificar tu archivo .gitignore, para que no considere el archivo .env que contiene tus contraseñas al momento de hacer un commit. Para esto deberás escribir el nombre de tu archivo .env en .gitignore
Revisemos ahora el status de tu proyecto usando el comando git status en la Terminal situada en la raíz de tu proyecto.
En este caso podemos leer del comando que se ha modificado el archivo .gitignore, y que para agregarlo debemos usar el comando git add <nombre_archivo>, en nuestro caso sería
git add .gitignoreEsto preparará el proyecto para que tus próximos commit no tengan el archivo .env en ellos.
Ahora está todo configurado!
La única cosa que queda por hacer, es el Deploy de la app a GitHub Pages. Para hacer esto debes ejecutar el siguiente comando:
npm run deployy Voalá!, tu aplicación hará un deploy automático a GitHub Page
Como ver tu aplicación en internet
Ahora tu aplicación está en internet, pero tienes que ver como es. Para esto debes obtener su URL.
Ve a tu perfil GitHub y haz clic en la pestaña repositorio. Selecciona tu repositorio, ve a la página configuración, y baja un poco. Encontrarás la sección GitHub Pages en la sección izquierda.
Dentro de Pages, en la sección Source, cambia a la rama Branch: gh-pages y selecciona la ruta /root. Dentro de unos minutos tu aplicación estará publicadas. Copia la URL de la página y pegala en otra pestaña del navegador.
Y listo, ahora verás tu proyecto en vivo (clic acá).
En conclusión.
Construimos este proyecto usando React y HarperDB. HarperDB es una gran elección para que puedas manejar data y hacer operaciones Back-End.
No sólo es gratuita sino que también es muy fácil de integrar, como vimos en el tutorial.
No deberías parar acá. Puedes mejorar tus habilidades creando proyectos geniales con el mismo Stack. Gracias al plan gratuito de HarperDB no tienes que pagar nada.
Puedes tomar el código del proyecto desde éste repositorio GitHub, el repositorio original lo encuentras acá.
Puedes ponerte en contacto con el autor original a través de Twitter. Esto es todo, gracias por seguir el tutorial hasta acá, ten una semana genial!