TRXSALO

Crea tu primer servidor web con Express y Typescript

Thu, 28 Dec 2023 23:15:12 -0400

Servidor Nodejs con Express

Iniciando el proyecto express

Puedes utilizar tu editor de código favorito, en mi caso estaré utizando Visual Studio Code

Primero empezaremos creando la carpeta donde trabajaremos.

1
2


 mkdir express-server
 cd express-server

Una vez dentro de la carpeta, iniciamos el proytecto Nodejs, lo cual creará el archivo de configuración package.json

1

 npm init

Dependencias del proyecto

Dependecia de desarrollo.
Las dependencias de desarrollo, son las librerías que solo se utilizarán en el desarrollo de la aplicación, las cuales ya no se haran uso en producción.
1 2

npm i typescript -D npm i nodemon -D
- Typescript
  En este proyecto utilizaremos Ts para desarrollar el servidor express.
  
  TypeScript es un lenguaje de programación fuertemente tipado que se basa en JavaScript y le brinda mejores herramientas a cualquier escala.
  –Typescript
- Nodemon
  Nodemon nos falicitara al momento de desarrollar, ya que monitorea el proyecto por cualquier cambios, y reiniciará automáticamente el servidor.
Depencias del proyecto
La siguiente dependecias son lo que requerirá el proyecto para funcionar correctamente.
1 2 3

npm i morgan npm i express npm i dotenv
- Express
  Espress es una librería que nos permite construir un servidor para servir una página, aplicación web o api, lo cual también se ha convertido en el estándar para desarrollo de aplicaciones backend con nodejs.
  
  Express.js, a veces también llamado «Express», es un framework de backend Node.js minimalista, rápido y similar a Sinatra, que proporciona características y herramientas robustas para desarrollar aplicaciones de backend escalables.
  –Kinsta
- Morgan
  
  Nos mostrara las solicitudes y respuestas del servidor, las cuales podemos visualizar por consola.
  
  Morgan es un Middleware de nivel de solicitud HTTP. Es una gran herramienta que registra las requests junto con otra información dependiendo de su configuración y el ajuste preestablecido utilizado. Resulta muy útil durante la depuración y también si desea crear archivos de registro.
  –Rudeus G
- Dotenv
  
  Para uso de variable de entorno.
@Types

Nos perimite el uso de tipado en las dependecias que instalemos
1 2

npm i @type/express -D npm i @types/dotenv -D

Configurando Typescript

Para poder empezar utiliziar typescript en el proyecto, debemos hacer unas modifcaciones primero.

En la raiz del proyecto ejecutaremos el siguiente comando.
Crea el archivo de configuracion typescript para compilar.

1

 npx tsc --init

Una vez ejecutado el comando, abrimos el archivo tsconfig.json para hacer algunas modificaciones.

Dentro del archivo buscaremos lo siguiente para descomentarlo y agregar la siguiente configuración:
rootDirt : Indica donde estarán los archivos typescript
outDirt : Indica donde se guardaran los arhivos compilados

1
2


 "rootDir": "./src",
 "outDir": "./dist",

Lo siguiente es opcional
target : Indica a versión de javascript compilara los archivos typescript
Mi persona, trabajara con la version de 2019

1
2


 /* Language and Environment */
 "target": "es2019",

Agregaremos lo siguiente al final, entre el último y penúltimo corchete

1
2
3
4
5
6


 {
 "compilerOptions": {
 ....contenido
 },
 "exclude": ["node_modules"]
 }

Configuración de Nodemon

En el directorio raiz del proyecto, crearemos el siguiente archivo.
nodemon.json

Y agrearemos las siguientes lineas.

1
2
3
4
5
6
7
8


 {
 "watch": ["src"],
 "ext": "ts",
 "ignore": [
 "src/**/*.spec.ts"
 ],
 "exec": "ts-node "
 }

watch :
Indicamos que carpeta estará observando por cambios.
ext :
Cual serán las extención que estaremos observando por cambios.
ignore :
Ignorar los que tengan las siguiente extención.
exec :
El comando que ejecutará.

Configurando el Package.json

En la sección de script agregaremos los siguiente comando para ejecución.

1
2
3
4
5


 "scripts": {
 "build": "tsc ",
 "dev": "nodemon src/index.ts",
 "start": "npm run build && node dist/index.js"
 },

dev :
Este comando ejecutara el modo desarrollo, no compila a js , más puede ejecutar *.ts gracias a la configuracion que hicimos con nodemon.json
build :
Este comado compila los hay en la carpeta src
start :
Compila y ejecuta el proyecto compilado

Estructura de carpetas

La siguiente estrutura que se utilizará.
(es básica, en el siguiente post, utilzaremos este mismo proyecto para realizar una API y luego una aplicacion web con la estrucura MVC)

Listo, empezemos a codificar!

app.ts
Dentro del archivo app.ts creamos un clase, para instanciar un servidor express.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61


import express,{Application} from "express"; //Importamos express
import * as dotenv from "dotenv" // Importamos dotenv (si tenemos variables de entorno)
import morgan from "morgan"; //Importamos Morgan para logs por consola

dotenv.config(); // Cargamos las variables de entorno
/**
* Clase Server
*/
export class Server{

