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 nodeapplication back4app io você pode clonar esta aplicação completa nos modelos de código do app na plataforma back4app aqui primeiramente, complete a configuração usando a interface de linha de comando ( veja os pré requisitos https //www back4app com/docs/js framework/node web server#content prerequisites ), para entender como funcionará com a estrutura final dos arquivos 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 ativando sua hospedagem web e consulta ao vivo 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 ( veja os pré requisitos 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 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, clique aqui 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 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 }); 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 guia do parse server javascript 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 este link 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!