Crea tu primera Página Web con NodeJS desde cero

Iniciopagina webPágina Web con NodeJs
Crea tu primera Página Web con NodeJS desde cero

by Juan Carlos García

12-Ag-2023

(4)

Suscribirme al canal:

Viajeros hoy les voy a dejar un vídeo corto pero sumamente interesante ya que aprenderán a desarrollar una página web en NodeJs de una manera muy sencilla y, para esto vamos a migrar una página web estática a NodeJS, la pagina a migrar es el ejemplo que hicimos en la primera clase de este curso, te dejo el link para que la visites si aun no has visto la clase.

Vídeo Mi Primera Página con NodeJS

Para no hacerte el cuento largo aquí te dejo el vídeo y los que aprenderás, pero debes estar dispuesto de verlo hasta el final:

¿Cómo instalar NodeJS en Windows?

Desarrollarás una aplicación NodeJS en Visual Studio Code.

Manejo del gestor de paquetes NPM.

Configuración de Webpack para definir las reglas de compilación de la página web.

Aprenderás como crear un servidor http a través de express y establecerás una carpeta publica para los archivos externos e imágenes.

Uso básico de NODEMON para aplicar tus cambios sin la necesidad de que detengas el servidor http manualmente.

Podrás crear tus archivos de distribución para poder desplegarlos en un servidor Apache como XAMPP desde tu computadora.

¡No te puedes perder las nuevas clases 🧐!

Instalar XAMPP

Instalar XAMPP

¿Cómo Instalar XAMPP en Windows? Levantando un servidor Apache.

Página web con Bootstrap

Página web con Bootstrap

Página web con Bootstrap: ¿Cómo hacer y maquetar una página web con Bootstrap gratis?

Página Web con NodeJs

Página Web con NodeJs

Crea tu primera Página Web con NodeJS desde cero

Nodemailer

Nodemailer

¿Cómo enviar correos con nodemailer en Node.js?

NodeJs con MySQL

NodeJs con MySQL

Conexión de MySQL con Node.js: página web con base de datos

HTMLWebpackPlugin

HTMLWebpackPlugin

Múltiples HTML y Rutas con HTML Web Pack Plugin

(undefined)

🧐 Autoevaluación: Página Web con NodeJs

¿Qué es NPM?

¿Qué es NodeJS?

¿Qué es Webpack?

Compra tus libros de Node.js

Si te gusto esta clase, es momento de avanzar y adquirir alguno de estos libros que estoy seguro te serán de gran ayuda.

Crea tu Primera Página Web Con Node JS Desde Cero

Contenido recomendado para crear tu primera pagina en NodeJS

Estas son algunas herramientas que te ayudarán para esta clase:

Conceptos básicos para comprender mejor como crear una página con NodeJS

Para complementar esta clase, creo necesario explicarte ciertos conceptos que afianzarán lo aprendido en el vídeo, pero si tu eres un nivel avanzado o intermedio y la curiosidad te invade, ignórame y ve al vídeo inmediatamente, no obstante aquí te dejo estos conceptos básicos del entorno de NodeJS.

¿Qué es NodeJS?

NodeJS es un entorno que permite ejecutar JavaScript orientado a eventos asíncronos

NodeJS te permite crear poderosas aplicaciones escalables como cualquier otro lenguaje de programación, sin embargo, tiene la ventaja de utilizar el mismo lenguaje de programación tanto del lado del cliente y como del lado del servidor, lo que en muchos casos es muy bueno sobre todo para los que van comenzando en la programación.

Y dentro de este entorno existe un gestor de paquetes muy potente el cual lo podemos definir de la siguiente manera.

¿Qué es NPM?

Es un gestor de paquetes integrado en NodeJS que te permite instalar en tus proyectos una infinidad de bibliotecas que te ahorraran mucho tiempo de desarrollo.

Muchos desarrolladores han creado ciertas bibliotecas que realizan una tarea en especifico, estos pequeño complemento según su licencia, los podemos utilizar y agregarlos a nuestro proyecto ahorrándonos tiempo en desarrollar algunas funcionalidades que requiera nuestro proyecto.

La instalación de NodeJS y NPM, te la explico a detalle al principio del vídeo de esta clase. Ahora pasemos a revisar uno de los complementos medulares de esta clase Webpack.

Migrando página web a NodeJS

Después de revisar estos dos grandes conceptos comenzaremos con la migración de nuestra página estática a Node, en resumen necesitamos hacer lo siguiente:

  1. Todo el Front end lo podemos desarrollar tal cual lo haríamos sin utilizar NodeJS.
  2. Ahora necesitamos una forma de conectar el Fron end con el Back end, que en este caso el Back end es Node.
  3. Para realizar esta conexión utilizaremos express, con el cual levantaremos un servidor web que servirá todo el contenido HTML y atenderá las solicitudes que requiera la página web.
  4. No obstante, le debemos indicar a Express, las reglas y como es que el contenido debe enviarse al cliente, para ello utilizaremos Webpack con el cual indicaremos como debe ser interpretado nuestro código.

Entonces, cuando un usuario ingrese a nuestra página web, el navegador solicita a Express el contenido de la página, Express a través de Webpack interpreta nuestro contenido y lo prepara para enviárselo al navegador.

