[{"content":" 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.\n1 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\n1 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.\n1 2 npm i typescript -D npm i nodemon -D Typescript En este proyecto utilizaremos Ts para desarrollar el servidor express.\nTypeScript es un lenguaje de programación fuertemente tipado que se basa en JavaScript y le brinda mejores herramientas a cualquier escala.\n\u0026ndash;Typescript Nodemon Nodemon nos falicitara al momento de desarrollar, ya que monitorea el proyecto por cualquier cambios, y reiniciará automáticamente el servidor.\nDepencias del proyecto La siguiente dependecias son lo que requerirá el proyecto para funcionar correctamente.\n1 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.\nExpress.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.\n\u0026ndash;Kinsta\nMorgan\nNos mostrara las solicitudes y respuestas del servidor, las cuales podemos visualizar por consola.\nMorgan 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.\n\u0026ndash;Rudeus G Dotenv\nPara uso de variable de entorno.\n@Types\nNos perimite el uso de tipado en las dependecias que instalemos\n1 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.\nEn la raiz del proyecto ejecutaremos el siguiente comando.\nCrea el archivo de configuracion typescript para compilar.\n1 npx tsc --init Una vez ejecutado el comando, abrimos el archivo tsconfig.json para hacer algunas modificaciones.\nDentro del archivo buscaremos lo siguiente para descomentarlo y agregar la siguiente configuración:\nrootDirt : Indica donde estarán los archivos typescript\noutDirt : Indica donde se guardaran los arhivos compilados\n1 2 \u0026#34;rootDir\u0026#34;: \u0026#34;./src\u0026#34;, \u0026#34;outDir\u0026#34;: \u0026#34;./dist\u0026#34;, Lo siguiente es opcional\ntarget : Indica a versión de javascript compilara los archivos typescript\nMi persona, trabajara con la version de 2019\n1 2 /* Language and Environment */ \u0026#34;target\u0026#34;: \u0026#34;es2019\u0026#34;, Agregaremos lo siguiente al final, entre el último y penúltimo corchete\n1 2 3 4 5 6 { \u0026#34;compilerOptions\u0026#34;: { ....contenido }, \u0026#34;exclude\u0026#34;: [\u0026#34;node_modules\u0026#34;] } Configuración de Nodemon En el directorio raiz del proyecto, crearemos el siguiente archivo.\nnodemon.json\nY agrearemos las siguientes lineas.\n1 2 3 4 5 6 7 8 { \u0026#34;watch\u0026#34;: [\u0026#34;src\u0026#34;], \u0026#34;ext\u0026#34;: \u0026#34;ts\u0026#34;, \u0026#34;ignore\u0026#34;: [ \u0026#34;src/**/*.spec.ts\u0026#34; ], \u0026#34;exec\u0026#34;: \u0026#34;ts-node \u0026#34; } watch : Indicamos que carpeta estará observando por cambios.\next : Cual serán las extención que estaremos observando por cambios.\nignore :\nIgnorar los que tengan las siguiente extención. exec :\nEl comando que ejecutará.\nConfigurando el Package.json En la sección de script agregaremos los siguiente comando para ejecución.\n1 2 3 4 5 \u0026#34;scripts\u0026#34;: { \u0026#34;build\u0026#34;: \u0026#34;tsc \u0026#34;, \u0026#34;dev\u0026#34;: \u0026#34;nodemon src/index.ts\u0026#34;, \u0026#34;start\u0026#34;: \u0026#34;npm run build \u0026amp;\u0026amp; node dist/index.js\u0026#34; }, 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á.\n(es básica, en el siguiente post, utilzaremos este mismo proyecto para realizar una API y luego una aplicacion web con la estrucura MVC)\nListo, empezemos a codificar! app.ts Dentro del archivo app.ts creamos un clase, para instanciar un servidor express.\n1 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 \u0026#34;express\u0026#34;; //Importamos express import * as dotenv from \u0026#34;dotenv\u0026#34; // Importamos dotenv (si tenemos variables de entorno) import morgan from \u0026#34;morgan\u0026#34;; //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(\u0026#34;port\u0026#34;, this.port || process.env.PORT || 8080); } /** * Escuchamos por el puerto que configuramos */ async listen (){ await this.app.listen(this.app.get(\u0026#34;port\u0026#34;)); console.log(\u0026#34;Servidor escuchando en el puerto:\u0026#34;, this.app.get(\u0026#34;port\u0026#34;)); } //Middlewares middlewares(){ this.app.use(morgan(\u0026#34;dev\u0026#34;)); // 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:\u0026#34;trxsalo\u0026#34;, // secret: process.env.SECRET, // httpOnly: true // })); } /** * Rutas expuestas */ route(){ this.app.use(\u0026#34;/\u0026#34;, express.static(\u0026#34;public\u0026#34;)); //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.\nEste será que levante el servidor express.\n1 2 3 4 5 import {Server} from \u0026#34;./app\u0026#34;; //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.\n1 2 3 4 5 6 7 8 9 10 11 \u0026lt;!DOCTYPE html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;UTF-8\u0026#34;\u0026gt; \u0026lt;meta name=\u0026#34;viewport\u0026#34; content=\u0026#34;width=device-width, initial-scale=1.0\u0026#34;\u0026gt; \u0026lt;title\u0026gt;Page\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;h1\u0026gt;Hello World!!\u0026lt;/h1\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Listo ya tenemos nuestro servidor Express escrito con typescript.\nYa podemos ejecutar el programa\n1 npm run dev Podemos verifcarlo por consola.\n1 2 3 4 5 6 7 8 \u0026gt; 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.\nVamos a nuestro navegador favorito, he ingresamos a la siguiente url\nlocalhost:(puerto que configuramos)\nSi vamos al link observaremos lo siguiente.\nListo ya temos nuestro servidor web sirviendo un documento html, ya tenéis su primera página web.\nLink del repositorio\nGithub\n","date":"2023-12-28T23:15:12-04:00","image":"https://blog.trxsalo.xyz/p/express-ts/img/express_huc1f39faf62fe7dce5cb7cedfb51cf89c_69682_120x120_fill_box_smart1_3.png","permalink":"https://blog.trxsalo.xyz/p/express-ts/","title":"Crea tu primer servidor web con Express y Typescript"},{"content":"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.\nNetlify 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.\nConfigurando 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.\nconfig.toml o theme.toml\nconfig.toml 1 2 # Change baseurl before deploy baseurl = \u0026#34;https://my-site-name.netlify.app\u0026#34; theme.toml 1 2 # Change baseurl before deploy homepage = \u0026#34;https://my-site-name.netlify.app\u0026#34; Lloguearse en Netlify En mi caso estaré logueandome con mi cuenta de GitHub\nSubir 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.\nMi persona seleccionara Deploy with GitHub\nLuego debemos buscar el proyecto que deseamos hacer el deploy.\nBuild settings Una ves selecionado el proyecto, se debe configurar para que se pueda realizar correctamente el build del proyecto.\nBase directory\nDiremos que será la raíz del proyecto \u0026quot;/\u0026quot;\nBuild command\nEl comando que debe ejecutarse\n1 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.\n","date":"2023-11-11T00:00:00Z","image":"https://blog.trxsalo.xyz/p/hugo-public/img/hugo1_hu2e733ed0b312adc42a0548cedcd0212e_10205_120x120_fill_box_smart1_3.png","permalink":"https://blog.trxsalo.xyz/p/hugo-public/","title":"Como subir tu proyecto Hugo a Netlify"}]