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
([Link] .
Otra alternativa es que utilices el proyecto plantilla. Desde la línea de comandos:
Clona el proyecto, con: git clone [Link]
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 [Link]
"devDependencies": {
"nodemon": "X.Y.Z"
Agregue la clave devstart dentro de la clave scripts:
"scripts": {
"start": "node ./bin/www",
[Link] 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 ([Link]
started/introduction/#starter-template) en lugar del contenido en views/[Link]
Revise los cambios.
Bootstrap - Dashboard example
Utiliza la plantilla [Link]
([Link]
([Link] que se
encuentra en los ejemplos de Bootstrap
([Link] .
Copie del dashboard/[Link] las etiquetas <header> y <[Link]-fluid> al
views/[Link] dentro de la etiqueta <body>.
Copie el archivo [Link] en la carpeta public/stylesheets
En el views/[Link] agregue la referencia a [Link] después del
[Link]
<link href="[Link]
[Link]" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QD
gpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
...
<link rel='stylesheet' href='/stylesheets/[Link]' />
Copie el archivo [Link] en la carpeta public/javascript
En el views/[Link] agregue la referencia a [Link], [Link] y
[Link] después del [Link]
<script src="[Link]
[Link]" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXs
[Link] 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="[Link]
[Link]" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/g
xOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
<script src="[Link]
[Link]" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0F
XfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
<script src="/javascripts/[Link]"></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 [Link]
side/Express_Nodejs/skeleton_website#enable_server_restart_on_file_changes
([Link]
side/Express_Nodejs/skeleton_website#enable_server_restart_on_file_changes)
Mark Otto, a. (2021). Bootstrap. Retrieved 28 July 2021, from [Link]
([Link]
[Link] 3/3