📌 NOTA: En este post me centrare un poco más en la parte del Back end, ya que la parte del Front end lo vimos en el vídeo pasado, el cual te recomiendo que veas.

Bien, ahora revisemos ¿Qué es Webpack y Express? Y ¿Cómo los podemos utilizar para crear una página web?

¿Qué es Webpack?

El webpack es un empaquetador que nos permite gestionar dependencias, ejecutar tareas de compilación e incluso podemos utilizarlo como servidor http entre muchas otras cosas.

Por ejemplo veamos el que creamos en este vídeo.

Configuración de Webpack básica

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/cliente/js/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins:[
        new htmlWebpackPlugin({
            template:'./src/cliente/index.html'
        })
    ]
};

Bien analicemos este archivo webpack

  • mode, aquí seleccionamos el modo en el que hará la interpretación del código:
    • Si es desarrollo (development) el código final no estará minificado para que podamos detectar errores fácilmente.
    • Si es producción (production) el código esta minificado y algunas variables cambian de nombre, etc., lo que reduce su tamaño y no es legible fácilmente por personas.
  • entry, se indica el archivo principal a ejecutar, en este caso es index.js
  • output, archivo de salida
  • module -> rules, estables las reglas que debe seguir el webpack, por ejemplo, en este caso indicamos que lea todos los archivos .css a través de la expresión regular /.css$/ y para hacer esta interpretación utilizaremos style-loader y css-loader.
  • plugins, es un arreglo donde podemos agregar algunas otras herramientas que nos permiten hacer varias cosas, en este caso usamos html-webpack-plugin el cual envía a la carpeta de salida el html que usamos en desarrollo, ya que hasta el momento lo único que hemos trabajado son archivos js y css

Modificando nuestro archivo index.js

Ahora que ya tenemos listo nuestro archivo de webpack, debemos hacer algunos cabios dentro de nuestro archivo index.js, ya que en nuestra configuración hemos declarado que este archivo será nuestro principal archivo JavaScript, el cambio radica que ahora en este archivo debemos agregar todos los recursos y lógica que necesitamos ejecutar del lado del cliente, por lo tanto, debemos agregar nuestros archivos CSS y demás archivos JS que necesitemos

require('../css/keyframes.css');
require('../css/banner.css');
require('../css/style.css');

AOS.init();

Anterior mente los archivos CSS los invocábamos directamente en el HTML y aunque esto sigue siendo posible, dado que son parte de nuestro código desarrollado, los pomos invocar desde index.js son ningún problema gracias a Webpack. Y listo este es una de las configuraciones mas sencillas de un archivo webpack el cual te servirá para crear un landing page.

Ahora pasemos a revisar como funciona Express y como debemos configurarlo en nuestro proyecto.

¿Qué es Express Nodejs?

Express es un framework web que nos permite levantar servidores web en cuestión de segundos.

Express es un de los framework mas utilizados en Node para levantar servidores web, y aunque realmente es un framework muy minimalista, podemos agregarle paquetes middleware con los cuales podemos extender su funcionalidad prácticamente al infinito.

Vemos como esta hecho nuestro servidor web de este ejemplo:

var express = require('express');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackConfig = require('../webpack.config');
var badyParser = require("body-parser");


var app = express();
app.set('port', (process.env.PORT || 3000));

app.use('/static', express.static('dist'));
app.use(badyParser.json());
app.use(badyParser.urlencoded({ extended: true }));
app.use(webpackDevMiddleware(webpack(webpackConfig)));

app.get('/', function (req, res, next) {
    res.send('EWebik');
});



app.listen(app.get('port'), () => {
    console.log('Servidor activo 1');
})

Los puntos más importantes del código anterior son los siguientes:

  • app = express(); , inicializamos express.
  • app.set('port', (process.env.PORT || 3000));, establecemos el puerto de escucha.
  • app.use('/static', express.static('dist'));, creamos una ruta estática donde expondremos imágenes y archivos externos de índole publico.
  • app.use(webpackDevMiddleware(webpack(webpackConfig)));, creamos nuestro middleware con ayuda de Webpack, con la intención de indicarle a Express que es lo que debe pasar antes de servir al cliente nuestra página.
  • app.listen, levantamos el servidor web escuchando en el puerto especificado.

Se que esta explicación no es muy buena, pero en el vídeo lo hacemos paso a paso, por favor velo hasta el final.

Y listo, ahora ya sabes como migrar una página web estática a NodeJS o simplemente crear una página desde cero y desde el principio agregarle un Back end como NodeJS para incrementar su funcionalidad, pero para esto lo veremos en el siguiente post, no te lo pierdas.

🧐 Autoevaluación: Página Web con NodeJs

¿Qué es NPM?

¿Qué es NodeJS?

¿Qué es Webpack?

Juan Carlos

Juan Carlos García

Desarrollador de software / SEO

Durante años he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera página de Google, y hoy quiero compartir contigo lo que se en tecnologías como: Node JS, PHP, C# y Bases de datos.

Si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.

EWebik

Diseño de páginas web y aplicaciones moviles.

© 2024 EWebik