Una web sencilla con node.js

En el post de esta semana, vamos a aprovechar las capacidades de Node.js y el sistema de plantillas ejs para montar una web muy sencilla pero funcional, de la que podréis ver un ejemplo funcionando.

Se trata de un pequeño sitio web, con tres páginas: una home, una página de listados (que solo muestra realmente un mensaje) y un formulario de contacto, que no está activado, pero se se modifican los parámetros del código, se puede usar con normalidad.

A efectos de mostrar el ejemplo, no he creido necesario llenar nigún buzón de correo con pruebas de los usuarios, pero si que tenéis el código disponible para hacer las pruebas que queraís.

Creando las rutas

Con Node.js, usamos express para crear las rutas que nos llevarán a las diferentes páginas de la web y, en este caso, a la acción del formulario.

// Rutas
app.get('/', (req, res) => {
  res.locals.title = 'Inicio'; // Cambiar el título para la página de inicio si es necesario
  res.render('index');
});

app.get('/listado', (req, res) => {
  res.locals.title = 'Listado de Items'; // Cambiar el título para la página de listado si es necesario
  res.render('listado');
});

app.use('/', formRoutes); // Usar las rutas del formulario

Como podeís ver, se hace referencia a un renderizado que se encuentra en un fichero donde se recogen el nombre de la página, el subtitulo y la imagen de fondo de la cabecera, con lo que conseguimos que cada página tenga una visualización diferente y hacemos más interesante el ejercicio:

// config/routes.js

const routes = [
  { 
    path: '/', 
    name: 'Inicio', 
    title: 'Home', 
    subtitle: 'Trabajando con Node.js', 
    backgroundImage: 'assets/img/home-bg.jpg' 
  },
  { 
    path: '/listado', 
    name: 'Listado', 
    title: 'Listado de Items', 
    subtitle: 'Un listado de cosas', 
    backgroundImage: 'assets/img/about-bg.jpg' 
  },
  { 
    path: '/contact', 
    name: 'Contacto', 
    title: 'Formulario de contacto', 
    subtitle: 'Formulario de contacto', 
    backgroundImage: 'assets/img/contact-bg.jpg' 
  }
];

module.exports = routes;

EJS para las plantillas

El sistema de plantillas EJS nos permite dividir en partes el header y el footer, para una vez definidos los contenidos de ambos, aplicarlos en toda la aplicación, a semejanza de otros gestores de funcionan con Django o PHP

// Configurar EJS como motor de plantillas
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));

Organizamos las vistas en las carpetas views, para las vistas de los contenidos que van a aparecer en cada pagina y en la carpeta partials, para almacenar los contenidos del header y del footer

Además también se ha montado un sistema que nos permite cargar de forma dinámica el menú superior, con lo que cada vez que se añada una nueva ruta y su correspondiente vista, se mostrará de forma directa, sin necesidad de añadirlo a mano.

   <ul class="navbar-nav ms-auto py-4 py-lg-0">
                      <% routes.forEach(route => { %>
                        <li class="nav-item">
                          <a class="nav-link" href="<%= route.path %>"><%= route.name %></a>
                        </li>
                      <% }) %>
                    </ul>

El formulario de contacto, como decía al principio, si bien está desabilitado para no tener tráfico de correos, es totalmente funcional modificando el fichero .env con los datos del correo de salida y su contraseña y modificando los parametros del servicio de correo en router/formRoutes.js

// .env
EMAIL_USER=correo_envio_smtp
EMAIL_PASS=tu-contraseña
// routes/formRoutes.js
// ......
// 
const transporter = nodemailer.createTransport({
    host: '__servidor__smpt_correo',// modificar el servidor de correo saliente
    port: 25, // modificar el puerto del correo saliente
    secure: false, // true para 465, false para otros puertos
    auth: {
      user: process.env.EMAIL_USER,
      pass: process.env.EMAIL_PASS, 
    },
    tls: {
      rejectUnauthorized: false,
    }
  });

//....

Tema de la web

Para la imagen general de la web, he usado un tema libre Bootstrap, llamado Clean Blog, que está disponible aquí.

La web funcionando

La web está disponible en un pequeño servidor VPS que tengo configurado para las pruebas de mis proyectos. Podéis usar la url http://vps-3853c526.vps.ovh.net:8080/. No hay SSL instalado ni nada, ya que es simplemente un pequeño servidor que uso para testeos, pero podeís navegar por la web sin ningún problema, ya que como decía, no hay tráfico de datos.

Os dejo, como siempre disponible el código en mi repositorio de GitHub, para que podáis hacer vuestros experimentos.

Espero que os resulte interesante este pequeño proyecto.

Publicada el
Categorizado como Desarollo Etiquetado como

Por Jose Manuel Sanz Prieto

Desarrollador web. En este blog hablo de fotografía, programación con Django, Python, PHP y privacidad.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.