vitals.io

First test for vitals.io

Start istance

First see process-schema.svg for base process idea.

1. Run a nextJs instance in a Docker container and mongoDB
2. Run a NextJs and separate nodeJs instance
3. Run Python flahs api for handle container front-end

Porte locali di sviluppo:

• 3000:3000 - admin.vitals.io
• 4200:3000 - vitals.io (Frontend)
• 49154:49154 - Mongo
• 5000:5000 - Api flash python

With real domain

1. Admin area: admin.vitals.io 1.1 Same istance expose NodeJs and api on Mongo (for first version)
2. Domain: vitals.io 2.1 In same container run on localhost a "Backend" and "SHELL" command for handle front-end build

Tentativi

Usare un'immagine già pronta per next ha funzionato con la build non col il dev.

Direi di partire runnado il dev con "Hot reload"

Tentativo1 **Dockerfile: ** ogni container ha il suo dockerfile che contiene una serie di istruzioni per montare immagine. Versione di Node da installare, path vari e comando per runna App da CMD

**docker-compose.yml: ** Questo file serve per impostare eventuali proxy e porte dove si runna il container. Queste porte in prod punteranno ad un dominio ** volumes: ** Volumes are the preferred mechanism for persisting data generated by and used by Docker containers. doc

1. Build docker cointainer: docker-compose build
2. Run container: docker-compose up -d
3. Stop container: docker-compose down

YEAAAH ALL DONE!

**NB: ** La cli di node è dentro app Docker

Creiamo un altro file per la versione di prod: "docker-copose.prod.yml"

Mi piacerebbe mettere la configurazione di Next sotto SRC

We have another NextInstance on port 4200 See snippet - we talk to software to redirect localhost 4200 -> 3000 (internal next port) ports:

• 3000:3000 - admin.vitals.io
• 4200:3000 - vitals.io (Frontend)
• 49154:49154 - Mongo
• 5000:5000 - Api flash python

Mongo Databse instance DEPRECATE FOR ATLAS

Create base api system for test NodeAPI and mongo db.

1. First require in "express" -> first problem: come faccio a installare un pacchetto in node in docker saenza dover ribuildare tutto il container? Docker exec

API: Create la struttura per gestire le richieste sotto /api **Input request: ** Creare la richeista dal frontend

Seguente guida Imposta una semplice immagine di monbgo altre ricerche su come gestire i container hanno portato a runnare l'immagine con:

1. docker-compose -f docker-mongo.yml up

2. Aprire la shell e digitare: mongo -u admin -p password NB: Il punto permette di vedere tramite le credenziali impostate nel container l'url di acceso

3. Definire un file js con la crazione di un utente

4. tramite il seguente url si può connecter compass atlas mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb

5. Dalla shell di docker premere "help" per vedere la listas dei comandi docker

6. Rimossa temporaneamnte l'autenticazione

NB: Nel docker-compose è stato aggiungo il volume: "mongo-data" come volume condiviso e il DB si è visto nella shell del container

1. show dbs
2. use {dbName} (use vitals)
3. Inserire un utente dalle api oppure dalla shell
4. show collections
5. db.user.find().pretty()

NB: da visual code tramite l'estensione "Docker" (presenta nella sidebar) sarà possibile aprire la shell direttamente in visual code. Ciò può essere utile quando si fanno queries su mongo

MongoDB ATALS

Dopo il corso di graphql di Maximillian, ho deciso di provare mongoDB atals (Free): https://cloud.mongodb.com/v2/60e1945551ad3b6bb7af8056#clusters?fastPoll=true Questo dopo i diversi problemi a connetere Compassa col DB nel container. Il piano è quello Free.

1. Dopo aver creato un Cluster "adminvitals"
2. aggiungere delle credenziali "Lettura e scrittura" (sidebar -> databse access) Username: stefano Password: DSqDhMzSu042jLLy
3. Aggiungere alla whitelist (sempre su atals) il proprio IP (sidebar -> network access)
4. Aggiornare le stringhe di connesione (le si possono trovare in cluster (button connesione)) sia per compass che per nodejs

Docker comand

1. docker image ls (list of all imagets manage it in app desktiop)
2. docker container ls (active container)
3. docker-compose build (compila immagine di default docker-compose.yml)
4. docker-compose up (Runna immagine) 4.1. docker-compose up --build {ribuilda}
5. docker-compose down (smonta immagine)
6. docker-compose -f {docker-compose-custom.yml} {build/up/down}
7. docker-compose ps - Lanciare il comando della dir dell'imamgine runnata, dirà le porte mappate

Hot reload

NextJs Hotrealod tramite una configurazione nel next.config.js nodemoon Hotreload per il custom server di next tramite uno script nel package json --watch-legacy

Installazione nuovi package:

1. sia nella folder
2. Due volte nella cli del container

Testing

For this documentation see /documentation/testing.md

1. Unit Testing
2. E2E Testing

GraphQL

GraphQL Schema Definition Language (SDL). This schema serves as the contract between the client and the server to define how a client can access the data.

GraphQL è fortemente tipizzato

Start Maximilian Single Source of Thruth

NodeJs package

1. graphql express-graphql

Tramite express.use() instanziare sotto "graphql" il middlewear "graphqlhttp"

Ci sono due macro proprietà negli schema di grapql:

1. Read - "query"
2. Create / modify - "mutation"

Questi parametri prendono dei "Types definition" in ingresso: Documentazion types.

NB: al middlewear express dove passo graphql, oltre a "schema" e "rootvalue" posso passare un terzo argomento: "graphiql: true". Cosi facendo navigando all'indirizzo "localhost:3000/graphql" verrà aperto un UI per fare query e debug

Prime query di test da browser (definite nello schema):

# query {
#   events
# }

mutation {
  createEvent(name: "FirstPage")
}

NB Nello schema abbiamo anche la keyword "Input" che definisce la firma di una funzione come oggetto

Schema folder of graphql

I file sono stati divisi, implementati gli utenti, l'autenticazione e l'auth middlewear.

NextJs Apollo client

La libreria più famosa per gestire le query di graphql è Apollo Client Esempio Ufficiale NextJs Typescript Apollo