la35.net blog para alumnos de la ET Nº35

Guías de desarrollo web full stack JS

por Santiago Trini

Para mis alumnos de Proyecto Informático I y para el que le interese les dejo un repo donde comienzo a desarrollar unos apuntes sobre desarrollo web full stack con MongoDB, Express, React y NodeJS (MERN).

Las guías van a estar en los README de cada repo donde van a poder encontrar el código terminado. El único requisito es entender un poco de HTML, CSS y JS (un poquito nada más).

La primera ya está disponible en santiagotrini/express-hello-world.

Contenidos

  1. Requisitos
  2. Algunas convenciones antes de arrancar
  3. Fijarse que todo ande antes de arrancar
  4. Crear un proyecto de NodeJS
  5. Agregar Express y el .gitignore
  6. Creamos el index.js y agregamos código
  7. Modificamos el package.json y probamos que ande todo
  8. Subiendo la app a Internet
  9. Actualizando el código para Heroku
  10. Creamos una app en Heroku
  11. Deploy automático desde GitHub
  12. Probemos de mostrar algo de HTML desde la app
  13. Pero no necesito todo esto para poner algo de HTML en la web
  14. Muy bonito todo, pero este ejemplo es una pavada
  15. No entendí nada. ¿Dónde puedo aprendar más?

Requisitos

Nota: los últimos tres requisitos son para trabajar con bases de datos (tanto SQL como NoSQL), no son urgentes para empezar. Voy a aclarar en la guía cuando se necesite conexión a Internet. Todos los requisitos de la lista de arriba son gratuitos, si alguno les pide tarjeta de crédito están en el lugar equivocado, las cuentas de GitHub, MongoDB Atlas y Heroku incluídas.

Algunas convenciones antes de arrancar

Cuando les pido ejecutar comandos en la terminal van a ver algo como esto.

$ mkdir hello-world
$ cd hello-world
$ npm init -y

El signo $ ahí está para indicar que eso se ejecuta en la terminal, pero no se escribe. No es capricho mío, es una convención aceptada por todo el mundo. Cada vez que voy a una nueva línea significa que presionamos Enter. Por favor no quiero ver a nadie en diciembre copiando el signo $.

En general los comandos para la terminal en Windows y en Linux son los mismos, en los casos que no lo sean lo voy a aclarar.

Por otro lado, cuando haya que escribir código (casi siempre en JavaScript) voy a poner en un comentario el nombre del archivo al que le pertenece como en el siguiente ejemplo. El lenguaje se infiere de la extensión del archivo.

// index.js
const express = require('express');

const port = 3000;

Fijarse que todo ande antes de arrancar

Verificar que NodeJS, npm y Git se puedan usar desde la terminal.

$ node -v
v14.3.0
$ npm -v
6.14.5
$ git --version
git version 2.27.0

Si ven los números de versión está todo bien.

Lista de cosas antes de arrancar:

Crear un proyecto de NodeJS

Empezamos entonces, creamos una carpeta para nuestro proyecto. Nos vamos a esa carpeta y le decimos a Git que la trate como a un repositorio. También creamos el package.json con npm. Todo eso con los siguientes comandos.

$ mkdir express-hello-world
$ cd express-hello-world
$ git init
$ npm init -y

Agregar Express y el .gitignore

Ahora hacemos dos cosas, agregamos un archivo llamado .gitignore para que Git ignore la carpeta node_modules. Esa carpeta se crea cuando instalamos librerías con npm. En nuestro caso vamos a instalar Express (requiere Internet).

$ echo node_modules > .gitignore
$ npm install express

Creamos el index.js y agregamos código

Creamos un archivo llamado index.js. En Linux:

$ touch index.js

En Windows:

$ type nul > index.js

Abrimos este archivo y tipeamos el siguiente código. Los comentarios explican brevemente cada parte. La app no se puede hacer más básica que esto.

// index.js

// importa la libreria express
const express = require('express');

// crea el objeto app
const app = express();

// la app responde con Hello world
// a todas las peticiones GET a /
app.get('/', (req, res) => {
  res.send('Hello world');
});

// el server escucha en el puerto 3000
app.listen(3000);

Modificamos el package.json y probamos que ande todo

Abrimos el package.json y agregamos una propiedad llamada start a la parte de scripts. Quedaría así.

{
  "name": "express-hello-world",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  }
}

Para probar que todo funcione ejecutamos nuestra app en la terminal.

$ npm start

Y nos vamos a http://localhost:3000 en el navegador web. Deberíamos ver el “Hello world”.

Subiendo la app a Internet

Ya tenemos la app funcionando localmente, podemos seguir desarrollando localmente y agregarle cosas a la app. O podemos subirla a Internet. Vamos por la segunda opción. A partir de acá por razones obvias necesitamos Internet.

Primero nos vamos a GitHub y nos logeamos. Nos recibe un dashboard. Creamos un repositorio nuevo.

GitHub dashboard

Elegimos un nombre y lo demás lo dejamos por defecto.

Crear repo

El de este ejemplo va a ser usuario/express-hello-world. En usuario cada uno va a tener su nombre de usuario por supuesto.

Tomamos nota del link del repo que nos muestra la siguiente pantalla, ese es el que vamos a usar en el comando git remote add origin.

Importar repo desde CLI

