React with GraphQL - Fullstack Boilerplate

Fullstack React Boilerplate with GraphQL, Apollo & Prisma

Características

Boilerplate para una aplicación de React. Está basada en las siguientes tecnologías:

• React.js
• Apollo Client
• GraphQL Yoga
• Prisma

Requerimentos

Antes de cualquier otra cosa hay que tener instalado Prisma

  npm install -g prisma

Setup

1. Primero vamos a iniciar nuestro servidor de Prisma

     prisma init
   

   • Seleccionamos 'Demo Server' si no tenemos ningún server configurado en la consola de Prisma.
   • Escogemos el servidor con mejor latencia.
   • Insertamos un nombre para el servicio de Prisma.
   • Insertamos el nombre para el stage.
   • Seleccionamos 'Dont generate' en el lenguaje de programación.

2. Configuramos el archivo 'prisma.yml'

   • Para mayor seguridad, en las variables de entorno, en el apartado de 'PRISMA_ENDPOINT' ponemos el link que tenemos en el archivo 'prisma.yml' (el endpoint del servidor) y modificamos dicho archivo de la siguiente manera:

     

     El apartado secret tiene que ser descomentado cuando se pase a producción.

3. Hacemos el deploy del servidor de prisma para que se generen los archivos necesarios faltantes

   • Renombramos el archivo 'variables.env.sample' a 'variables.env' y luego hacemos el deploy

       prisma deploy --env-file variables.env
     

4. Comandos paa ejecutar la app:

   • Backend
     • Para abrir un 'Playground' para probar querys/mutations de graphQL con la base de datos:

         npm run dev
       

     • Para hacer un deploy de Prisma:

         npm run deploy
       

   • Frontend
     • Para abrir la aplicación en el puerto 3000

         npm start
       

Instrucciones de Uso

• El archivo que esta en 'src/generated' es el archivo generado por Prisma en cada deploy y tiene todos los métodos para los mutations y los querys a nivel del servidor.

• El archivo 'schema.graphql' que está en 'src' deberá tener todos mutations y querys que se podrán generar en el frontend.

• En la carpeta 'resolvers' están todos los métodos que van a traer/llevar la información de/a la base de datos.

• En el archivo 'datamodel.prisma' estrán todos los modelos que van a intervenir en la aplicación, como por ejemplo:

  

Agradecimientos

Boilerplate con base al curso de @wesbos Advanced React