Collegare css al localhost

Linguaggi di programmazione: php, perl, python, C, bash e tutti gli altri.
Avatar utente
dag
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 306
Iscrizione: sabato 12 agosto 2006, 16:55
Località: verona

Collegare css al localhost

Messaggio da dag » martedì 3 marzo 2020, 15:55

Ciao a tutti!
sto seguendo un corso su Udemy di programmazione web e sono al momento impegnato nella realizzazione di un "semplice" sito che recuperi il meteo di una località indicata da un utente attraverso un form.
Mi sono imbattuto in una cosa strana.
Lavorando sugli indirizzi relativi, quindi i percorsi in cui si trovano i vari file index.html , style.css ecc ecc tutto funziona, nel senso che lo stile previsto nel file style.css, che si trova allo stesso livello sia dell'index.html che del file app.js (uso node ed express), viene regolarmente applicato.
Tuttavia se faccio girare l'app sul localhost:3000, scusate se sbaglio magari la terminologia, il css non viene caricato. Vi è mai successo?
Ribadisco che se nella barra indirizzi c'è scritto il percorso locale della pagina tutto funziona, mentre se c'è scritto localhost:3000 no.
intel i3 8100, mobo msi bazooka b360m, 8 giga ram, msi gtx 1050 ti

Avatar utente
DoctorStrange
Entusiasta Emergente
Entusiasta Emergente
Messaggi: 1808
Iscrizione: mercoledì 14 ottobre 2015, 9:33
Desktop: Gnome3
Distribuzione: Ubuntu 18.04 Bionic Beaver
Sesso: Maschile
Località: Roma, Italia

Re: Collegare css al localhost

Messaggio da DoctorStrange » martedì 3 marzo 2020, 16:48

In pratica il tuo dubbio è per quale motivo la stessa applicazione non funziona se specifichi la porta 3000, piuttosto che la normale porta 8080?

Avatar utente
dag
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 306
Iscrizione: sabato 12 agosto 2006, 16:55
Località: verona

Re: Collegare css al localhost

Messaggio da dag » martedì 3 marzo 2020, 17:42

Ciao,
non è tanto per la porta, tra l'altro la 8080 non l'ho provata, ma per la differenza tra quando apro semplicemente il file index.html cliccando sul file stesso e scegliendo apri con chrome, e quando invece avvio il server locale da terminale e visualizzo poi la index.html sulla porta localhost:3000. Eventualmente posto due screenshot.
Nel primo caso, su chrome quando carica l'index.html vedi scritto il percorso relativo tipo user/desktop/ nomecartella/ ecc ecc e il css funziona ,
nel secondo caso nella barra degli indirizzi vedi solo localhost:3000 ma lindex.html non carica il css
intel i3 8100, mobo msi bazooka b360m, 8 giga ram, msi gtx 1050 ti

Avatar utente
nuzzopippo
Entusiasta Emergente
Entusiasta Emergente
Messaggi: 1339
Iscrizione: giovedì 12 ottobre 2006, 11:34

Re: Collegare css al localhost

Messaggio da nuzzopippo » mercoledì 4 marzo 2020, 5:32

dag ha scritto:
martedì 3 marzo 2020, 17:42
non è tanto per la porta, tra l'altro la 8080 non l'ho provata, ma per la differenza tra quando apro semplicemente il file index.html cliccando sul file stesso e scegliendo apri con chrome, e quando invece avvio il server locale da terminale e visualizzo poi la index.html sulla porta localhost:3000. ...
Di norma un server web, tipo Apache, non permette un accesso libero al file-system della macchina che lo ospita, lo spazio consentito alla consultazione esterna è di norma circoscritto alla cartella definita quale "root" di un virtualhost, tutte le risorse relative devono essere all'interno di tale cartella definita.

In una codifica html la posizione di una risorsa interna al file-system (ed alla cartella definita quale root) si esprime con una notazione relativa al file html stesso, con l'indicazione "normale" per una sub-cartella, p.e. tipo "risorse/mackup/css", indicando con notazione "../" una cartella superiore, e poi il successivo percorso relativo, rimanendo nell'esempio "../risorse/mackup/css", per maggiori dettagli, dai una occhiata qui

Avatar utente
dag
Scoppiettante Seguace
Scoppiettante Seguace
Messaggi: 306
Iscrizione: sabato 12 agosto 2006, 16:55
Località: verona

Re: Collegare css al localhost

Messaggio da dag » venerdì 13 marzo 2020, 15:01

Ciao e grazie per le risposte. Nel caso possa servire ad altri...
In sostanza usando Node.js ed Express per passare il codice Css è necessario che il file, ad esempio style.css, si trovi dentro una cartella denominata Public (nel mio caso sulla stessa posizione dei vari index.html, app.js ecc ecc c'è Public, Css, style.css) e poi si dice ad express che la deve usare così:

Codice: Seleziona tutto


app.use(express.static(__dirname + "/public"));

A quel punto lui sa dove andare a prendere i file css. Ovviamente nel file index.html c'è scritto così:

Codice: Seleziona tutto


<link href="/css/style.css" rel="stylesheet" type="text/css">

Adesso funziona.
intel i3 8100, mobo msi bazooka b360m, 8 giga ram, msi gtx 1050 ti

Scrivi risposta

Ritorna a “Programmazione”

Chi c’è in linea

Visualizzano questa sezione: Google [Bot] e 6 ospiti