Mi primer Portfolio con Node, Express y ReactJs. Parte 1.

Codeando con el Backend.

Holis! Acá estoy posteando de vuelta, esta vez algo un poco más técnico.

Vamos a hacer un portfolio en ReactJS, que reciba información de una API codeada en NodeJS usando el framework Express.

Dato importante: Vamos a deployar ambas apps.

Configurando el entorno.

Para comenzar, primero deben tener instalado NodeJs. Link para descargar => https://nodejs.org/es/download/

Una vez que ya tienen Node instalado. Vamos a abrir nuestro editor o IDE favorito y vamos a posicionarnos en la carpeta en donde comúnmente guardamos nuestros proyectos. En la consola, escribimos lo siguiente:

mkdir portfoliointegracion
cd portfoliointegracion

Esto crea una carpeta en donde va a estar alojado el frontend y el backend de nuestro proyecto.

Ahora, vamos a crear la carpeta donde se va a alojar el backend, es decir, la API del portfolio.

mkdir backendPorfolio
cd backendPorfolio

Por cierto, vamos a estar utilizando NPM, y se instala de la siguiente manera.

npm install npm@latest -g

Para chequear que node y/o npm estén correctamente instalados, hacemos...

node -v
npm -v 

Y... ahora sí! Comencemos.

Creando la API.

Insatalando los paquetes

En la consola escribimos el siguiente:

npm init

y vamos a tener el siguiente formulario (el cual lo vas avanzando con un ENTER):

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (backendPorfolio)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

• package name: (backendPorfolio) => Hace referencia al nombre del proyecto, toma por defecto el nombre de la carpeta.

• version: (1.0.0) =>Versión del proyecto, comienza siempre con 1.0.0, o en su defecto podemos utilizar 0.1.0.

• description: => Lo dice el nombre, es una breve descripción del proyecto.

• entry point: (index.js) => Es el archivo de javascript que se va a consumir cuando necesiten tu API, ahí esta toda la lógica del módulo. Por defecto es index.js

• test command: => Ahí van a estar nuestros comandos, por el momento solo hacemos ENTER.

• git repository: => Va la URL del repo. Por ahora solo ENTER.

• keywords: => Van las palabras clave que sean relevantes para el módulo. (Nunca lo use )

• author: => Tu nombre.

• license: (ISC) => Acá tienen info sobre las licencias, yo siempre uso la que viene por defecto.

Y cuando terminamos nos debería devolver algo parecido a esto:

{
  "name": "backendPorfolio",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

Una vez listo esto, vamos a instalar los paquetes necesarios. Data: Los paquetes que vamos a usar durante el desarrollo pero que no son necesarios para producción los podemos instalar en los devDependecies (voy a mostrar cómo hacerlo).

Los paquetes a utilizar en producción son: cors y express. Y para ello en la consola escribimos:

npm install cors express --save

y en desarrollo vamos a usar nodemon:

npm install nodemon --save -D

El package.json nos debería quedar algo así:

  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.4"
  }

y aprovechando que estamos en este archivo vamos a crear dos nuevos atajos en los scripts del archivo.

   "scripts": {
    "start": "node index",
    "dev": "nodemon index"
  },

En este caso va index porque mi servidor va a correr en ese archivo, si en su caso no es ese el nombre, usen el que ustedes crearon.

Para poder correr esto dos scripts se corren por consola de la siguiente manera:

   npm start

Este script es el único que se corre de esa manera, el resto de los scripts que creemos, siempre va a escribirse npm run <nombreDelScript> . Para correr el de dev lo hacemos de la siguiente manera:

   npm run dev

Ordenando los archivos.

Vamos a necesitar crear sobre la carpeta actual, una carpeta JSON (que contenga dos archivos, About.js y Portfolio.json), un archivo index.js, y el archivo .gitignore.

En el archivo .gitignore escribimos:

   /node_modules

Los node_modules nunca se suben a ningún repo

En index.js vamos a escribir la siguiente:

const express = require("express");
const cors = require("cors");
const app = express();

app.use(cors()); 

const port = process.env.PORT || 8080;

app.listen(port, () => {
    console.log(`Server on : ${port}`)
});

• process.env.PORT || 8080; => En algunos entornos como Heroku (que es donde vamos a deployar la api) debemos configurar la app para que escuche la variable PORT, y si llegase a estar vacía (como lo es en el caso de desarrollo) le damos la opción del "escuchar" el otro puerto (8080).

Si hacemos npm run dev deberíamos ver por consola Server on: 8080

Completando los JSON

Para el About.json

