Crea tu primera Página Web con NodeJS desde cero

Contenido recomendado para crear tu primera pagina en NodeJS

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

• Instala XAMPP
• Instala Visual Studio Code, aunque puedes utilizar prácticamente cualquier editor de código
• Y no te pierdas la clase anterior Mi primera página web con Bootstrap
• Repositorio

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.