Página Web con NodeJS desde cero

Juan Carlos G 2020-01-03
Página Web con NodeJS desde cero

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

Viajeros hoy les voy a dejar un vídeo corto pero sumamente intersante ya que aprederan a desarrollar una landing page en NodeJs de una manera muy sencilla y para esto utilizamos nuestra Primera página web responsiva con Bootstrap que hicimos en el vídeo anterior, no olvides en suscribirte a mi canal de YouTuve EWebik para que no te pierdas ningún tutorial.

 

📌 Suscríbete a mi canal y activa la campanita para que no te pierdas ningún video 🤘

 

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 si lo vez hasta el fina:

  • ¿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 compilar 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

 

Ahora si pasemos de lleno al vídeo no olvides compartir y darle like, pero sobre todo suscríbete a mi canal para poder seguir subiendo mas tutoriales.

 

 

Antes de empezar

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

 

Continua aprendiendo con estas clases

 

 

Conceptos básicos para comprender mejor el vídeo

A continuación es necesario explicar algunos conceptos básicos que debes saber antes de iniciar con 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, o por lo contrario aquí te dejo estos conceptos básicos del entorno de NodeJS.

 

¿Que es NodeJS?

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

Node JS permitiéndote crear poderosas aplicaciones escalables como cualquier otro lenguaje de programación, con la ventaja de utilizar el mismo lenguaje de programación del lado del cliente y del lado del servidor, lo que en muchos casos es muy bueno sobre todo para los que van comenzando en la programación.

 

¿Que 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.

 

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 development el código final no estará minificado para que podamos detectar errores fácilmente, si es 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
  • 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 traves 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

Y listo este es una de las configuraciones mas sencillas de un archivo webpack el cual te servirá para crear un landing page.

 

 


EWebik.com

Juan Carlos G

Electrónica y diseño web


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.

@Puedes seguirme en mis redes

📌 Suscríbete 🤘