Servir archivos estáticos

Clase 12 de 33 • Curso de Node.js: Base de Datos con MongoDB y WebSockets

Andres Roberto Coello Goyes

student•

Que potencia de NODE puede levantar servidor leer url con metodos del server y mostrar archivos staticos con un solo archivo.. con PHP es obligatorio tener un servidor APACHE -_- :o

Jose L. Figueroa

student•

Tal cual @programandres !!!

Juan David Blanco Vergara

student•

Cómo haríamos para tener APACHE a la vez instalado aquí para usar tanto HTML, CSS, JavaScript, MySQL y PHP y NODE a la vez?

Jorge Andres Muñoz Becerra

student•

Falto especificar que el archivo se debe llamar index.html, de lo contrario no trae nada a no ser que se especifique el nombre del archivo

Carlos Hernández

teacher•

¡Muy buen punto!

Alfonso Navarro

company_admin•

Y donde se especificaría cual sería el archivo con el q se arranca???

Jorge Méndez Ortega

student•

Es importante mencionar que la opción de estáticos de express cuenta con multiples opciones de configuración, por ejemplo .

var options = {
  dotfiles: 'ignore',
  etag: false,
  extensions: ['htm', 'html'],
  index: false,
  maxAge: '1d',
  redirect: false,
  setHeaders: function (res, path, stat) {
    res.set('x-timestamp', Date.now())
  }
}

app.use(express.static('public', options))

Esto me recuerda mucho apache pero desde mi punto de vista esto es más digerible.

Mas información en https://expressjs.com/en/4x/api.html#express.static

Andrés Felipe Lopez gomez

student•

muchas gracias

Wandy Rafael Santana Evangelista

student•

Hola Devs: -Para los que no les sirva los archivos, les recomiendo que utilicen el modulo de node => path para las rutas relativas, asi les funcionara y a futuro no tendran problemas al integrar a un server:

-Recuerda, #NuncaParesDeAprender 💚

Walter Omar Barrios Vazquez

student•

Buen dato, recordar antes npm i path

Jesus Adrian Berrio Valdes

student•

Les dejo mi resumen Express nos permite responder con archivos estáticos (HTML,CSS,JS) si lo guardamos en una carpeta llamada public

Los importamos con app.use('/home', express.static('./public'))

Al buscar link.com/home aparecerá el archivo

Sebastián Pineda Duque

student•

¿En la carpeta public se pondrían el Frontend hecho, por ejemplo, React?

Ángel David Roque Ayala

student•

Correcto

jorge llanque

student•

Hay programadores que crean una carpeta llamado frontend para colocarlo allí, pero crear una carpeta public es buena práctica

Santiago Pulido Peláez

student•

Como tal, qué significa que un archivo sea estático?

Cristhian Franco

student•

Generalmente se le llama asi a las vistas o archivos que se usaran sin hacerles cambios desde el lado del cliente, por ejemplo imagenes, hojas de estilo y fuentes.

Angel Raúl Acosta Rojas

student•

Que curioso que los archivos FrontEnd vayan en /Servidor/public (Dentro) y los archivos BackEnd vayan en /Servidor (Afuera)

Alfonso Navarro

company_admin•

Profe... simplemente genial...

Andrés Muñoz

student•

wow que loco yo siempre pensé que el frontEnd se desplegaba en un servidor y en otro servidor aparte se desplegaba el backEnd y luego se iban comunicando front y back cada uno viviendo en su propia máquina, que recursos me recomiendan para profundizar más en este tema?, porque estaba totalmente perdido y entendiendo mal las cosas...

Xavier Medina Veintimilla

student•

¡Hola! :D

Aquí te dejo un recurso para que amplies más en el tema.

¡Nunca pares de aprender! 💚

Segundo Juan

student•

Buen recurso el de Xavier. Yo también lo pensaba así Andrés, estoy aprendiendo un montón en este curso, encontraste algún otro recurso para entender bien esto? Saludos

Enmanuel castillo

student•

En caso de un frontEnd hecho en React, ..¿solo arrastraría todos los archivos a la carpeta publica.?😅🤔

Juan Castro

teacher•

Puede ser tan simple o complicado como quieras. Te invito a ver este curso para estudiar este tema a profundidad: https://platzi.com/clases/ssr/. :wink:

Ezequiel Ciccioli

student•

Creo que lo que quieres saber es. Una ves que creaste tu templante frontEnd con React, ¿como lo exportas a tu servidor?. Si es así mi segunda suposición es que creaste tu frontEnd con create-react-app. Suponiendo que voy bien hasta ahora, lo que te resta es ejecutar el comando:

npm run build

en el directorio raíz de tu proyecto. esto crea un nuevo directorio llamado build, con todos los archivos que debes exportar a tu carpeta publica del servidor.

Jose Daniel Molina

student•

Node es GENIAL

Santiago Lopera Naranjo

student•

Integrar el Front con Backend me lo imaginaba mucho mas complejo, es super facil, Carlos, es un super profesor, explica todo clarito! :D

Camilo Perilla

student•

Una regla tan vieja como el internet es que el servidor por defecto, siempre, siempre pero siempre buscara un archivo llamado index.html

Wilson Fernando Antury Torres

student•

Es buena práctica servir html y css desde el backend o mejor separar el frontend del backend. Que opinan?

Efrain Pineda Jaimes

student•

Depende de la arquitectuta que montes, en general puede ser Server Side rendered, Client side rendered (por ejemplo, una SPA) y otras varias que combinan la dos.

Rolando Mamani Salas

student•

Cada clase es mejor que la anterior

Andrés Felipe Lopez gomez

student•

Node es brutal

Joel Bello

student•

Te amo NodeJs, te amo programación <3

Cristofher Jumbo Jimenez

student•

Aprovecho y comento como funciona las paginas estaticaas:

Webpack u otro bundler al hacer npm run build, compila todo el frontend y lo mete en el archivo dist | out | public etc... Y al hacer npm run start, el backend (servidor ) compila desde esta carpeta.

Por eso es bueno para paginas que no tienen mucho o nada de animaciones. El servidor no tarda nada en hacer el "print" del sitio web.

CHRISTIAN AROS

student•

"Ya tenemos todo lo que necesitamos para crear una API increíble en nuestro servidor, pero todavía falta una parte muy importante y es servers estáticos (html, css, js), todos los archivos necesarios para el frontend de nuestra aplicación. Nodejs es buenisimo para servir cualquier tipo de petición porque no se bloquea. Entonces para hacerlo vamos a usar el servidor de estáticos de express."