Sirviendo archivos estáticos con Express

Clase 11 de 46 • Curso Definitivo de JavaScript 2016

Resumen

Vamos a corregir un detalle del contenido anterior. Express nos ayuda en configurar la forma de servir los archivos estáticos.

Archivos: https://github.com/platzi/curso-definitivo-javascript/blob/master/platzigram-8.zip?raw=true

Roberto Prince

student•

simpre usen:

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

me lo van a agradecer

Martin Paez

student•

Hola , ¿Cual es la venta a futuro?

Rodrigo Burgos S.

student•

¿Para qué es?

Geordano Polanco Rodríguez

student•

Por si le sirve a alguien. Yo he decidido organizar mis assets así: public/images - public/fonts, etc

para poder hacer esto he tenido que cambiar la configuración de express.

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

Con esto express me crea un directorio virtual llamado 'static' y las rutas a mis archivos quedará así:

link(rel='apple-touch-icon', sizes='57x57', href='static/images/apple-icon-57x57.png')

No es nada del otro mundo, pero creo que así tendremos la carpeta 'public' más organizada, igual me estoy adelantando y más adelante lo hacen así XD.

Ahí los dejo, un saludo a la comunidad.

Erick Neftalí Sarmiento Cortes

student•

de verdad que esto esta genial, gracias por la explicación y por toda esta información tan valiosa.

Ema -

student•

NO PUEDE SER LOS SERVIDORES DE VIDEOS TAAAN MALOS.. TAN MALA CALIDAD EN REPRODUCCION, SALTOS Y LENTOS DE CONEXION!!

Daniel Herrera

student•

la conexion puede ser tu internet, los saltos si pasa pero ya eso es el reproductor del server a

winiberto .

student•

Qué conexión tienes? Te pasa lo mismo en ambos players?

Eduar Jesus Tua Lopez Tua

student•

Tengo el código ideéntico a como lo tiene el prof e igual al Gulpfile.js y no se me genera el app dentro del public, qué puede ser? Cuando corro el Gulp puedo ver la tarea styles ejecutarse.

platzigram gulp  
[12:55:52] Using gulpfile ~/Documents/courses/platzi/frontend/platzigram/Gulpfile.js  
[12:55:52] Starting 'styles'...  
[12:55:52] Finished 'styles' after 14 ms  
[12:55:52] Starting 'assets'...  
[12:55:52] Finished 'assets' after 2.81 ms  
[12:55:52] Starting 'default'...  
[12:55:52] Finished 'default' after 20 μs

Eduar Jesus Tua Lopez Tua

student•

Es un error del Sublime en Linux, sólo reinicié el Sublime y ya me aparece el app.css en public. Por si a alguien el ocurre los mismo en Linux.

Santiago Maya

student•

Como puedo servir sin usar un view engine, osea una simple pagina html.

Sergio Daniel Xalambrí

student•

Los view engine te sirven para poder usar variables en tus templates, pero si no necesitas eso podés simplemente hacer res.sendFile y colocar el path a tu archivo HTML y simplemente envía ese HTML al navegador.

Diego Diaz

student•

Hola Saludos, se me presento este problema, alguien me podria ayudar...

alguien me podria orientar donde puedo corregir la indentacion en ATOM....

Error: /Users/macbookpro/Desktop/platzigram/views/index.pug:22:5
20| .col.s12.l3.push-l6.center-align
21| | ⏃ 2016 Tribu ⏃
> 22| script(src='https://code.jquery.com/jquery-3.0.0.min.js', integrity='sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=', crossorigin='anonymous')
------------^
23| script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js')
24|

