Página Web con NodeJS desde cero

Página Web con NodeJS desde cero
Juan Carlos G2020-03-29

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

Viajeros hoy les voy a dejar un vídeo corto pero sumamente interesante ya que aprenderán a desarrollar una landing page en Node Js 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

 

SELECT, UPDATE y DELETE en MySQL con PHP

SELECT, UPDATE y DELETE en MySQL con PHP...

Aprende a realizar SELECT, UPDATE y DELETE en MySQ...

Insertar datos en MySQL con PHP

Insertar datos en MySQL con PHP...

En este vídeo aprenderás a 【 insertar datos desde ...

Curso gratuito de PHP y MySQL para principiantes

Curso gratuito de PHP y MySQL para principiantes...

Aprende todo sobre ✔️ PHP y MySQL desde cero hasta...

¿Cómo crear un login en PHP y MySQL en menos de una hora?

¿Cómo crear un login en PHP y MySQL en menos de un...

Deseas proteger tu aplicación en menos de una hora...

Conexión de PHP con MySQL utilizando PDO y MySQLi

Conexión de PHP con MySQL utilizando PDO y MySQLi...

Conexión PHP con MySQL, en esté vídeo aprenderás c...

Crear base de datos MySQL con PHP

Crear base de datos MySQL con PHP...

Quieres aprende a crear base de datos y tablas en ...

Sentencias preparadas en MySQL con PHP

Sentencias preparadas en MySQL con PHP...

⚡ Realiza un insert masivo desde un 《 JSON a trav...

¿Cómo hacer un Dashboard con gráficas en PHP y MySQL?

¿Cómo hacer un Dashboard con gráficas en PHP y MyS...

Estas a un clic de aprende a crear un estupendo 《 ...

CREATE PROCEDURE ¿Cómo crear procedimientos almacenados en MySQL?

CREATE PROCEDURE ¿Cómo crear procedimientos almace...

¿Quieres aprende a crear 《 procedimientos almacena...

 

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.

 

 

 

Dominios virtuales, ¿Dónde comprar el dominio para mi página web?

Dominios virtuales, ¿Dónde comprar el dominio para...

No solo aprenderás qué son los dominios virtuales,...

Configuración del servidor SMTP de GMAIL

Configuración del servidor SMTP de GMAIL...

No tienes para pagar un correo empresarial 😭, NO ...

¿Qué es la Web?

¿Qué es la Web?...

Para hablar de Web debemos comprender que no es lo...

¿Cómo instalar un certificado SSL gratuito?

¿Cómo instalar un certificado SSL gratuito?...

Certificado SSL gratis, brinda a tus usuarios segu...

¿Qué son y para que sirven los servidores?

¿Qué son y para que sirven los servidores?...

En esta sección aprenderás desde como montar un se...

Servidores Web, tipos y sus características

Servidores Web, tipos y sus características...

Que no te confundan, aprende 《 ¿Qué son los servid...

¿Qué significa HTTP?

¿Qué significa HTTP?...

¿Sabes cual es la historia del HTTP? y ¿Por qué to...

¿Qué es  World Wide Web?  y ¿Qué significa WWW?

¿Qué es World Wide Web? y ¿Qué significa WWW?...

Todos los días navegas en páginas que inician con ...

¿Qué es y como puedo utilizar el comando IPCONFIG en Windows?

¿Qué es y como puedo utilizar el comando IPCONFIG ...

El comando IPCONFIG es muy útil cuando necesitar o...

 


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