Guide d'hébergement Node.JS sur Back4App pour développeurs

hébergement de votre application web node js sur les serveurs back4app introduction ce tutoriel explique comment vous pouvez configurer un sous domaine et héberger facilement des pages statiques après avoir terminé ce guide étape par étape, vous serez en mesure d'utiliser une application node js pour enregistrer et connecter des utilisateurs prérequis pour compléter ce tutoriel, vous aurez besoin de si vous souhaitez tester cette application localement, vous devez installer node js dans votre environnement local vous pouvez suivre le une application créée avec back4app consultez back4app command line configuré avec le projet parcourez le tout d'abord, parlons de notre nouvelle application simple ! nous allons décrire un exemple sur l'utilisation de l'hébergement web avec node js ! imaginons que nous devons créer une simple connexion, un enregistrement et une demande de mot de passe pour les utilisateurs inclus dans votre tableau de bord back4app nous pourrons utiliser bootstrap, des fichiers statiques (css et images) et utiliser express dans le projet voir l'application en direct ici https //nodeapplication back4app io/ vous pouvez cloner cette application complète dans les modèles de code d'application sur la plateforme back4app https //www back4app com/database/back4app/node app template tout d'abord, complétez la configuration en utilisant l'interface de ligne de commande ( https //www back4app com/docs/js framework/node web server#content prerequisites ), pour comprendre comment cela fonctionnera avec la structure finale des fichiers ├── nodejswebapp/ │ ├── cloud/ │ │ ├── app js │ │ ├── routes js │ │ ├── package json │ │ ├── views/ │ │ │ ├── head ejs │ │ │ ├── index ejs │ │ │ ├── reset password ejs │ ├── public/ │ │ ├── images/ │ │ ├── css/ │ │ │ ├── style css 1 activez votre nom de sous domaine sur back4app activez votre fonctionnalité d'hébergement web, veuillez suivre les étapes disponibles dans le guide ci dessous https //www back4app com/docs/platform/parse web hosting 2 créez et téléchargez des fichiers avant de commencer cette étape, nous vous recommandons d'utiliser l'outil de ligne de commande ( https //www back4app com/docs/js framework/node web server#content prerequisites ) pour télécharger vos fichiers facilement! tout d'abord, créez les fichiers appelés app js app js et package json package json dans le répertoire cloud! installer des modules dans back4app dans le dossier cloud (dans votre terminal), vous devez écrire $ touch package json maintenant, insérez le module npm ‘body parser’ dans le fichier package json 1 { 2 "dependencies" { 3 "body parser" " " 4 } 5 } dépannage il n'est pas nécessaire d'exécuter npm install npm install dans le dossier cloud car le serveur back4app l'installera automatiquement app js 1 // exiger le module 2 var bodyparser = require("body parser"); 3 4 // configurer le répertoire des vues 5 app set('views', dirname + '/views'); 6 app set('view engine', 'ejs'); 7 8 // configurer le body parser pour votre app 9 app use(bodyparser json()); 10 app use(bodyparser urlencoded({extended true})); 11 12 //exiger le fichier routes js 13 14 require(' /routes'); 3 créer les vues pour votre app nous fournirons des fichiers ejs de modèle pour créer l'application modèle, vous pouvez le modifier à tout moment de votre côté ) retour au terminal dans le répertoire cloud, il est nécessaire de créer le dossier views et les fichiers ejs suivants head ejs head ejs nous l'utiliserons pour ajouter du contenu à l'en tête de la structure html index ejs index ejs nous l'utiliserons pour enregistrer et connecter les utilisateurs reset password ejs reset password ejs nous l'utiliserons pour que l'utilisateur demande la réinitialisation du mot de passe indice nous construirons les vues en utilisant bootstrap, https //getbootstrap com/ pour en savoir plus vous pouvez ajouter du contenu à vos vues respectives vous pouvez utiliser les modèles ci dessous sans aucun problème 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 créer les routes pour rendre les vues maintenant, nous devons configurer les routes pour rendre les vues qui ont été créées précédemment les routes seront construites en utilisant 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 }); indice comme vous pouvez le voir, nous configurons des variables en tant que paramètres, qui seront utilisées pour afficher des alertes sur la page 5 créez les routes pour enregistrer les informations dans votre base de données nous allons utiliser le https //docs parseplatform org/js/guide/ comme référence pour développer nos fonctions pour l'inscription, la connexion et la demande de mot de passe 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 presque là! fichiers statiques dans le dossier public ce n'est pas encore fini! dans le dossier public, vous pouvez insérer des fichiers statiques tels que css et images à exiger dans les vues ) lorsque vous ajoutez des fichiers css et des images, vous pouvez fournir différentes feuilles de style à votre site web créé! 7 c'est fait! jusqu'à présent, vous avez merveilleusement appris à créer une application node js en utilisant le code cloud cliquez sur https //nodeapplication back4app io/ pour accéder au projet complet dans back4app à tout moment avec les étapes décrites ci dessus, vous serez en mesure de travailler avec l'hébergement web lors de l'utilisation d'une application node js!