15

Instala y corre el proyecto del curso en tu computadora sin problemas

¡Hola! Sé que estás aquí porque quieres saber cómo instalar y correr el proyecto de este curso, ¡No hay problema! aquí esto yo para guiarte paso a paso con la instalación del mismo.

¿Cómo funciona el proyecto de este curso?

El proyecto de este curso funciona gracias a gulp, gulp es una herramienta que te va a permitir compilar assets y levantar un servidor de desarrollo de manera sencilla y básica.
.
Este tutorial lo explicaré para Linux ¡Espera, no te vayas! Si usas Windows también puede servirte, necesitas tener WSL instalado (Por favor evita desarrollar bajo Windows directamente, es muy difícil virtualizar todo y adaptar los proyectos para que funcionen en Windows)
.
Si quieres saber cómo instalar WSL, te recomiendo que tomes el Curso de Prework: Configuración de Entorno de Desarrollo en Windows además también te servirá para instalar NPM y NodeJS que lo necesitarás.
.
También estaremos usando git así que no te vendría mal el Curso Profesional de Git y GitHub
.
Muy buen, ahora que ya lo tienes ¡Vamos a ello!

Instalación

Muy bien, lo primer es clonar el repositorio del proyecto, para eso nos dirigimos al repositorio del profesor:
.
https://github.com/jggomez/blogeek-platzi
.
Presionas el botón de “clone” y en tu terminal te vas a tu carpeta de proyecto en donde deseas guardarlo y escribes:

git clone [email protected].com:jggomez/blogeek-platzi.git

En mi caso estoy usando SSH, si tu no usas SSH (Deberías usarlo) sustituye el enlace del repositorio por el de http.
.
Perfecto, ya tienes el proyecto clonado, sin embargo, este es el proyecto ya terminado, la idea es que tú puedas seguir el curso haciendo lo que el profesor hace, así que tenemos que revertirnos al primer commit, por lo que entramos a la carpeta del proyecto desde la terminal y lo hacemos:

cd blogeek-platzi
git reset3c39e11 --hard

Al comando reset le estamos pasando el id del primer commit (Puedes consultarlo por medio de un git log), de esta manera reseteamos el proyecto al código boilerplate que usa el profesor.
.
Muy bien, hasta este punto ya tenemos el proyecto, sin embargo, eventualmente en el curso el profesor va a hacer uso de un archivo que no está trackeado por git, así que te tocará crearlo manualmente.
.
Dirígete a public/js y crea una carpeta llamada “config”, dentro de la misma, creaun archivo llamado “ConfigFirebase.js” tal cual, respetando las mayúsculas, deja el archivo vacío, el profesor indicará en el curso cómo llenarlo.
.
Procederemos a levantar ahora si el proyecto, como te mencioné, el proyecto usa gulp, sin embargo, la versión que se utiliza es una versión anterior a la reciente, por lo que tenemos que crear un archivo que nos ayudará a resolver este pequeño problema que impedirá que gulp se ejecute.
.
En la carpeta raíz del proyecto crearemos un archivo llamado “npm-shrinkwrap.json” y dentro colocaremos lo siguiente:

{
  "dependencies": {
    "graceful-fs": {
        "version": "4.2.2"
     }
  }
}

Guardamos el archivo y nos dirigimos a nuestra terminal, nos ubicamos en la carpeta raíz del proyecto e instalamos las dependencias:

npm install

Para poder usar el comando gulp, debemos tenerlo instalado, así que procederemos a instalarlo de manera global mediante NPM:

sudo npm install --global gulp-cli

Como este comando lo instalará de manera global, debemos ejecutarlo con sudo
.
¡Genial! El proyecto ya está listo para correr, para empezar a trabajar tenemos que levantar el servidor, esto lo hacemos mediante el comando gulp, por lo que en la terminal, desde la raíz de nuestro proyecto simplemente escribimos:

gulp

Esto empezará a compilar los assets y te abrirá el proyecto en el navegador de forma automática, recuerda que para poder trabajar necesitas tener la terminal abierta con el proyecto corriendo, para apagar el servidor, en tu terminal presionas ctrl + c y escribes exit.
.
¡Ahora si a mirar el curso! Espero haberte ayudado ^^

Fuentes

Escribe tu comentario
+ 2
Ordenar por:
4
20288Puntos

Gracias por tremendo aporte!!

3
6392Puntos
8 meses

Gracias por tu aporte! You really rock boy!

3
21115Puntos

Tengo este error cuando ejecuto gulp ¿que debo hacer?

ReferenceError: primordials is not defined
    at fs.js:45:5
    at req_ (/home/daru/courses/firebase/blogeek-platzi/node_modules/natives/index.js:143:24)
    at Object.req [as require] (/home/daru/courses/firebase/blogeek-platzi/node_modules/natives/index.js:55:10)
    at Object.<anonymous> (/home/daru/courses/firebase/blogeek-platzi/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)

4
4 meses

Amigo ya encontré la solución por si te sirve, el problema son las versiones de gulp y nodejs que estamos usando, estas no son compatibles, cambie mi versión de nodejs a 11.15.0 y ya me funcione, puedes hacer este cambio con estos comandos:

npm install -g n: Este comando es para instalar n que permite hacer estos cambios de versión de nodejs en tu maquina
sudo n 11.15.0: Y con este comando haces el cambio de versión y listo, ya no deberías de tener problemas de compatibilidad.

Te dejo el link por si quiere revisar más a fondo: https://stackoverflow.com/questions/55921442/how-to-fix-referenceerror-primordials-is-not-defined-in-node-js

1
34664Puntos
3 meses

De acuerod a lo mencionado por Joan, ejecuté esta línea de comando para cambiar la versión de mi Nodejs y así ejecutar correctamente el proyecto.

sudo npm i -g node@11.15.0 --force
1
3741Puntos

Muchas gracias por el aporte, me sirvió bastante.

1
29343Puntos

Excelente muchas gracias amigo