Servir archivos estáticos

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 -_- 😮

Jorge Andres Muñoz Becerra

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

Jorge Méndez Ortega

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

Wandy Rafael Santana Evangelista

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 💚

Jesus Adrian Berrio Valdes

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

Santiago Pulido Peláez

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

Angel Raúl Acosta Rojas

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

Alfonso Navarro

Profe… simplemente genial…

Jose Daniel Molina

Node es GENIAL

Santiago Lopera Naranjo

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

Camilo Perilla

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

wilantury

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

Rolando Mamani Salas

Cada clase es mejor que la anterior

Andrés Felipe Lopez gomez

Node es brutal

Joel Bello

Te amo NodeJs, te amo programación ❤️

sr.cristofher

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

“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.”

Mario Velandia

hace 2 años

El mejor profesor y la mejor explicación, qué calidad!

Andres Prieto

hace 2 años

Con un pocod de CSS por acá y por allá se hacen cosas interesantes

Mi index

Cesar Elías Armendariz Ruano

hace 2 años

creamos una carpeta public que contendra nuestro index.html y dentro de public una carpeta llamada css que contendra nuestro style.css

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>Document</title>
</head>
<body>
    <h1>Hola, soy un estatico</h1>
</body>
</html>

style.css

body {
    background: red;
}

incrementamos una ruta a nuestro server.js

app.use('/app', express.static('public'));

Erick Alejandro Graterol Barico

Y eso que no han visto el motor Ejs es una locura lo facil que es utilizar ejs como motor de plantillas

Alejandro Ruiz Melo

Genial, ahora todo es más claro!

Supongo que ya sobre un servidor puedo usar nginx para direccionar el trafico hacia el puerto que use node con la app y cargar todo el frontend.

Johnner Alexander Gambacica Ortiz

Wow, increíble. =)

Julio Flores

Cabe destacar que el curso esta muy bien hecho de una forma muy muy clara, limpia y estructurada.

Kevin William Roberts Costa

Supongamos que entramos a la api a través de /, según la documentación de express podemos usar all()

router.all('/', function(req, res){
    response.error(req,res, 'Use /message instead', 401);
});```

Karen Paola Diaz Duarte

Práctica:

Juan Esteban Galvis

Me encanto esta clase!!! vengo del mundo del frontend y por fin integrar estos dos mundos me parece genial

Ricardo Lugo Recillas

const express = require("express");
const bodyParser = require("body-parser");
const router = express.Router();

const response = require('./network/response');

var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(router);

app.use('/app', express.static('public'));

router.get("/", function(req, res) {
	console.log(req.headers);
	response.success(req, res, "este es el mesnaje enviado ");
});

router.post("/", function(req, res) {
  res.send("peticion de post");
});

router.patch("/", function(req, res) {
  res.send("peticion de patch");
});

router.delete("/", function(req, res) {
  res.send("peticion de delete");
});

app.listen(3000);
console.log(" la aplication esta escuchando en el port http://localhost::3000");

Carlos Enrique Ramírez Flores

Excelente y muy útil para el día a día!!

Wilson Castro Gil

Excelente, todo en solo lugar (back & front)

Victor Contreras

no se si esté equivocado pero creo que la ruta debería ser

app.use('/app/message', express.static('public'));

ya que si dejamos /app nada más el cliente podría acceder solo colocando localhost:3000/app y saltarse lo anterior

POR FAVOR alguien que me corrija!!!

Francisco Garcia [C6]

app.use('/app', express.static('public'));

<code>

wilantury

Servir estáticos:

app.use('/app', express.static('public'))  //servir estáticos.

Luis Ruiz Ramos

Super.

emacastillozam

Buenísima clase!

Juan David Blanco Vergara

Cómo haríamos para tener APACHE instalado aquí para usar tanto HTML, CSS, JavaScript, MySQL, PHP y NODE a la vez? Aparte, cómo haríamos para agregarle una app React? Así mimo en public?

Ángel David Roque Ayala

Si alguien tiene problemas con este ejercicio como yo, puedes intentar hacerlo de la siguiente manera, es mas seguro.

router.use(express.static(__dirname + '/public'));

Juan José Londoño David