Inconsistent indentation. Expecting either 2 or 4 spaces/tabs.
at makeError (/Users/macbookpro/Desktop/platzigram/node_modules/pug/node_modules/pug-lexer/node_modules/pug-error/index.js:32:13)
at Lexer.error (/Users/macbookpro/Desktop/platzigram/node_modules/pug/node_modules/pug-lexer/index.js:58:15)
at Lexer.indent (/Users/macbookpro/Desktop/platzigram/node_modules/pug/node_modules/pug-lexer/index.js:1191:18)
at Lexer.callLexerFunction (/Users/macbookpro/Desktop/platzigram/node_modules/pug/node_modules/pug-lexer/index.js:1298:23)
at Lexer.advance (/Users/macbookpro/Desktop/platzigram/node_modules/pug/node_modules/pug-lexer/index.js:1337:15)
at Lexer.callLexerFunction (/Users/macbookpro/Desktop/platzigram/node_modules/pug/node_modules/pug-lexer/index.js:1298:23)
at Lexer.getTokens (/Users/macbookpro/Desktop/platzigram/node_modules/pug/node_modules/pug-lexer/index.js:1354:12)
at lex (/Users/macbookpro/Desktop/platzigram/node_modules/pug/node_modules/pug-lexer/index.js:12:42)
at Object.load.string.lex (/Users/macbookpro/Desktop/platzigram/node_modules/pug/lib/index.js:94:27)
at Function.loadString [as string] (/Users/macbookpro/Desktop/platzigram/node_modules/pug/node_modules/pug-load/index.js:45:24)

no he logrado que el localhost acepte el archivo del server.js...

gracias por cualquier ayuda.

jesser rodrigo pariona huarcay

student•

El problema es la indentación, es un poco engorroso, pero tienes que manejar con tab para indentar, lo que te entrega HTML2jade es espacios no tab como deve de ser.

Dayan Betancourt

student•

A mi me paso, el problema es la identación del archivo pug, debes entrar en sublime text y reescribir las lineas de codigo, tienes 2 opciones o reescribes todo con tab o reescribes todo con espacios, la buena practica al parecer es con espacios, 2 espacios en blanco.

Juan Sáez García

student•

como puedo hacer este curso con HTML5 ¿Qúe pongo en server.js? ya que no explica que y como hay que ponerlo 😕

Diego Forero

Team Platzi•

En este curso se tiene que usar express como servidor para poder hacer todo, te recomiendo que inicies el curso nuevamente y hagas paso a paso todo el curso, si no entiendes mucho de JavaScript, te recomiendo que hagas primero el curso de fundamentos de JavaScript https://platzi.com/clases/fundamentos-javascript/

Juan Sáez García

student•

lo estaba haciendo, pero me atasque porque tenía que instalar muchas cosas, pero lo intentaré

Daniel Deudero

student•

no me funciona este video... es un problema general?. Me pone que el video no está disponible.

Daniel Herrera

student•

recarga la pagina

ANDRES ALBERTO MOLINA SALDARRIAGA

student•

en algunas ocasiones sucede. Pero luego de una rato funciona.

Wilfredo Bardales

student•

Todo bien , pero a mi no me aparece la imagen del iphone cuando abro la pagina por
http://localhost:3000/ , mientras que cuando abro el index.html si me aparece .

Ricardo Azpeitia P.

student•

En la consola no te aparece un error al cargar la imagen?

Andres Eduardo Alemán Otaolaurruchi

student•

No entiendo por que se le tiene que quitar el “public/” en el referenciado en el archivo .pug 😦

Isaac La Serna Castillo

student•

No me carga el app.css, tengo todo correctamente alguien sabe porque.

********server.js**********

var express = require('express');

var app = express();

app.set('view engine','pug');

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

app.get('/', function(req, res){

res.render('index');

})

app.listen(3000, function(err){

if (err) return console.log('hubo un error'),process.exit(1);

console.log('Platzigram escuchando en el puerto 3000');

})

*********index.pug***********

html

head

meta(charset='UTF-8')

title platzigram

link(rel='stylesheet', type='text/css', href='app.css')

link(href='https://fonts.googleapis.com/css?family=Montserrat|Oleo+Script', rel='stylesheet')

meta(name='viewport', content='width=device-width. initial-scale=1.0, user-scalable=no')

body

section#main-container

footer.site-footer

.container

.row

.col.s12.l3.center-align

a.btn.dropdown-button.btn-flat(href='#', data-activates='dropdown2') Idioma

