DEV Community

Giuliana Olmos
Giuliana Olmos

Posted on

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.

alt

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

npm install npm@latest -g
Enter fullscreen mode Exit fullscreen mode

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

node -v
npm -v 
Enter fullscreen mode Exit fullscreen mode

Y... ahora sí! Comencemos.

Creando la API.

Insatalando los paquetes

En la consola escribimos el siguiente:

npm init
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode
  • 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 )

  • 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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

y en desarrollo vamos a usar nodemon:

npm install nodemon --save -D
Enter fullscreen mode Exit fullscreen mode

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

  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
Enter fullscreen mode Exit fullscreen mode

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"
  },
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

En el archivo .gitignore escribimos:

   /node_modules
Enter fullscreen mode Exit fullscreen mode

Los node_modules nunca se suben a ningún repo

alt

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}`)
});
Enter fullscreen mode Exit fullscreen mode
  • 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"
        ]
    }
]
Enter fullscreen mode Exit fullscreen mode

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/"
    }

]
Enter fullscreen mode Exit fullscreen mode

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

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

alt

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)
});

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Vamos a New => Create a new app

alt

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

https://.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

En Deploy Method hacemos click en Github

alt

Van a buscar su backend y conectarlo.

alt

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

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

alt

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

Alt Text

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

Invitame un café en cafecito.app

Top comments (2)

Collapse
 
cbarrientos20 profile image
Carla

Te conocí hace algunos días googleando, me saltó el post de cómo te convertiste en desarrolladora. Estaba por empezar este tutorial y me acabo de enterar que Heroku dejó de ser gratuito 😭. Voy a ver qué alternativa consigo!

Collapse
 
giulianaolmos profile image
Giuliana Olmos

Hola! Lamento la demora en responder!
Si, quedo desactualizado el post, tal vez mas adelante lo actualice para conseguir el mismo resultado pero con alguna nueva solucion :D