Creando tu primera página web con Node (principiantes)

avatar


descarga.png

Este post va dirigido a aquellas personas que recién inician en este mundo de la programación web. Y que mejor manera que aprendiendo las bases del lenguaje de programación llamado Node.js. Cabe aclarar que el mejor lenguaje para empezar a crear páginas web es con PHP pero bueno vamos a darle con Node.js ;)

Primero que es Node ?


Node.js es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor basado en el lenguaje de programación JavaScript, asíncrono, con E/S de datos en una arquitectura orientada a eventos y basado en el motor V8 de Google

Lo que se traduce es que vamos a escribir código de javascript pero del lado del servidor.

Iniciemos:

Para empezar es necesario tener instalado Node en tu máquina, para ello colocan en Google Node y lo descargan.

... Sigue los pasos y te irá bien.

Vamos a crear una carpeta en nuestro escritorio y le ponemos cualquier nombre en mi caso mi-pagina-web

Y abrimos esa carpeta con visual studio code (editor de código) para descargarlo solo basta colocar en Google Visual studio code y lo descargan.

Una vez abierto la carpeta lo primero que tenemos que hacer será activar la consola o terminal de nuestro editor apretando las teclas control shift P simultáneamente y se abrirá allí mismo en tu editor.

Una vez abierto la terminal dentro de nuestro editor lo primero que vamos a escribir será el siguiente comando:

npm init --yes

Este comando iniciara un nuevo proyecto de Node.
Básicamente crea un archivo llamado package.json con la información de nuestra app.

Ahora es momento de descargar un framework de Node que nos simplifican muchas cosas que hacerlo nativamente llamado express.js

Escribiremos en la terminal el siguiente comando

npm install express

Una vez instalado crearemos un archivo llamado index.js

Y escribiremos lo siguiente :

const express = require ("express")
const app = express()
app.listen(3000)

Esto lo que hace es que creará un servidor en el puerto 3000 .

Vamos a ejecutar nuestra app en el terminal con el siguiente comando:

node index

Vamos a verlo. Abrimos Chrome o el navegador que tengan y escribimos en la barra de búsqueda localhost:3000

Y aparecerá un error (que no es un error de express, solo que no es un error sino que no hemos creado la ruta inicial / )

Vamos a crear nuestra primera ruta:

const express = require ("express")
const app = express()
app.get("/", (req, res) => {
res.send('Mi primera página web con Node')
})
app.listen(3000)

Volvemos al navegador y ahora aparecerá nuestro mensaje.

Pero una página web no se parece a eso. Así que vamos a mejorar nuestra página web, para ello vamos a crear un archivo llamado index.html

index.html

<h1>Mi primera página web con Node</h1>

Y en nuestro Index.js

const express = require ("express")
const app = express()
app.get("/", (req, res) => {
res.sendFile("index.html")
})
app.listen(3000)

Volvemos a ejecutar nuestra app porque hemos modificado el código ( cada vez que modifiquemos tendremos que volver a ejecutar nuestra app)

node index

Y vemos la página web, notamos que aparece el texto escrito arriba.

Y con eso ya vamos armando nuestra página web con Node. Ya solo queda de parte de ustedes agregarles estilos y funcionabilidad.

Para darles estilos pueden probar con un framework de css llamado bootstrap (googlear lo)

Más adelante crearé más explicando cómo conectar nuestro backend con una base de datos. Y hacer la web dinámica.

Gracias por leer y hasta la próxima.

Visiten mi página web para más tutoriales

https://tupaginaonline.net



0
0
0.000
1 comments