 private app:Application;
 /**
 *
 * @param port Especifica el puerto de escucha del servidor
 */
 constructor(private port?: number| string) {
 this.app = express(); //Iniciamos express
 this.configuracion(); //Configuracion
 this.listen(); //Escuchamos
 this.middlewares(); //Middlewares
 this.route(); // Espones las Rutas disponibles
 }

 /**
 * Configuracion del puerto de escucha
 */
 configuracion(){
 this.app.set("port", this.port || process.env.PORT || 8080);
 }

 /**
 * Escuchamos por el puerto que configuramos
 */
 async listen (){
 await this.app.listen(this.app.get("port"));
 console.log("Servidor escuchando en el puerto:", this.app.get("port"));
 }

 //Middlewares

 middlewares(){
 this.app.use(morgan("dev")); // Mesaje por consola de las peticiones con estilo dev , puede mirar la documentacion de morgan para ver mas detalles
 this.app.use(express.json()); // Permite leer el body de las peticiones
 // this.app.use(cors()); //Explicare en otro post por el momento
 // this.app.use(bodyParser.urlencoded({extended:true}));
 // this.app.use(cookieSession({
 // name:"trxsalo",
 // secret: process.env.SECRET,
 // httpOnly: true
 // }));

 }

 /**
 * Rutas expuestas
 */
 route(){
 this.app.use("/", express.static("public")); //Publico la carpeta public, servira un index.html
 }

}

2.index.ts
En el archivo index.ts dentro de la carpeta src agregáremos las siguiente lineas de código.

Este será que levante el servidor express.

1
2
3
4
5


 import {Server} from "./app"; //importamos la clase server
 async function main(){ //funcion principal
 const app:Server = new Server(); //instanciamos la clase server
 }
 main(); //ejecutamos la funcion

Public/
En la carpeta public , creamos un archivo index.html que serviremos por defecto en nuestro servidor.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Page</title>
</head>
<body>
 <h1>Hello World!!</h1>
</body>
</html>

Listo ya tenemos nuestro servidor Express escrito con typescript.
Ya podemos ejecutar el programa

1

 npm run dev

Podemos verifcarlo por consola.

1
2
3
4
5
6
7
8


> nodemon src/index.ts

[nodemon] 3.0.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src/**/*
[nodemon] watching extensions: ts
[nodemon] starting `ts-node src/index.ts`
Servidor escuchando en el puerto: 8080

Ahí nos ínidica en que puerto esta escuchando el servidor.
Vamos a nuestro navegador favorito, he ingresamos a la siguiente url

localhost:(puerto que configuramos)

Si vamos al link observaremos lo siguiente.

Listo ya temos nuestro servidor web sirviendo un documento html, ya tenéis su primera página web.

Link del repositorio

Github

Como subir tu proyecto Hugo a Netlify

Sat, 11 Nov 2023 00:00:00 +0000

Que es Hugo?

Hugo es un generador de sitios estáticos, muy veloz y sencillo de usar. Los sitios generados con Hugo se pueden alojar en distinto servicio de hosting, como: Neflify, Heroku, GoDaddy, GitHub Pages, Amazon S3,entre otros muchos más. Hugo es ideal para crear un blog, un sitio de cartera o de empresa y documentación.

Netlify

Es un servicio de host en la nube, permite subir proyecto de una manera tan simple y rápida. En tan solo unos poco click, ya tendremos listo nuestro proyecto en la internet.

Configurando nuestro proyecto Hugo

Una vez que tengamos listo nuestro proyecto para publicar, hay que hacer algunos cambios de los siguientes archivos, depende de tu proyecto Hugo o plantilla que escogiste.
config.toml o theme.toml

config.toml

1
2


 # Change baseurl before deploy
baseurl = "https://my-site-name.netlify.app"

theme.toml

1
2


 # Change baseurl before deploy
homepage = "https://my-site-name.netlify.app"

Lloguearse en Netlify

En mi caso estaré logueandome con mi cuenta de GitHub

Subir proyecto

Una vez logueado, buscado la opción de new site, hacemos click sobre el botón, y seleccionamos, importar un proyecto existente, el proyecto Hugo que deseamos subir, debe estar ya en dicho repositorio que usan.

Mi persona seleccionara Deploy with GitHub

Luego debemos buscar el proyecto que deseamos hacer el deploy.

Build settings

Una ves selecionado el proyecto, se debe configurar para que se pueda realizar correctamente el build del proyecto.

Base directory
Diremos que será la raíz del proyecto "/"
Build command
El comando que debe ejecutarse

1

 hugo --gc --minify

Publish directory
Aquí escribiremos la ruta del directorio donde están los posts del blog.
En Hugo por lo general están en la carpeta /content o dejar vacío por defecto.

Listo ya esta para realizar el deploy

Listo el proyecto Hugo ya esta.

Cambiar nombre

Netlify le asigna un nombre aleatorio al sitio que desplegamos, no dirigiremos a configuración del sitio y seleccionamos Cambiar nombre del sitio, ahí cambiamos al nombre que especificamos en la configuración de Hugo.

Listo ya está nuestro sitio con Hugo desplegado.

Redes Sociales

Mon, 01 Jan 0001 00:00:00 +0000

Hola, me pueden decir SALOME, soy boliviano actualmento trabajo como desarrollador en una empresa aquí en bolvia. Mi pasatiempo es leer, ilustrar (si soy un artista :3 , siguemé!!). En este blog principalmente estare compartiendo contenido de mi experiencias y algunos tutoriales en la área de tecnología y desarrollo de software ;v

Search