De vuelta en la terminal hacemos lo siguiente en la carpeta del proyecto.

$ git remote add origin https://github.com/usuario/express-hello-world.git
$ git add .
$ git commit -m "primer commit"

Si cuando ejecutan git commit les pregunta quiénes son y no hace el commit configuren su nombre y mail con los siguientes comandos. Después de ejecutar los dos git config ejecuten devuelta el git commit porque la primera vez no lo procesó.

$ git config --global user.name "Nombre Apellido"
$ git config --global user.email "[email protected]"

Por último suben el código a GitHub con git push

$ git push -u origin master

Les va a pedir usuario y contraseña de GitHub. Cuando termine vayan a https://github.com/usuario/express-hello-world y deberían ver su código.

Actualizando el código para Heroku

Ya casi estamos, para que esta app esté funcionando desde Heroku modificamos un par de cosas antes de hacer nuestro primer deploy.

El index.js quedaría así ahora:

// index.js

// importa la libreria express
const express = require('express');

// ponemos el puerto del server en una variable
const port = process.env.PORT || 3000;

// crea el objeto app
const app = express();

// la app responde con Hello world
// a todas las peticiones GET a /
app.get('/', (req, res) => {
  res.send('Hello world');
});

// el server escucha en el puerto 3000
app.listen(port);

Agregamos un archivo llamado Procfile con el texto web: npm start en la carpeta del proyecto.

$ echo web: npm start > Procfile

Subimos estas modificaciones a nuestro repositorio en GitHub. A partir de ahora no hace falta usar git push -u origin master, con git push a secas alcanza.

$ git add .
$ git commit -m "modificaciones para Heroku"
$ git push

Creamos una app en Heroku

Acá tenemos dos opciones, usar la CLI de Heroku o usar la interfaz web (el dashboard) que aparece cuando nos logeamos en la web de Heroku. Hasta el momento la única manera que conozco de linkear el repo de GitHub con Heroku es en la interfaz web así que vamos a Heroku, nos logeamos y le damos al boton “new” en la esquina superior derecha para crear una app.

Heroku new app

Elegimos un nombre y le damos al botón de crear app.

Heroku new app

Deploy automático desde GitHub

Nos aparece un panel de control de la nueva app. En la pestaña de “Deploy”, en la sección “Deployment method” elegimos GitHub y conectamos nuestra cuenta de GitHub a Heroku.

Heroku conectar GitHub

Luego activamos los deploys automáticos desde GitHub y hacemos un deploy manual. Listo, la app está online. Usen el botón de “View” para ver como quedó. O en el navegador ponemos https://express-hello-world-1729.herokuapp.com (reemplazar por el nombre de su app).

Heroku deploys

Probemos de mostrar algo de HTML desde la app

A partir de ahora cada vez que cambiemos algo en nuestro proyecto primero lo probamos localmente en nuestra computadora. Si estamos conformes realizamos un commit y lo subimos a GitHub. Lo que esté en el repo de GitHub es lo que está online en Heroku, están sincronizados.

Hagamos la prueba, en vez de mostrar “Hello world” pongamos un poco de HTML en nuestra app de Express.

Vamos a index.js y agregamos una línea de código, quedaría de esta manera el archivo ahora.

// index.js

// importa la libreria express
const express = require('express');

// ponemos el puerto del server en una variable
const port = process.env.PORT || 3000;

// crea el objeto app
const app = express();

// agregamos esta línea
app.use(express.static('public'));

// la app responde con Hello world
// a todas las peticiones GET a /
app.get('/', (req, res) => {
  res.send('Hello world');
});

// el server escucha en el puerto 3000
app.listen(port);

Agregamos una carpeta llamada public a nuestro proyecto y dentro de public un archivo index.html.

$ mkdir public
$ cd public
$ touch index.html

En Windows recuerden reemplazar touch archivo por type nul > archivo.

Agregamos algo de código en index.html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Mi primer app</h1>
    <p>Lorem ipsum sit dolor amet...</p>
    <hr>
    <h2>Estoy aprendiendo</h2>
  </body>
</html>

Listo, probamos que todo ande ejecutando el server.

$ npm start

Y chequeamos que todo esté bien en http://localhost:3000. Si estamos conformes hacemos un commit y un push al remoto (GitHub).

$ git add .
$ git commit -m "agrega index.html"
$ git push

En un par de minutos se actualiza la app en Heroku y listo, podemos ver los cambios en https://nombre-de-la-app.herokuapp.com.

Pero no necesito todo esto para poner algo de HTML en la web

Más vale que no, les muestro una manera más fácil y rápida, pero mejor lo leen en otro README. En este repo les muestro como poner online un sitio estático de una manera más fácil y rápida.

Heroku está pensado para hostear todo tipo de aplicaciones web, GitHub Pages es una manera rápida de hostear sitios estáticos, mucho más limitados.

Muy bonito todo, pero este ejemplo es una pavada

Bueno, paso a paso, para la próxima hacemos un hello-database y conectamos una base de datos a nuestra app de Express. Este es el principal motivo para separar nuestra aplicación web en backend y frontend.

No entendí nada. ¿Dónde puedo aprendar más?

Bueno, ya que preguntan les dejo material de lectura.

Escrito el 16 de Junio de 2020 por Santiago Trini
Compartir en

También te puede interesar