create account

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

View this thread on: hive.blogpeakd.comecency.com
· @jfdesousa7 ·
$23.06
Creando tu primera página web con Node (principiantes)
<center>
![descarga.png](https://images.hive.blog/DQmZhpjmxxVFxk9v7cNvCUahpvuQPgctRV9aboaeaaMP2AB/descarga.png)
</center>


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 ;) 


<h1>Primero que es Node ?</h1>
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.

<h2>Iniciemos:</h2>

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 <code>mi-pagina-web</code>

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:

<pre><code>npm init --yes</code></pre>

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

<pre><code>npm install express</code></pre>

Una vez instalado crearemos un archivo llamado index.js

Y escribiremos lo siguiente :

<pre><code>const express = require ("express")
const app = express()
app.listen(3000)
</code></pre>



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:

<pre><code>node index
</code></pre>

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:

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

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


<b>index.html</b>

<pre><code>&lt;h1>Mi primera página web con Node&lt;/h1>
</code></pre>

Y en nuestro Index.js 

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


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


<pre><code>node index
</code></pre>

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
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 92 others
properties (23)
authorjfdesousa7
permlinkcreando-tu-primera-pagina-web-con-node-principiantes
categoryhive-154226
json_metadata{"tags":["cervantes","appreciator","spanish","neoxian","hivemexico","developspanish","palnet"],"image":["https://images.hive.blog/DQmZhpjmxxVFxk9v7cNvCUahpvuQPgctRV9aboaeaaMP2AB/descarga.png"],"links":["https://tupaginaonline.net"],"app":"hiveblog/0.1","format":"markdown"}
created2021-03-25 01:52:21
last_update2021-03-25 01:52:21
depth0
children1
last_payout2021-04-01 01:52:21
cashout_time1969-12-31 23:59:59
total_payout_value11.560 HBD
curator_payout_value11.499 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,946
author_reputation19,305,981,226,487
root_title"Creando tu primera página web con Node (principiantes)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id102,584,282
net_rshares20,504,745,932,736
author_curate_reward""
vote details (156)
@goya ·
<center>https://cdn.steemitimages.com/DQmQXdFVDHgVy2WuNJK9yqwYUtqv6q6gJJ7Ae4DbN49qsb1/Goyita.gif</center>
properties (22)
authorgoya
permlinkqqjfvv
categoryhive-154226
json_metadata{"image":["https://cdn.steemitimages.com/DQmQXdFVDHgVy2WuNJK9yqwYUtqv6q6gJJ7Ae4DbN49qsb1/Goyita.gif"],"app":"hiveblog/0.1"}
created2021-03-25 18:40:42
last_update2021-03-25 18:40:42
depth1
children0
last_payout2021-04-01 18:40:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length105
author_reputation147,288,516,734,479
root_title"Creando tu primera página web con Node (principiantes)"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id102,598,649
net_rshares0