{"id":22433395,"url":"https://github.com/andresweitzel/app_microfront_invdes_mean","last_synced_at":"2026-04-04T08:39:55.978Z","repository":{"id":61930483,"uuid":"556019673","full_name":"andresWeitzel/App_MicroFront_InvDes_MEAN","owner":"andresWeitzel","description":"App Web MicroFrontEnd de Proyectos I+D Nacionales implementando NodeJs, Babel, Nodemon, Express, Handlebars , Mongoose, Bootstrap, Highchart, Git, MongoDB y Otras Tecnologías.","archived":false,"fork":false,"pushed_at":"2023-08-31T02:22:05.000Z","size":278,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-01T12:46:23.765Z","etag":null,"topics":["babel","bootstrap","express","git","handlebars","highcharts","mongodb","mongodb-compass","mongoose","nodejs","nodemon","scss"],"latest_commit_sha":null,"homepage":"","language":"Handlebars","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andresWeitzel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-22T22:01:39.000Z","updated_at":"2023-06-28T17:15:19.000Z","dependencies_parsed_at":"2025-02-01T12:45:46.916Z","dependency_job_id":"2b5de260-54b4-42b9-a4d6-43e5058bd352","html_url":"https://github.com/andresWeitzel/App_MicroFront_InvDes_MEAN","commit_stats":null,"previous_names":["andresweitzel/app_microfront_invdes_mean"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andresWeitzel%2FApp_MicroFront_InvDes_MEAN","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andresWeitzel%2FApp_MicroFront_InvDes_MEAN/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andresWeitzel%2FApp_MicroFront_InvDes_MEAN/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andresWeitzel%2FApp_MicroFront_InvDes_MEAN/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andresWeitzel","download_url":"https://codeload.github.com/andresWeitzel/App_MicroFront_InvDes_MEAN/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245806386,"owners_count":20675296,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","bootstrap","express","git","handlebars","highcharts","mongodb","mongodb-compass","mongoose","nodejs","nodemon","scss"],"created_at":"2024-12-05T22:14:46.114Z","updated_at":"2025-12-30T19:55:15.423Z","avatar_url":"https://github.com/andresWeitzel.png","language":"Handlebars","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AppWeb_MicroFront_InvDes_NodeJs (En Desarrollo).\nApp Web Micro FrontEnd de Proyectos I+D Nacionales implementando NodeJs, Express, Nodemon, Handlebars, Bootstrap, Highchart, Git, MongoDB y Otras Tecnologías.\n\n* [Repositorio db_investigacion_desarrollo_mongodb](https://github.com/andresWeitzel/db_investigacion_desarrollo_mongodb)\n* [Dataset público implementado](https://datos.gob.ar/fa_IR/dataset/mincyt-proyectos-ciencia-tecnologia-e-innovacion)\n\n\n\u003chr\u003e\n\n## Documentación Inicial para la Configuración y Creación de Aplicaciones Web con el Stack MEAN\n### Creación Api Rest con NodeJs \n\n#### 1.0) Creación Archivo Configuración package.json \n   * `npm init -y`\n\n \u003c/br\u003e \n \n#### 2.0) Dependencias Iniciales : \n   * `npm i express` (Framework para el manejo de http, cli, etc)\n   * `npm i express-handlebars` (Motor de Plantillas Backend)\n   * `npm i mongoose` (Conexión y Modelamiento de datos)\n\n\u003c/br\u003e  \n\n#### 3.0) Creación del Código Fuente del Proyecto\n   * Creamos carpeta `src`\n   * Dentro de `src`, creamos archivo `app.js` (en este archivo estarán las configs de la aplicación)\n   * Dentro de `app.js` vamos a importar toda la config y librerías\n   * Utilizaremos Babel para la compilación de la config.\n\n\u003c/br\u003e \n\n#### 4.0) Instalación de Babel\n   * `npm i -D @babel/core` (Instalación dep. de desarrollo para el compilador de babel)\n   * `npm i -D @babel/cli` (Instalación dep. de desarrollo para cli de babel)\n   * `npm i -D @babel/node` (Instalación dep. de desarrollo para el uso de babel junto con node)\n   * `npm i -D @babel/preset-env` (Instalación dep. de desarrollo para el autoajuste sintáctico entre babel y js).\n   * `npm i -D nodemon` (Instalación dep. de desarrollo para reinicio del módulo principal).\n\n  \u003c/br\u003e\n \n#### 5.0) Configuración de Babel\n   * `Fuera de `src` creamos el archivo `.babelrc` (archivo para config de babel)\n   * Dentro de `.babelrc` añadimos la config del módulo principal de babel\n     ```js\n         {\n           \"presets\":[\n               \"@babel/preset-env\"\n           ]\n          }\n     ```\n   \n\u003c/br\u003e  \n    \n#### 6.0) Configuración de Routing\n   * El enrutamiento se refiere a cómo los extremos (URI) de una aplicación responden a las solicitudes del cliente.\n   * Dentro de `src` creamos la carpeta `routes`.\n   * Dentro de `routes` creamos el archivo `index.routes.js`\n   * Importamos Router para crear un enrutador y configuramos los endpoints\n\n     ```js\n                import {Router} from 'express';\n\n                const router = Router();\n\n                router.get('/', (req, res) =\u003e{\n                    res.send('Hello World!!!');\n                });\n\n\n                export default router;\n      ```\n\n\n    \n\u003c/br\u003e\n\n\n#### 7.0) Importación de Express\n   * Con express podemos ejecutar un servidor local. \n   * Una vez configurado babel podemos importar el módulo de express dentro de `app.js`\n\n     ```js\n         import express from \"express\";\n     ```\n\n\u003c/br\u003e\n     \n #### 8.0) Configuración y Ejecución de Express\n   * Con express podemos ejecutar un servidor local.\n   * Las configuraciones del mismo las realizamos en el archivo `app.js` a través del objecto app invocando la función `express()`\n   * Seguidamente utilizamos el routing establecido\n\n      ```js\n          import express from \"express\";\n          import routes from './routes/index.routes'\n\n\n          const app = express()\n\n          app.use(routes);\n\n          export default app;\n\n      ```\n   * Ahora creamos el archivo `index.js` que contendrá la config final de la aplicación.. \n     ```js\n          import app from \"./app\"\n\n          app.listen(3100)\n          console.log('Servidor en Ejecución en el Puerto ', 3100)\n\n     ```   \n   * Seguidamente vamos a configurar la ejecución automática de la aplicación.. Dentro del `package.json` bloque `scripts`, colocamos lo siguiente..\n\n      ```js\n            \"scripts\": {\n                  \"start\" : \"nodemon src/index.js --exec babel-node\",\n                  \"dev\": \"nodemon src/index.js --exec babel-node\"\n               },\n      ```\n   * Ejecutamos el archivo `index.js` con node. Escribimos `npm start`\n   * Salida Esperada:\n\n     ```cmd\n               \u003e apirest_invdes_nodejs@1.0.0 start\n               \u003e nodemon src/index.js --exec babel-node\n\n               [nodemon] 2.0.20\n               [nodemon] to restart at any time, enter `rs`\n               [nodemon] watching path(s): *.*\n               [nodemon] watching extensions: js,mjs,json\n               [nodemon] starting `babel-node src/index.js`\n               Servidor en Ejecución en el Puerto  3100\n     ``` \n   * Accedemos al endpoint configurado `localhost:3100` y vemos el msj generado `Hello Wordl!!`\n   * Posteriormente el msg podrá ser reemplazado por cualquier archivo html  \n\n\u003c/br\u003e\n     \n#### 9.0) Motor de Plantillas Handlebars\n   * Para servir archivos html con node tendremos que configurar dicho motor\n   * Primeramente crearemos la carpeta `views` dentro de src\n   * Dentro de `views` crearemos otra carpeta llamada `layouts` y dentro de esta un primer archivo html con extensión handlebars `main.hbs`\n   * Trabajando con layoutsDir y dicho archivo todo el render del resto de los archivos html se realiza a través del main... podemos realizar componentes de html y llevarlos al main.hbs para no tener redundancia de código.Esto lo hacemos con la interpolación `{{{body}}}`\n   * Podemos modularizar el código de `main.hbs` trabajando con `partials`. Esto nos permite llevar el código de navbar, footer, etc a archivos separados.\n   * Dentro de `views` creamos una carpeta llamada `partials` y allí tantas carpetas como componentes deseamos (carpeta navbar, carpeta footer, etc).\n   * Dentro del `main.hbs` añadimos las rutas para dichos componentes `{{\u003enavbar/navbar}}` . Por cada componente mismo caso.\n   \n     ```html\n             \u003c!DOCTYPE html\u003e\n            \u003chtml lang=\"en\"\u003e\n            \u003chead\u003e\n                \u003cmeta charset=\"UTF-8\"\u003e\n                \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n                \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n                \u003ctitle\u003eMicroFront I+D\u003c/title\u003e\n            \u003c/head\u003e\n            \u003cbody\u003e\n            {{\u003enavbar/navbar}}   \n            {{{body}}}\n            \u003c/body\u003e\n            \u003c/html\u003e\n     ```\n   * Crearemos otros dos archivos html `fuera` de la carpeta `layout`. Estos serán los componentes que se invocaran a través del routing y se renderizarán a través del `main.hbs`.\n   * Creamos about.hbs e index.hbs.\n   * Para el index.hbs tenemos..\n   \n       ```html\n             \u003c!DOCTYPE html\u003e\n              \u003chtml lang=\"en\"\u003e\n              \u003chead\u003e\n                  \u003cmeta charset=\"UTF-8\"\u003e\n                  \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n                  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n                  \u003ctitle\u003eMicroFront I+D\u003c/title\u003e\n              \u003c/head\u003e\n              \u003cbody\u003e\n                  \u003ch1\u003eINDEX\u003c/h1\u003e\n              \u003c/body\u003e\n              \u003c/html\u003e\n     ```\n     \n   * Para el about.hbs tenemos..\n       \n       ```html\n            \u003c!DOCTYPE html\u003e\n            \u003chtml lang=\"en\"\u003e\n            \u003chead\u003e\n                \u003cmeta charset=\"UTF-8\"\u003e\n                \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n                \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n                \u003ctitle\u003eMicroFront I+D\u003c/title\u003e\n            \u003c/head\u003e\n            \u003cbody\u003e\n\n                \u003ch1\u003eABOUT\u003c/h1\u003e\n\n            \u003c/body\u003e\n            \u003c/html\u003e\n     ```\n     \n   * Seguidamente configuramos el routing desde `index.routes.js`\n   * Una vaz configurados los pasos anteriores no es necesario la config del `main.hbs` en el archivo routing ya que todos los snippets de codigo se van a renderizar una vez levantada la app .\n   * Modificamos el archivo\n     \n     ```js\n          import {Router} from 'express';\n\n\n          const router = Router();\n\n          router.get('/', (req, res) =\u003e{\n              res.render('index');\n          });\n\n          router.get('/about', (req, res) =\u003e{\n              res.render('about');\n          });\n\n\n          export default router;\n\n     ```  \n     \n     \n   * Seguidamente vamos a configurar dicho motor de plantillas en `app.js`\n   * Realizamos las configuraciones de rutas y vistas con el módulo path\n   * Realizamos las importaciones y declaraciones del motor con .engine\n     \n     ```js\n            import express from \"express\";\n            import routes from './routes/index.routes';\n            import path from 'path';\n            import { create } from 'express-handlebars';\n\n\n            const app = express()\n\n            //Views\n            app.set(\"views\" , path.join(__dirname , \"/views\"));\n\n            //Handlebars Config\n            var hbs = create({\n                layoutsDir: path.join(app.get(\"views\"), \"layouts\"),\n                defaultLayout: \"main\",\n                extname: \".hbs\",\n            })\n            //Handlebars invoke\n            app.engine(\".hbs\", hbs.engine);\n\n            //Handlebar set\n            app.set(\"view engine\",\".hbs\");\n\n            //Routes\n            app.use(routes);\n\n            export default app;\n\n     ```\n\n     \n  * Levantamos el server y visualizamos.. \n  * INDEX para http://localhost:3100/\n  * ABOUT para http://localhost:3100/about\n\n\u003c/br\u003e\n     \n#### 10.0) Configuración db con mongoose\n  * Dentro de `src` creamos el archivo de config llamado `database.js`\n  * Creamos un obj conexión indicando el nombre de la db \n     ```js\n      import {connect} from 'mongoose';\n\n        (async ()=\u003e{\n        try {\n\n            const db = await connect(\"mongodb://localhost/db_dataset_investigacion_desarrollo\")\n\n            console.log('== SE HA ESTABLECIDO LA CONEXIÓN DE LA DB ',db.connection.name,' CORRECTAMENTE ==')\n\n\n        } catch (error) {\n            console.log(error)\n        }\n\n        })()\n\n     ```\n    \n  * Seguidamente importamos dicha config en el `index.js`\n    \n     ```js\n        import app from \"./app\"\n        import './database'\n\n\n        app.listen(3100)\n        console.log('Servidor en Ejecución en el Puerto ', 3100)\n     ```\n  * Deberíamos tener una respuesta similar a ...\n    \n     ```cmd\n      [nodemon] restarting due to changes...\n      [nodemon] restarting due to changes...\n      [nodemon] starting `babel-node src/index.js`\n      Servidor en Ejecución en el Puerto  3100\n      == SE HA ESTABLECIDO LA CONEXIÓN DE LA DB  db_dataset_investigacion_desarrollo  CORRECTAMENTE ==\n     ```\n     \n\u003c/br\u003e\n\n## `DOCUMENTACIÓN EN PROCESO DE DESARROLLO`\n\n\n\n\u003chr\u003e\n \n\n#### Configuración de gitignore\n   * Vamos a excluir la carpeta `node_modules` para no añadir las librerías a nuestro repositorio.\n   * Creamos el archivo `.gitignore` fuera de `src`\n   * Dentro del mismo añadirmos `node_modules/`\n   * Seguidamente en la consola colocamos los siguentes comandos (respetar punto final)\n       * `git rm -r --cached .`\n       * `git add .`\n       * `git commit -m \"remove gitignore files\"`\n       * `git push`\n \n   \u003c/br\u003e\n \n#### Extensiones Visual Studio Code\n  * Prettier - Code formatter\n  * Material Icon\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandresweitzel%2Fapp_microfront_invdes_mean","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandresweitzel%2Fapp_microfront_invdes_mean","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandresweitzel%2Fapp_microfront_invdes_mean/lists"}