Hospede Aplicação Node.js no Back4App com Eficiência e Agilidade

hospedando sua aplicação web node js nos servidores back4app introdução este tutorial explica como você pode configurar um subdomínio e hospedar facilmente páginas estáticas após completar este guia passo a passo, você será capaz de usar um app node js para registrar e fazer login de usuários pré requisitos para completar este tutorial, você precisará se você quiser testar este app localmente, precisará instalar o node js em seu ambiente local você pode seguir o um app criado com back4app confira back4app command line configurado com o projeto passe pelo primeiro, vamos falar sobre nossa nova aplicação simples! vamos descrever um exemplo sobre o uso de hospedagem web com node js! vamos imaginar que precisamos construir um simples login, registro e solicitação de senha de usuários incluídos no seu painel do back4app seremos capazes de usar bootstrap, arquivos estáticos (css e imagens) e usar express no projeto veja o app ao vivo aqui https //nodeapplication back4app io/ você pode clonar esta aplicação completa nos modelos de código do app na plataforma back4app https //www back4app com/database/back4app/node app template primeiramente, complete a configuração usando a interface de linha de comando ( https //www back4app com/docs/js framework/node web server#content prerequisites ), para entender como funcionará com a estrutura final dos arquivos ├── nodejswebapp/ │ ├── cloud/ │ │ ├── app js │ │ ├── routes js │ │ ├── package json │ │ ├── views/ │ │ │ ├── head ejs │ │ │ ├── index ejs │ │ │ ├── reset password ejs │ ├── public/ │ │ ├── images/ │ │ ├── css/ │ │ │ ├── style css 1 ative o nome do seu subdomínio no back4app ative o recurso de hospedagem web, por favor siga os passos disponíveis no guia abaixo https //www back4app com/docs/platform/parse web hosting 2 crie e faça upload de arquivos antes de começar com esta etapa, recomendamos que você use a ferramenta de linha de comando ( https //www back4app com/docs/js framework/node web server#content prerequisites ) para fazer o upload de seus arquivos facilmente! primeiro, crie os arquivos chamados de app js app js e package json package json dentro do diretório cloud! instalar módulos no back4app dentro da pasta cloud (no seu terminal), você precisa escrever $ touch package json agora, insira o módulo npm ‘body parser’ dentro do arquivo package json 1 { 2 "dependencies" { 3 "body parser" " " 4 } 5 } solução de problemas não é necessário executar npm install npm install dentro da pasta cloud porque o servidor back4app irá instalá lo automaticamente app js 1 // requerir o módulo 2 var bodyparser = require("body parser"); 3 4 // configurar o diretório de views 5 app set('views', dirname + '/views'); 6 app set('view engine', 'ejs'); 7 8 // configurar o body parser para seu app 9 app use(bodyparser json()); 10 app use(bodyparser urlencoded({extended true})); 11 12 //requerir o arquivo routes js 13 14 require(' /routes'); 3 crie as views para seu app forneceremos arquivos de modelo ejs para criar o aplicativo modelo, você pode alterá lo a qualquer momento do seu lado ) retornando ao terminal dentro do diretório cloud, é necessário criar a pasta views e os seguintes arquivos ejs head ejs head ejs usaremos isso para adicionar conteúdo ao cabeçalho da estrutura html index ejs index ejs usaremos isso para registrar e fazer login de usuários reset password ejs reset password ejs usaremos isso para o usuário solicitar a redefinição de senha dica construiremos as views usando bootstrap, https //getbootstrap com/ para ler mais sobre isso você pode adicionar conteúdo às suas respectivas views você pode usar os modelos abaixo sem qualquer 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 crie as rotas para renderizar as visualizações agora, precisamos configurar as rotas para renderizar as views que foram criadas anteriormente as rotas serão construídas usando 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 }); dica como você pode ver, estamos configurando variáveis como parâmetros, que serão usadas para exibir alertas na página 5 crie as rotas para salvar as informações no seu banco de dados usaremos o https //docs parseplatform org/js/guide/ como referência para desenvolver nossas funções de registro, login e solicitação de senha 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 quase lá! arquivos estáticos na pasta pública ainda não acabou! na pasta pública, você pode inserir arquivos estáticos como css e imagens para requerer isso nas views ) quando você adiciona arquivos de css e imagens, você pode fornecer diferentes folhas de estilo para o seu site criado! 7 está feito! até este ponto, você aprendeu esplendidamente como criar uma aplicação node js usando cloud code clique em https //nodeapplication back4app io/ para acessar o projeto completo no back4app a qualquer momento com os passos descritos acima, você poderá trabalhar com o hospedagem web ao usar uma aplicação node js!