Scribd
Cargar
86 vistas3 páginas

Nodejs - Express - Bootstrap: Recursos

El documento proporciona instrucciones para crear una aplicación web básica con NodeJS, Express y Bootstrap. Explica cómo configurar un proyecto básico de Express, habilitar el reinicio automático del servidor con Nodemon, e implementar plantillas de Bootstrap como el Starter Template y un ejemplo de Dashboard para mejorar la interfaz de usuario.

Cargado por

otakun
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
86 vistas3 páginas

Nodejs - Express - Bootstrap: Recursos

El documento proporciona instrucciones para crear una aplicación web básica con NodeJS, Express y Bootstrap. Explica cómo configurar un proyecto básico de Express, habilitar el reinicio automático del servidor con Nodemon, e implementar plantillas de Bootstrap como el Starter Template y un ejemplo de Dashboard para mejorar la interfaz de usuario.

Cargado por

otakun
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

31/1/22 11:46 NodeJS - Express - Bootstrap: DESARROLLO DE APLICACIONES WEB Y MÓVILES

NodeJS - Express - Bootstrap

Recursos

Crea un proyecto básico, siguiendo las instrucciones de NodeJS - Express


(https://aulavirtual.espol.edu.ec/courses/3423/pages/nodejs-express) .

Otra alternativa es que utilices el proyecto plantilla. Desde la línea de comandos:

Clona el proyecto, con: git clone https://github.com/DAWFIEC/sitioExpress.git


Accede a la carpeta del proyecto: cd sitioExpress
Cámbiate a la rama: git checkout express-basic
Instala los módulos: npm install
Verifica que funcione correctamente al levantar los servicios: SET DEBUG=misitio:* &
npm start
 

Habilitar el reinicio del servidor

Desde la línea de comandos del proyecto:

Agregue nodemon como módulo del proyecto, con: npm install --save-dev nodemon
Con esta instrucción se agregará la clave devDependencies en el package.json

"devDependencies": {

"nodemon": "X.Y.Z"

Agregue la clave devstart dentro de la clave scripts:

"scripts": {

  "start": "node ./bin/www",

https://aulavirtual.espol.edu.ec/courses/3423/pages/nodejs-express-bootstrap?module_item_id=135965 1/3
31/1/22 11:46 NodeJS - Express - Bootstrap: DESARROLLO DE APLICACIONES WEB Y MÓVILES

"devstart": "nodemon ./bin/www"

En adelante, ya no será necesario reiniciar el servidor para ver los cambios en el


navegador, con: npm run devstart
 

Bootstrap - Starter template

Utiliza el Starter template (https://getbootstrap.com/docs/5.0/getting-


started/introduction/#starter-template) en lugar del contenido en views/index.ejs
Revise los cambios.
 

Bootstrap - Dashboard example

Utiliza la plantilla Dashboard.rar


(https://aulavirtual.espol.edu.ec/courses/3423/files/1410068/download?wrap=1)
(https://aulavirtual.espol.edu.ec/courses/3423/files/1410068/download?wrap=1) que se
encuentra en los ejemplos de Bootstrap
(https://getbootstrap.com/docs/5.0/examples/) .
Copie del dashboard/index.html las etiquetas <header> y <div.container-fluid>  al
views/index.ejs dentro de la etiqueta <body>.
Copie el archivo dashboard.css en la carpeta public/stylesheets
En el views/index.ejs agregue la referencia a dashboard.css después del
bootstrap.min.css

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boot
strap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QD
gpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

...

<link rel='stylesheet' href='/stylesheets/dashboard.css' />

Copie el archivo dashboard.js en la carpeta public/javascript


En el views/index.ejs agregue la referencia a feather.min.js, Chart.min.js y
dashboard.js después del bootstrap.bundle.min.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boot
strap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXs

https://aulavirtual.espol.edu.ec/courses/3423/pages/nodejs-express-bootstrap?module_item_id=135965 2/3
31/1/22 11:46 NodeJS - Express - Bootstrap: DESARROLLO DE APLICACIONES WEB Y MÓVILES

P1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

...

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fe
ather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/g
xOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.mi
n.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0F
XfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>

<script src="/javascripts/dashboard.js"></script>

Revise los cambios en el navegador.


 

Fuentes

Express Tutorial Part 2: Creating a skeleton website - Learn web development | MDN. (2021).
Retrieved 28 July 2021, from https://developer.mozilla.org/en-US/docs/Learn/Server-
side/Express_Nodejs/skeleton_website#enable_server_restart_on_file_changes
(https://developer.mozilla.org/en-US/docs/Learn/Server-
side/Express_Nodejs/skeleton_website#enable_server_restart_on_file_changes)

Mark Otto, a. (2021). Bootstrap. Retrieved 28 July 2021, from https://getbootstrap.com/


(https://getbootstrap.com/)

https://aulavirtual.espol.edu.ec/courses/3423/pages/nodejs-express-bootstrap?module_item_id=135965 3/3

También podría gustarte