ul#dropdown2.dropdown-content

a(href='#!') Español

a(href='#!') Ingles

.col.s12.l3.push-l6.center-align

| 2016 Platzigram

script(src='https://code.jquery.com/jquery-2.2.4.min.js', integrity='sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=', crossorigin='anonymous')

script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js')

**********gulpfile.js*******

var gulp = require('gulp');

var sass = require('gulp-sass');

var rename = require('gulp-rename');

gulp.task('styles', function(){

gulp

.src('index.scss')

.pipe(sass())

.pipe(rename('app.css'))

.pipe(gulp.dest('public'));

})

gulp.task('default',['styles'])

Isaac La Serna Castillo

student•

@import "node_modules/materialize-css/sass/materialize.css";

no me esta copiando todos los estilos

Emilio Escobar Pérez

student•

node_modules/materialize-css/sass/materialize.scss

tienes .css en lugar de .scss

Anderson Ferley Silva Lizarazo

student•

Esta muy interesante el tema, ya sabia algunas cosas de node pero esto de renderizar vistas con la libreria pug y lo de servir archivos estaticos esta genial,

Muy buena explicacion gracias!!!

Julian Escobar

student•

events.js:182
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::3000
    at Object.exports._errnoException (util.js:1024:11)
    at exports._exceptionWithHostPort (util.js:1047:20)
    at Server.setupListenHandle [as _listen2] (net.js:1319:14)
    at listenInCluster (net.js:1367:12)
    at Server.listen (net.js:1467:7)
    at Function.listen (C:\Users\Julian\Desktop\platzigram\node_modules\express\lib\app
lication.js:617:24)
    at Object.<anonymous> (C:\Users\Julian\Desktop\platzigram\server.js:13:5)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)```

Julian Escobar

student•

que hago para solucionarlo

Diego Forero

Team Platzi•

Al parecer tienes algo corriendo en el puerto 3000, puedes ver que esta corriendo en ese puerto o simplemente cambia el puerto en tu servidor de express e inicias nuevamente.

Juan

student•

No entiendo por que se le tiene que quitar el “public/” en el referenciado en el archivo .pug 😦

Diego Forero

Team Platzi•

Hola, en el servidor de express se le define la carpeta public para que sirva los archivos estáticos, por lo tanto el servidor ya usa por defecto esa carpeta, por lo tanto ya no es necesario definirla en las llamadas a los archivos js, css, imagenes y cualquier otro archivo estático que se ponga en la carpeta public.

Como lo explica Sacha en el minuto 1:40 aproximadamente, express busca el archivo primero en la carpeta public ya que se definio

app.user(express.static('public'));

Si no encuentra el archivo intenta buscarlo en las otras carpetas, si no lo encuentra envía el error 404 de archivo no encontrado, carga tu pagina pero por ejemplo si el archivo es el de estilos css entonces mostrará el sitio sin ningún estilo.

Daniel Hidalgo

student•

Si no les aparece “pug” en el listado de extensiones en SUBLIME TEXT agreguen este código en TERMINAL:
mkdir -p ~/Library/Application\ Support/Sublime\ Text\ 2/Packages
cd ~/Library/Application\ Support/Sublime\ Text\ 2/Packages
git clone https://github.com/davidrios/pug-tmbundle.git Pug

Nota: Lo hice en mac, no se si funcione en windows

Pedro Ernesto Vega Lozada

student•

tengo un problema,

al finalizar esta clase me cargo en el puerto 3000 el index con los estilos, pero al dar clic en el botón de idiomas me aparece el listado en la esquina sup izquierda de la pantalla, y ni siquiera aparece completo el listado de idiomas.

¿Porqué pasa esto?

Diego Forero

Team Platzi•

Puedes compartir tu código en github o algo similar, así es difícil saber que puede estar pasando.

Pedro Ernesto Vega Lozada

student•

ya pude solucionarlo, puse en el código del index.pug

    link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css")

que no era necesario poner por lo que en el index.scss agregabamos el import

@import "node_modules/materialize-css/sass/materialize.scss";

¿Por qué pasa eso con mi código si (hasta donde puedo ver) no hay diferencias con el código que tiene sacha (a excepción de los cambios por actualizaciones)?

este es el código que tengo hasta el momento (clase 17)

package.json

{
  "name": "platzigram",
  "version": "0.1.0",
  "description": "Comparte tus fotos estudiando en platzi con la comunidad",
  "main": "server.js",
  "scripts": {
    "build": "gulp",
    "start": "concurrently \"gulp watch\" \"node server\" "
  },
  "keywords": [
    "platzi",
    "javascript"
  ],
  "author": "Pedro Vega",
  "license": "MIT",
  "dependencies": {
    "empty-element": "^1.0.0",
    "express": "^4.16.3",
    "materialize-css": "^0.100.2",
    "page": "^1.8.6",
    "pug": "^2.0.3",
    "yo-yo": "^1.4.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babelify": "^8.0.0",
    "browserify": "^16.2.2",
    "gulp": "^3.9.1",
    "gulp-rename": "^1.2.3",
    "gulp-sass": "^4.0.1",
    "vinyl-source-stream": "^2.0.0",
    "watchify": "^3.11.0"
  }
}

Gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var babel = require('babelify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var watchify = require('watchify');

gulp.task('styles', function(){   //Se defino una tarea para gulp task(nombre , funcion)
	gulp
		.src('index.scss') //tomamos un archivo sass
		.pipe(sass()) //pipe es un canal de flujo, sass es una funcion
		.pipe(rename('app.css'))	
		.pipe(gulp.dest('public')); // destino del archivo que se ha procesado
})

gulp.task('assests', function() {
	gulp
		.src('assets/*')
		.pipe(gulp.dest('public'));
})

function compile(watch){
	var bundle = watchify(browserify('./src/index.js', {debug: true}))

	function rebundle(){

		console.log('--> entro a rebundle')
		bundle
			.transform(babel, {presets: ["env"]})
			.bundle()
			.pipe(source('index.js'))
			.pipe(rename('app.js'))
			.pipe(gulp.dest('public'))
	}

	if(watch){
		bundle.on('update', function(){
			console.log('--> Bundling')
			rebundle();
		});
	}

	rebundle();
}

gulp.task('build', function(){
	return compile();
});

gulp.task('watch', function(){
	return compile(true);
});

gulp.task('default',['styles','assests','build'])

index.js

var page = require('page');
var yo = require('yo-yo');
var empty = require('empty-element');

var main = document.getElementById('main-container');

page('/', function(ctx, next){
  main.innerHTML = '<a href="/signup">Signup</a>'
})

page('/signup', function(ctx, next){

  var el = yo`<div class="container">
                <div class="row">
                  <div class="col s10 push-s1">
                    <div class="row">
                      <div class="col m5 hide-on-small-only">
                        <img class="iphone" src="iphone.png">
                      </div>
                      <div class="col s12 m7">
                        <div class="row">
                          <div class="signup-box">
                            <h1 class="platzigram">Platzigram</h1>
                            <form class="signup-form">
                              <h2>Registrate para ver fotos de tus amigos en Platzi</h2>
                              <div class="section">
                                <a class="btn btn-fb hide-on-small-only">Iniciar Sesión con Facebook</a>
                                <a class="btn btn-fb hide-on-med-and-up">Iniciar Sesión</a>
                              </div>
                              <div class="divider"></div>
                              <div class="section">
                                <input type="email" name="email" placeholder="Correo Electrónico"/>
                                <input type="text" name="name" placeholder="Nombre Completo"/>
                                <input type="text" name="username" placeholder="Nombre de Usuario"/>
                                <input type="password" name="password" placeholder="Contraseña"/>
                                <button class="btn waves-effect waves-ligth btn-signup" type="submit">Regístrate</button>
                              </div>
                            </form>
                          </div>
                        </div>
                        <div class="row">
                          <div class="login-box">
                            ¿Tienes una cuenta?
                            <a href="/signin">Entrar</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>        
                </div>
              </div>`;
              
  empty(main).appendChild(el);
})

page.start();

index.scss

$secondary-color: #125688;

@import "node_modules/materialize-css/sass/materialize.scss";

body {
	background: #fafafa;
	color: #125688;
	font-family: Montserrat;
}

#main-container {
	margin: 30px auto;
}

.iphone {
	max-width: 100%;
}

.site-footer {
	text-transform: uppercase;
	font-size: 12px;
}

.login-box,
.signup-box {
	background-color: white;
	border: 1px solid #edeeee;
	border-radius: 3px;
	padding: 10px 0;
	text-align: center;
}

.signup-box .platzigram {
	font-family: 'Oleo Script';
	font-size: 50px;
}

.signup-form {
	width: 65%;
	margin: 0 auto;
}

.signup-form h2 {
	color: #a5a7aa;
	font-size: 1.2em;
}

.signup-form .btn.btn-fb {
	background-color: #4090db;
	font-size: .8em;
}

.signup-form .btn.btn-fb:hover {
	background-color: #2d6599;
}

.signup-form .btn.btn-signup {
	background-color: #125688;	
}

server.js

var express = require('express');
var app = express();


app.set('view engine', 'pug');

app.use(express.static(__dirname + '/public'))

app.get('/',function(req,res){
	res.render('index');
})

app.get('/signup',function(req,res){
	res.render('index');
})

app.get('/signin',function(req,res){
	res.render('index');
})

app.listen(3000, function(err){
	if(err) return console.log('hubi un error'), process.exit(1);

	console.log('escuchando en el puerto 3000');
})

index.pug

html
  head
    link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css")
    link(href="https://fonts.googleapis.com/css?family=Montserrat|Oleo+Script" rel="stylesheet")
    link(rel="stylesheet" type="text/css" href="app.css")

    link(rel='apple-touch-icon', sizes='57x57', href='/apple-icon-57x57.png')
    link(rel='apple-touch-icon', sizes='60x60', href='/apple-icon-60x60.png')
    link(rel='apple-touch-icon', sizes='72x72', href='/apple-icon-72x72.png')
    link(rel='apple-touch-icon', sizes='76x76', href='/apple-icon-76x76.png')
    link(rel='apple-touch-icon', sizes='114x114', href='/apple-icon-114x114.png')
    link(rel='apple-touch-icon', sizes='120x120', href='/apple-icon-120x120.png')
    link(rel='apple-touch-icon', sizes='144x144', href='/apple-icon-144x144.png')
    link(rel='apple-touch-icon', sizes='152x152', href='/apple-icon-152x152.png')
    link(rel='apple-touch-icon', sizes='180x180', href='/apple-icon-180x180.png')
    link(rel='icon', type='image/png', sizes='192x192', href='/android-icon-192x192.png')
    link(rel='icon', type='image/png', sizes='32x32', href='/favicon-32x32.png')
    link(rel='icon', type='image/png', sizes='96x96', href='/favicon-96x96.png')
    link(rel='icon', type='image/png', sizes='16x16', href='/favicon-16x16.png')
    link(rel='manifest', href='/manifest.json')
    meta(name='msapplication-TileColor', content='#ffffff')
    meta(name='msapplication-TileImage', content='/ms-icon-144x144.png')
    meta(name='theme-color', content='#ffffff')


    meta(name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no")
    meta(charset="utf-8")

  body
    section#main-container

    footer.site-footer
      .container
        .row
          .col.s12.l3.center-aling
            a.dropdown-trigger.btn.btn-flat(href='#', data-target='dropdown1') Idioma
            ul#dropdown1.dropdown-content
              li
                a(href='#!') Español
              li
                a(href='#!') Ingles
          .col.s12.l3.push-l6.center-aling
            | © 2018 PlatziGram

    script(src='https://code.jquery.com/jquery-2.2.4.min.js', integrity='sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=', crossorigin='anonymous')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js')
    script(type='text/javascript').
      M.AutoInit();
    script(type='application/javascript', src='app.js')