Express.js

hosting your node js web application on back4app servers introduction this tutorial explains how you can set up a subdomain and easily host static pages after completing this step by step guide, you will be able to use a node js app to register and login users prerequisites to complete this tutorial, you will need if you want to test this app locally, you need to install node js in your local environment you can follow the an app created with back4app check out back4app command line configured with the project go through the first off, let’s talk about our new simple application! we’ll describe an example about the usage of web hosting with node js! let’s imagine that we need to build a simple log in, register and request password from users included in your back4app dashboard we will be able to use bootstrap, static files (css and images) and usign express in the project see the live app here nodeapplication back4app io you can clone this complete application in the app code templates on the back4app platform here firstly, complete the set up using the command line interface ( see prerequisites https //www back4app com/docs/js framework/node web server#content prerequisites ), to understand how it will work with the final structure from the files ├── nodejswebapp/ │ ├── cloud/ │ │ ├── app js │ │ ├── routes js │ │ ├── package json │ │ ├── views/ │ │ │ ├── head ejs │ │ │ ├── index ejs │ │ │ ├── reset password ejs │ ├── public/ │ │ ├── images/ │ │ ├── css/ │ │ │ ├── style css 1 enable your subdomain name on back4app enable your web hosting feature, please follow the steps available in the guide below activating your web hosting and live query 2 create and upload files before getting started with this step, we recommend you using command line tool ( see prereqs https //www back4app com/docs/js framework/node web server#content prerequisites ) to upload your files easily! first off, create the files called as app js app js and package json package json inside the cloud directory! install modules in back4app inside the cloud folder (in your terminal), you need to write $ touch package json now, insert the npm module ‘body parser’ inside the file package json 1 { 2 "dependencies" { 3 "body parser" " " 4 } 5 } troubleshooting it is not necessary to run npm install npm install inside the cloud folder because the back4app server will install it automatically app js 1 // require the module 2 var bodyparser = require("body parser"); 3 4 // set up the views directory 5 app set('views', dirname + '/views'); 6 app set('view engine', 'ejs'); 7 8 // set up the body parser to your app 9 app use(bodyparser json()); 10 app use(bodyparser urlencoded({extended true})); 11 12 //require the routes js file 13 14 require(' /routes'); 3 create the views to your app we’ll provide template ejs files to make the template app, you can change it anytime at your end ) returning to the terminal inside the cloud directory, it is necessary to create the views folder and the following ejs files head ejs head ejs we will use it to add content to head of html structure index ejs index ejs we will use it to register and log in users reset password ejs reset password ejs we will use it for the user request the password reset hint we will construct the views using bootstrap, click here to read more about it you can add content to your respective views you can use the below templates without any hassle 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 create the routes to render the views now, we need to configure the routes to render the views that were created previously the routes will be built using 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 }); hint as you can see, we are configuring variable as parameters, which will be used to display alerts on the page 5 create the routes to save the informations to your database we will use the parse server javascript guide https //docs parseplatform org/js/guide/ as a reference for developing our functions for register, login and request the 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 almost there! static files in public folder it’s not over yet! in the public folder, you can insert static files such as css and images to require this on the views ) when you add files to css and images, you are able to provide different stylesheets to your website created! 7 it’s done! up to this point, you have splendidly learned how to create a node js application using cloud code click on this link to access the complete project in back4app at anytime with the steps described above, you’ll be able to work with the web hosting when using a node js application!