Clonando el proyecto

¡Vas a comenzar este proyecto tan emocionante! Pero no lo harás sola(o), yo te voy a acompañar desde el primer momento. Por eso vamos a clonar el repositorio en el que vas a trabajar para que todo te salga a la primera.

Este es el repo oficial de este curso:

https://github.com/FixterGeek/curso-blog-remix.git

Clonando

Vamos a clonarlo, abriendo tu terminal, colocandote en la carpeta donde vas a trabajar y ejecutamos el siguiente comando:

git clone https://github.com/FixterGeek/curso-blog-remix.git

Esto, clonará el proyecto en la carpeta en la que te encuentras, agregando una carpeta nueva llamada curso-blog-remix.

Instalando

El proyecto está listo para ser usado, pero antes necesitamos instalar todas las dependencias. Así que entramos a la carpeta de nuestro curso (curso-blog-remix) y ejecutamos

npm i

Esto instalará todo lo necesario.

Cambiando de branch

Si abres el navegador para visitar nuestro sitio (http://localhost:3000), verás que todo el sitio está terminado y funciona. Es muy posible que no veas el curso y que solo leas el código, pero entonces ¿Dónde estaría la diversión? 🤤

npm run dev

Por eso, vamos a cambiar el branch para comenzar desde cero. al mismo tiempo, podremos concentrarnos en programar, pues las instalaciones y herramientas que usamos en este curso, ya están todas en su lugar, ¡facilitando así nuestro aprendizaje!

git checkout start

La branch start es la branch donde todo inicia, cámbiate.

Ahora, si ejecutas otra vez npm run dev verás que tenemos trabajo por hacer.

Variables de entorno y otras configuraciones

Es importante que agregues las variables de entorno a dos archivos dentro de tu proyecto QUE NO VIENEN CON EL REPO. Claro, son llaves privadas y jamás deberías compartirlas, así que vas a agregar las tuyas propias. Creamos por eso, un archivo .env en la raíz del proyecto.

// .env

NODE_ENV="development"

Nuestra primer variable es usada por nuestro login para redireccionar, no olvides modificar esta variable cuando subas a producción (más adelante) o agrégala directamente en tu dashboard de Netlify.

Variables para tu base de datos

Para la base de datos, este proyecto necesita solo el link al Prisma Proxy, pero puedes agregar también la url a mongo Atlas.

// .env

NODE_ENV="development"
PRISMA_PROXY="prisma://aws-us-east-1.prisma-data.com/?api_key=fKzuZ34IwPxZGGzbzmzgxoBy7LD2eT5Z9perrotBnaTi5eiq430uh425gh"

Variables para el Google login

En este curso vamos a utilizar un login aún poco común, pero muy simple: Google one tap. Y para que nuestro login funcione correctamente (no solo hay que agregar los URLs de redireccionamiento en la consola de credenciales de Google) necesitamos nuestro Id de cliente de Google:

// .env

NODE_ENV="development"
PRISMA_PROXY="prisma://aws-us-east-1.prisma-data.com/?api_key=fKzuZ34IwPxZGGzbzmzgxoBy7LD2eT5Z9perrotBnaTi5eiq430uh425gh"
GOOGLE_CLIENT_ID="3255934858601-04tqp3434jfu5fu77j699pqi8o6pperrob.apps.googleusercontent.com"

Nuestro archivo de variables de entorno, queda algo así. Nos aseguraremos de que estas variables estén presentes en Netlify también en siguientes lecciones.

¡No temas 😵‍💫 Estas lista(o) para comenzar! 🤗