Alojamiento de Aplicaciones Node.js en Back4App: Guía Técnica

alojar tu aplicación web node js en los servidores de back4app introducción este tutorial explica cómo puedes configurar un subdominio y alojar fácilmente páginas estáticas después de completar esta guía paso a paso, podrás usar una aplicación node js para registrar e iniciar sesión usuarios requisitos previos para completar este tutorial, necesitarás si deseas probar esta aplicación localmente, necesitas instalar node js en tu entorno local puedes seguir el una aplicación creada con back4app consulta back4app command line configurado con el proyecto revisa el primero, hablemos de nuestra nueva aplicación simple! describiremos un ejemplo sobre el uso de alojamiento web con node js! imaginemos que necesitamos construir un inicio de sesión simple, registro y solicitud de contraseña de los usuarios incluidos en tu panel de control de back4app podremos usar bootstrap, archivos estáticos (css e imágenes) y usar express en el proyecto ve la aplicación en vivo aquí nodeapplication back4app io puedes clonar esta aplicación completa en las plantillas de código de la aplicación en la plataforma back4app aquí primero, completa la configuración usando la interfaz de línea de comandos ( ver requisitos previos https //www back4app com/docs/js framework/node web server#content prerequisites ), para entender cómo funcionará con la estructura final de los archivos 1 habilita el nombre de tu subdominio en back4app habilita la función de alojamiento web, por favor sigue los pasos disponibles en la guía a continuación activar tu alojamiento web y consulta en vivo 2 crea y sube archivos antes de comenzar con este paso, te recomendamos usar la herramienta de línea de comandos ( ver prerequisitos https //www back4app com/docs/js framework/node web server#content prerequisites ) para subir tus archivos fácilmente! primero, crea los archivos llamados app js app js y package json package json dentro del directorio de la nube! instalar módulos en back4app dentro de la carpeta de la nube (en tu terminal), necesitas escribir ahora, inserta el módulo npm ‘body parser’ dentro del archivo package json 1 { 2 "dependencies" { 3 "body parser" " " 4 } 5 } solución de problemas no es necesario ejecutar npm install npm install dentro de la carpeta de la nube porque el servidor de back4app lo instalará automáticamente app js 1 // requerir el módulo 2 var bodyparser = require("body parser"); 3 4 // configurar el directorio de vistas 5 app set('views', dirname + '/views'); 6 app set('view engine', 'ejs'); 7 8 // configurar el body parser para tu app 9 app use(bodyparser json()); 10 app use(bodyparser urlencoded({extended true})); 11 12 //requerir el archivo routes js 13 14 require(' /routes'); 3 crea las vistas para tu app proporcionaremos archivos de plantilla ejs para crear la aplicación de plantilla, puedes cambiarlo en cualquier momento de tu parte ) regresando a la terminal dentro del directorio cloud, es necesario crear la carpeta views y los siguientes archivos ejs head ejs head ejs lo usaremos para agregar contenido a la cabeza de la estructura html index ejs index ejs lo usaremos para registrar e iniciar sesión a los usuarios reset password ejs reset password ejs lo usaremos para que el usuario solicite el restablecimiento de la contraseña consejo construiremos las vistas usando bootstrap, haz clic aquí para leer más sobre ello puedes agregar contenido a tus respectivas vistas puedes usar las plantillas a continuación sin ningún problema head ejs 1 \<title>back4app node js application\</title> 2 \<meta charset="utf 8"> 3 \<meta name="viewport" content="width=device width, initial scale=1"> 4 \<link rel="shortcut icon" type="image/png" href="/favicon png"/> 5 \<! bootstrap css > 6 \<link rel="stylesheet" href="https //maxcdn bootstrapcdn com/bootstrap/3 3 7/css/bootstrap min css" integrity="sha384 bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> 7 8 \<! jquery > 9 \<script src="https //cdnjs cloudflare com/ajax/libs/jquery/3 3 1/jquery min js">\</script> 10 11 \<! bootstrap js > 12 \<script src="https //maxcdn bootstrapcdn com/bootstrap/3 3 7/js/bootstrap min js" integrity="sha384 tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous">\</script> 13 14 \<! stylesheet pages > 15 \<link rel="stylesheet" type="text/css" href="/css/style css"> index ejs 1 \<!doctype html> 2 \<html> 3 \<head> 4 <% include head ejs %> 5 \</head> 6 \<body> 7 \<section id="header"> 8 \<div class="container"> 9 \<div class="row"> 10 \<div class="col sm 6"> 11 \<div class="box settings box register"> 12 \<div class="wrap login100"> 13 \<form class="validate form" method="post" action="/users/register"> 14 \<h2 class="title screen"> 15 register a new account 16 \</h2> 17 \<div class="form group"> 18 \<input type="text" name="usernameregister" placeholder="username" class="form control" value="<%= infouser usernameregister %>"> 19 \</div> 20 \<div class="form group"> 21 \<input type="text" name="emailregister" placeholder="email" class="form control" value="<%= infouser emailregister %>"> 22 \</div> 23 \<div class="form group"> 24 \<input type="password" name="passwordregister" placeholder="password" class="form control" value="<%= infouser passwordregister %>"> 25 \</div> 26 <% if (registermessage != 'undefined' ? registermessage '' ) { %> 27 \<div class="alert alert <%= typestatus %>" role="alert"> 28 \<p><%= registermessage %>\</p> 29 \</div> 30 <% } %> 31 \<div class="form group"> 32 \<button class="btn login btn"> 33 register 34 \</button> 35 \</div> 36 \</form> 37 \</div> 38 \</div> 39 \</div> 40 \<div class="col sm 6"> 41 \<div class="box settings box login"> 42 \<div class="wrap login100"> 43 \<form class="validate form" method="post" action="/users/login"> 44 \<h2 class="title screen"> 45 access your account 46 \</h2> 47 \<div class="form group"> 48 \<input type="text" name="usernamelogin" placeholder="username" class="form control" value="<%= infouser usernamelogin %>"> 49 \</div> 50 51 \<div class="form group"> 52 \<input type="password" name="passwordlogin" placeholder="password" class="form control" value="<%= infouser passwordlogin %>"> 53 \</div> 54 <% if (loginmessage != 'undefined' ? loginmessage '' ) { %> 55 \<div class="alert alert <%= typestatus %>" role="alert"> 56 \<p><%= loginmessage %>\</p> 57 \</div> 58 <% } %> 59 \<div class="form group"> 60 \<button class="btn login btn"> 61 login 62 \</button> 63 \</div> 64 65 \<div class="text forgot"> 66 \<a href="/users/forgot password"> 67 forgot password? click here to retrive your access! 68 \</a> 69 \</div> 70 \</form> 71 \</div> 72 \</div> 73 \</div> 74 \</div> 75 \</div> 76 \</section> 77 \</body> 78 \</html> reset password ejs 1 \<!doctype html> 2 \<html> 3 \<head> 4 <% include head ejs %> 5 \</head> 6 \<body> 7 \<section id="header"> 8 \<div class="container"> 9 \<div class="row"> 10 \<div class="col sm offset 3 col sm 6" align="center"> 11 \<div class="box settings box password"> 12 \<div class="wrap login100"> 13 \<form class="validate form" method="post" action="/users/forgot password"> 14 \<h2 class="title screen"> 15 retrieve your access 16 \</h2> 17 \<p>insert your email address\</p> 18 \<div class="form group"> 19 \<input type="text" name="email" placeholder="email" class="form control" value="<%= infouser email %>"> 20 \</div> 21 <% if (resetpass != 'undefined' ? resetpass '' ) { %> 22 \<div class="alert alert <%= typestatus %>" role="alert"> 23 \<p><%= resetpass %>\</p> 24 \</div> 25 <% } %> 26 \<div class="form group"> 27 \<button class="btn login btn"> 28 reset password 29 \</button> 30 \</div> 31 \</form> 32 \</div> 33 \</div> 34 \</div> 35 \</div> 36 \</div> 37 \</section> 38 \</body> 39 \</html> 4 crea las rutas para renderizar las vistas ahora, necesitamos configurar las rutas para renderizar las vistas que se crearon anteriormente las rutas se construirán utilizando express https //expressjs com/ 1 // index 2 app get('/', (req, res) => { 3 res render('index', {loginmessage '', registermessage '', typestatus '', infouser ''}); 4 }); 5 // request password 6 app get('/users/forgot password', (req, res) => { 7 res render('reset password', { resetpass '', typestatus '', infouser ''}); 8 }); consejo como puedes ver, estamos configurando variables como parámetros, que se utilizarán para mostrar alertas en la página 5 crea las rutas para guardar la información en tu base de datos usaremos el guía de javascript de parse server https //docs parseplatform org/js/guide/ como referencia para desarrollar nuestras funciones para registro, inicio de sesión y solicitar la contraseña 1 // request the log in passing the email and password 2 app post('/users/login', async(req, res) => { 3 let infouser = req body; 4 5 try{ 6 let user = await parse user login(infouser usernamelogin, infouser passwordlogin) 7 res render('index', { loginmessage "user logged!", registermessage '', typestatus "success", infouser infouser }); 8 } catch (error){ 9 res render('index', { loginmessage error message, registermessage '', typestatus "danger", infouser infouser}); 10 } 11 }); 12 13 // register the user passing the username, password and email 14 app post('/users/register', async(req, res) => { 15 let infouser = req body; 16 let user = new parse user(); 17 18 user set("username", infouser usernameregister); 19 user set("password", infouser passwordregister); 20 user set("email", infouser emailregister); 21 22 try{ 23 await user signup(); 24 res render('index', { loginmessage '', registermessage "user created!", typestatus "success", infouser infouser}); 25 } catch (error) { 26 res render('index', { loginmessage '', registermessage error message, typestatus "danger", infouser infouser}); 27 } 28 }); 29 30 // request the password reset passing the email 31 app post('/users/forgot password', function(req, res) { 32 let infouser = req body; 33 try{ 34 await parse user requestpasswordreset(infouser email); 35 res render('reset password', { resetpass "check your email!", typestatus "success", infouser infouser}); 36 } catch (e){ 37 res render('reset password', { resetpass error message, typestatus "danger", infouser infouser}); 38 } 39 }); 6 ¡casi allí! archivos estáticos en la carpeta pública ¡no ha terminado aún! en la carpeta pública, puedes insertar archivos estáticos como css e imágenes para requerir esto en las vistas ) cuando agregas archivos a css e imágenes, puedes proporcionar diferentes hojas de estilo a tu sitio web creado! 7 ¡está hecho! hasta este punto, has aprendido espléndidamente cómo crear una aplicación node js utilizando código en la nube haz clic en este enlace para acceder al proyecto completo en back4app en cualquier momento con los pasos descritos arriba, ¡podrás trabajar con el alojamiento web al usar una aplicación node js!