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.
de verdad que esto esta genial, gracias por la explicación y por toda esta información tan valiosa.
NO PUEDE SER LOS SERVIDORES DE VIDEOS TAAAN MALOS.. TAN MALA CALIDAD EN REPRODUCCION, SALTOS Y LENTOS DE CONEXION!!
la conexion puede ser tu internet, los saltos si pasa pero ya eso es el reproductor del server a
Qué conexión tienes? Te pasa lo mismo en ambos players?
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
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.
Como puedo servir sin usar un view engine, osea una simple pagina html.
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.
Hola Saludos, se me presento este problema, alguien me podria ayudar...
alguien me podria orientar donde puedo corregir la indentacion en ATOM....
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.
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.
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.
como puedo hacer este curso con HTML5 ¿Qúe pongo en server.js? ya que no explica que y como hay que ponerlo 😕
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/
lo estaba haciendo, pero me atasque porque tenía que instalar muchas cosas, pero lo intentaré
no me funciona este video... es un problema general?. Me pone que el video no está disponible.
recarga la pagina
en algunas ocasiones sucede. Pero luego de una rato funciona.
Todo bien , pero a mi no me aparece la imagen del iphone cuando abro la pagina por
, mientras que cuando abro el index.html si me aparece .
En la consola no te aparece un error al cargar la imagen?
No entiendo por que se le tiene que quitar el “public/” en el referenciado en el archivo .pug 😦
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');
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!!!
events.js:182throw 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)```
que hago para solucionarlo
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.
No entiendo por que se le tiene que quitar el “public/” en el referenciado en el archivo .pug 😦
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.
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 Pug
Nota: Lo hice en mac, no se si funcione en windows
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?
Puedes compartir tu código en github o algo similar, así es difícil saber que puede estar pasando.
ya pude solucionarlo, puse en el código del index.pug
¿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'));})functioncompile(watch){var bundle =watchify(browserify('./src/index.js',{debug:true}))functionrebundle(){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(){returncompile();});gulp.task('watch',function(){returncompile(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();
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)returnconsole.log('hubi un error'), process.exit(1);console.log('escuchando en el puerto 3000');})