[
    {
        "name": "Giuliana Olmos",
        "profession" : "Full Stack Developer",
        "photo" : "https://i.ibb.co/ThFjyny/667e3492-0b16-4931-9946-fd6e39fdff6f.jpg",
        "about_me" : "Soy una entusiasta de las tecnologías, amo hacer desarrollo web y confío en la colaboración entre comunidades para lograr un mejor ecosistema en el ámbito de la tecnología.",
        "skills": [
        "Javascript",
        "NodeJs",
        "ReactJS",
        "Angular",
        "HTML",
        "CSS",
        "MySQL",
        "MongoDB"
        ]
    }
]

y en el Portfolio.json :

[
    {
        "name": "Proyecto 1",
        "description": "Utilice HTML y CSS para trabajar con los estilos y hacer un CV bonito y pechochor",
        "image": "https://i.ibb.co/ThFjyny/667e3492-0b16-4931-9946-fd6e39fdff6f.jpg",
        "link" : "http://cv.giulianaolmos.guixon.com/"
    },
    {
        "name": "Proyecto 2",
        "description": "Utilice HTML y CSS para trabajar con los estilos y hacer un CV bonito y pechochor",
        "image": "https://i.ibb.co/ThFjyny/667e3492-0b16-4931-9946-fd6e39fdff6f.jpg",
        "link": "http://cv.giulianaolmos.guixon.com/"
    }

]

BONUS: Como subir tu imagen al server.

En mi caso para subir las imágenes lo que hice fue lo siguiente.

En esta página => https://es.imgbb.com/

Hacemos click en el botón Comenza a subir, nos va a abrir el explorador de archivos para seleccionar la imagen.

Seleccionen "no eliminar automáticamente". Una vez que hicimos click en Subir, nos van a presentar la imagen que subimos, en esa imagen hacen click y los manda a una nueva página. Sobre la nueva imagen hacen click derecho, y le dan a abrir imagen en una nueva pestaña. El link que aparece en esa pestaña es el que debemos copiar y pegar en el JSON.

Creando las rutas.

En nuestro index, una vez que ya tenemos los JSONs completos, debemos importarlos y mostrarlos a través de una ruta. A eso lo hacemos de la siguiente manera, entre la const PORT y el app.listen escribimos el siguiente código.

const about = require("./JSON/About.json");
const portfolio = require("./JSON/Portfolio.json");

app.get('/', (req, res) => {
    res.send("Amiga, funciona")
});

app.get('/about', (req, res) => {
    res.json(about)
});

app.get('/portfolio', (req, res) => {
    res.json(portfolio)
});

Y con eso ya tenemos nuestra API funcionando de manera local.

Deployando la API.

El archivo Procfile.

Vamos a deployar nuestra app en Heroku. Para eso, en la carpeta portfoliointegracion, vamos a crear el archivo Procfile.

En ese archivo vamos a escribir este comando:

node index

Aclaración importante: Escribimos index, porque es el archivo centran en el cual corre el servidor, si su archivo tuviese otro nombre o tuviese un path diferente deben escribir el que corresponde a su proyecto.

Subiendo el proyecto a Github

En su perfil de Github deben hacer click en el botón con un + y seleccionar crear nuevo repositorio. Una vez completado el formulario que les aparece hacen click en crear respositorio y en su consola, desde la carpeta que contiene la API, escriben los siguientes comandos (estos también se los indica Git, aunque le haremos un ligero cambio):

git init
git add .
git commit -m "first commit"
git remote add origin <el link de su repo>
git push -u origin master

Después de que hicieron el push, van a su página en Github y presionan F5, ya deberían tener su repo cargado.

Luchando con Heroku

Lo primero que vamos a ver cuándo nos logueemos es lo siguiente.

Vamos a New => Create a new app

En App name, eligen el nombre que va a tener su URL.

https://<AppName>.herokuapp.com

No conozco mucho sobre la región, yo siempre utilizo USA.

Después de crear la app, van a acceder a la siguiente pantalla.
Elegimos la pestaña Deploy

En Deploy Method hacemos click en Github

Van a buscar su backend y conectarlo.

A la hora de hacer el deploy, van a tener dos maneras de hacer el deploy.

• Automático: Cada vez que hacemos un push a la rama seleccionada se hace el deploy.
• Manual: Nosotros decidimos cuando hacer el deploy.

Personalmente uso el manual porque es un proyecto pequeño.

Una vez hecho el deploy, les aparece el botón View.

Y con eso yo pueden acceder a su app deployada con Heroku.

Esta parte es solo el backend, el front estará publicado en otro post. Si quieren ver la charla completa. La dimos el sábado con React Ladies,

Pueden ver el video en Youtube haciendo click aquí.

Güeno, Eso es todo por éste post. :3 Si tienen alguna duda, consulta, o ven que cometí algun error, me escriben por Twitter