Guida all'Hosting di Applicazioni Node.js su Back4App

ospitare la tua applicazione web node js sui server back4app introduzione questo tutorial spiega come puoi impostare un sottodominio e ospitare facilmente pagine statiche dopo aver completato questa guida passo passo, sarai in grado di utilizzare un'app node js per registrare e accedere agli utenti requisiti per completare questo tutorial, avrai bisogno di se vuoi testare questa app localmente, devi installare node js nel tuo ambiente locale puoi seguire il un'app creata con back4app dai un'occhiata a back4app command line configurato con il progetto segui il per prima cosa, parliamo della nostra nuova semplice applicazione! descriveremo un esempio sull'uso dell'hosting web con node js! immaginiamo di dover costruire un semplice accesso, registrazione e richiesta di password dagli utenti inclusi nel tuo dashboard back4app saremo in grado di utilizzare bootstrap, file statici (css e immagini) e express nel progetto guarda l'app live qui https //nodeapplication back4app io/ puoi clonare questa applicazione completa nei modelli di codice dell'app sulla piattaforma back4app https //www back4app com/database/back4app/node app template innanzitutto, completa la configurazione utilizzando l'interfaccia della riga di comando ( https //www back4app com/docs/js framework/node web server#content prerequisites ), per capire come funzionerà con la struttura finale dei file ├── nodejswebapp/ │ ├── cloud/ │ │ ├── app js │ │ ├── routes js │ │ ├── package json │ │ ├── views/ │ │ │ ├── head ejs │ │ │ ├── index ejs │ │ │ ├── reset password ejs │ ├── public/ │ │ ├── images/ │ │ ├── css/ │ │ │ ├── style css 1 abilita il tuo nome di sottodominio su back4app abilita la tua funzione di web hosting, segui i passaggi disponibili nella guida qui sotto https //www back4app com/docs/platform/parse web hosting 2 crea e carica file prima di iniziare con questo passaggio, ti consigliamo di utilizzare lo strumento da riga di comando ( https //www back4app com/docs/js framework/node web server#content prerequisites ) per caricare facilmente i tuoi file! per prima cosa, crea i file chiamati app js app js e package json package json all'interno della directory cloud! installa i moduli in back4app all'interno della cartella cloud (nel tuo terminale), devi scrivere $ touch package json ora, inserisci il modulo npm ‘body parser’ all'interno del file package json 1 { 2 "dependencies" { 3 "body parser" " " 4 } 5 } risoluzione dei problemi non è necessario eseguire npm install npm install all'interno della cartella cloud perché il server back4app lo installerà automaticamente app js 1 // richiedi il modulo 2 var bodyparser = require("body parser"); 3 4 // imposta la directory delle viste 5 app set('views', dirname + '/views'); 6 app set('view engine', 'ejs'); 7 8 // imposta il body parser per la tua app 9 app use(bodyparser json()); 10 app use(bodyparser urlencoded({extended true})); 11 12 //richiedi il file routes js 13 14 require(' /routes'); 3 crea le viste per la tua app forniremo file ejs di esempio per creare l'app template, puoi modificarlo in qualsiasi momento dalla tua parte ) tornando al terminale all'interno della directory cloud, è necessario creare la cartella views e i seguenti file ejs head ejs head ejs lo useremo per aggiungere contenuti all'intestazione della struttura html index ejs index ejs lo useremo per registrare e accedere agli utenti reset password ejs reset password ejs lo useremo per la richiesta di reimpostazione della password da parte dell'utente suggerimento costruiremo le viste utilizzando bootstrap, https //getbootstrap com/ per leggere di più al riguardo puoi aggiungere contenuti alle tue rispettive viste puoi utilizzare i modelli sottostanti senza alcun 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 le rotte per visualizzare le viste ora dobbiamo configurare le route per visualizzare le viste che sono state create in precedenza le route saranno costruite utilizzando 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 }); suggerimento come puoi vedere, stiamo configurando variabili come parametri, che verranno utilizzati per visualizzare avvisi sulla pagina 5 crea le rotte per salvare le informazioni nel tuo database utilizzeremo il https //docs parseplatform org/js/guide/ come riferimento per sviluppare le nostre funzioni per registrazione, accesso e richiesta della password 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 ci siamo quasi! file statici nella cartella pubblica non è ancora finita! nella cartella pubblica, puoi inserire file statici come css e immagini da richiedere nelle viste ) quando aggiungi file css e immagini, puoi fornire diversi fogli di stile al tuo sito web creato! 7 è fatto! fino a questo punto, hai imparato splendidamente come creare un'applicazione node js utilizzando il cloud code clicca su https //nodeapplication back4app io/ per accedere al progetto completo in back4app in qualsiasi momento con i passaggi descritti sopra, sarai in grado di lavorare con l'hosting web quando utilizzi un'applicazione node js!