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

Crea tu Primera P√°gina Web Con NodeJS Desde Cero

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.

Recuerda que una parte importante es el vídeo, no obstante te invito a leer el post ya que te dejaré conceptos que omití en el vídeo o simplemente deseo profundizar un poco más para que te quede mas claro todo, espero te guste y te suscribas a mi boletín y canal de YouTube.

Juan Carlos García
by Juan Carlos García24-Ag-20224

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.

 

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.

Suscribirme

Gracias por tu calificación:

4

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • P√°gina Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

ūü•á Creaci√≥n de p√°ginas web

‚ö°ÔłŹ Quiero mi p√°gina web ūüí™ūüŹľ

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.

Suscribirme

Gracias por tu calificación:

4

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • P√°gina Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

ūü•á Creaci√≥n de p√°ginas web

‚ö°ÔłŹ Quiero mi p√°gina web ūüí™ūüŹľ
Juan Carlos García

Juan Carlos García

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.

Desarrollador de software

© 2022 EWebik

Dise√Īo de p√°ginas web y aplicaciones moviles.