DEV Community

Cover image for Tu primer app de Express
Roger
Roger

Posted on • Updated on

Tu primer app de Express

馃憢 Te ense帽are como crear una aplicaci贸n de express de una manera bastante f谩cil y din谩mica.

Inicializando el proyecto.

Aqu铆 podr谩s crear tu primer aplicaci贸n de express, es bastante f谩cil, y te servir谩 para futuros proyectos.

Primero deber谩s crear una carpeta en donde guardaras tu proyecto, le puedes poner el nombre que quieras (api, workspace, proyecto, etc.), despu茅s, debes escribir el siguiente comando en tu terminal:

npm init -y
Enter fullscreen mode Exit fullscreen mode

Para esto ya debes tener instalado NodeJS

Y se nos creara un archivo package.json, que se vera de la siguiente manera:

{
  "name": "api",
  "version": "1.0.0",
  "description": "Mi primer app de express",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "roger",
  "license": "ISC"
}
Enter fullscreen mode Exit fullscreen mode

El -y sirve para decirle que quieres aceptar todo lo que se instalara.

Seguido de esto debemos instalar las dependencias que utilizara nuestra aplicaci贸n con el comando de:

npm install -S express
Enter fullscreen mode Exit fullscreen mode

Despu茅s de hacer la instalaci贸n se nos creara una carpeta llamada package-lock.json.

Creando tu primer app de express.

Para comenzar debes crear un archivo en el cual vas a ejecutar tu app, lo puedes nombrar como tu quieras (index.js, app.js, main.js, api.js, etc), y dentro deber谩s requerir a express de la siguiente forma:

const express = require('express')
Enter fullscreen mode Exit fullscreen mode

require nos sirve para importar un modulo, en este caso el de express. Lo siguiente que necesitamos para inicializar una aplicaci贸n en express es que ejecutemos la funci贸n de express.

const express = require('express')

const app = express()
Enter fullscreen mode Exit fullscreen mode

Despu茅s debemos indicar en que puerto queremos que se ejecute. Lo podemos hacer de 2 formas, declarando el puerto en una variable, o pasarle directamente el puerto, yo te recomiendo la primera pero ambas funcionan, y tambi茅n le debemos pasar una funci贸n que queremos que se ejecute cuando la app este corriendo con 茅xito.

const express = require('express')

const app = express()
const PORT = 3000

app.listen(PORT, () => {
    console.log('Server is running on port: ' + PORT)
})
Enter fullscreen mode Exit fullscreen mode

Ahora podremos correr nuestra aplicaci贸n en la terminal con el comando de:

node index.js (el nombre de tu archivo)
Enter fullscreen mode Exit fullscreen mode

Y veras el siguiente mensaje en tu terminal:

Server is running on port: 3000
Enter fullscreen mode Exit fullscreen mode

Ahora en tu navegador debes ir a la direcci贸n de tu localhost que en este caso debes ir a http://localhost:3000/ y veras un mensaje como de error, pero eso quiere decir que todo esta bien.

Creando tu primer ruta.

Vamos a hacer una app sencilla, en app.get() le debemos pasar un string este string es para indicarle a express cual es la ruta del navegador para que se ejecute la funci贸n en el segundo argumento. Esto lo haremos de la siguiente manera:

const express = require('express')
const app = express()
const PORT = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})
Enter fullscreen mode Exit fullscreen mode

Cada cambio que realices en la aplicaci贸n debes reiniciar tu servidor.

Si ahora entras en tu navegador a http://localhost:3000/ veras el mensaje de Hello World!. Y si te preguntas que significa req y req.

Abreviacion Significado
req Request
res Response

En request(req) es donde viene toda la petici贸n de un cliente. En response(res) es para enviarle cosas al usuario como por ejemplo, el mas com煤n de todos res.send(), con este podemos enviarle cosas al usuario. Debemos reiniciar nuestra APP, cada que hagamos un cambio, para que esto sea autom谩tico lo veremos mas adelante.

app.get('/', (req, res) => {
  res.status(200).send('Hola Mundo!')
})
Enter fullscreen mode Exit fullscreen mode

.status() nos permite indicarle al cliente si es que la respuesta tuvo 茅xito, y si viene un dato acompa帽ado de esta, en este caso, el dato es 'Hola Mundo!'.

Podemos llamar a .status() y a .send() en el mismo app.get().

Si quieres ver mas tutoriales como este puedes entrar a mi perfil y ah铆 encontraras una gran variedad de tips y tutoriales.馃憠Roger

Discussion (0)