Mi primer Portfolio con Node, Express y ReactJs. Parte 1.
Tags: javascript, tutorial, node, webdev
Published: 2020-10-05 12:36:43

##Codeando con el Backend. 

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

 ![alt](https://photos.collectednotes.com/photos/590/783dcde0-5c20-44fd-9f52-1a78db9ea567)

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 ![alt](https://photos.collectednotes.com/photos/590/2ada6cce-5aad-41c9-964f-fbf5a3600bb9) )

- author: => Tu nombre. 

- license: (ISC) => Acá tienen info sobre las [licencias](https://spdx.org/licenses/), 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**.

![alt](https://photos.collectednotes.com/photos/590/166d1ce9-493c-466d-9ce9-6b9342110d28)

En el archivo **.gitignore** escribimos: 


``` 
   /node_modules
``` 
**Los node_modules nunca se suben a ningún repo**

![alt](https://photos.collectednotes.com/photos/590/f4fdf1ac-3bfe-4f20-9640-f03fb0234b47)

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/

>![alt](https://photos.collectednotes.com/photos/590/af5a667a-b721-485d-9dd0-d83b64f4fb2b)

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

>![alt](https://photos.collectednotes.com/photos/590/496d904b-b65f-43fc-82c3-1e5e29d9422c) 

>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. 

![alt](https://photos.collectednotes.com/photos/590/dd55132d-2e17-4bf2-9e6a-90fbb03dd152)

Vamos a **New** => **Create a new app** 

![alt](https://photos.collectednotes.com/photos/590/2e83569c-dc1b-4ff3-bff1-02634694e883)

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**

![alt](https://photos.collectednotes.com/photos/590/acb18a60-c9ef-4b81-8b01-b156683de304)

En **Deploy Method** hacemos click en Github

![alt](https://photos.collectednotes.com/photos/590/beb8cae2-44b8-4ecc-9d45-0eba0abf79e9)

Van a buscar su backend y conectarlo. 

![alt](https://photos.collectednotes.com/photos/590/90759e9c-836c-435d-acb9-255eb90ce7f2)

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. 

![alt](https://photos.collectednotes.com/photos/590/a875386b-7c1c-4fe4-9a1c-47019b82a3c3)

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

![alt](https://photos.collectednotes.com/photos/590/9f841d04-82a0-49e9-b1a0-4a0571aef6ce)

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

![Alt Text](https://media.giphy.com/media/BlVnrxJgTGsUw/giphy.gif)

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](https://twitter.com/reactladiescba), 

Pueden ver el video en Youtube haciendo click [aquí](https://www.youtube.com/embed/JDD2QAFSO1E).

Güeno, Eso es todo por éste post. :3
Si tienen alguna duda, consulta, o ven que cometí algun error, me escriben por [Twitter](https://twitter.com/GiulianaEOlmos)

[![Invitame un café en cafecito.app](https://cdn.cafecito.app/imgs/buttons/button_1.svg)](https://cafecito.app/giulianaeolmos)