Crea tu primera P√°gina Web con NodeJS desde cero

Inicio‚Äļpagina web‚ÄļP√°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.

© 2023 EWebik