--- title: Express.js slug: docs/js-framework/node-web-server description: In this guide you learn how to download a Node JS App. image: https://www.back4app.com/images/logo-social.png docTags: createdAt: 2024-03-07T13:31:50.743Z --- # 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 :::hint{type="info"} **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](https://nodeapplication.back4app.io/). :::hint{type="info"} You can clone this complete application in the App code templates on the Back4App Platform [here](https://www.back4app.com/database/back4app/node-app-template). ::: 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: :::BlockQuote ├── 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](https://www.back4app.com/docs/platform/parse-web-hosting) ## 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` and `package.json` inside the cloud directory! ::::ExpandableHeading **Install modules in Back4App** Inside the cloud folder (in your terminal), you need to write: :::BlockQuote $ touch package.json ::: Now, insert the npm module ‘body-parser’ inside the file package.json: ```json 1 { 2 "dependencies": { 3 "body-parser": "*" 4 } 5 } ``` :::hint{type="danger"} **Troubleshooting: **It is not necessary to run `npm install` inside the cloud folder because the Back4App server will install it automatically ::: :::: :::ExpandableHeading **app.js** ```javascript 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`- We will use it to add content to head of HTML structure. - `index.ejs`- We will use it to Register and Log in users. - `reset_password.ejs`- We will use it for the user request the Password Reset. :::hint{type="warning"} **Hint: **We will construct the views using Bootstrap, [click here](https://getbootstrap.com/) to read more about it. ::: You can add content to your respective views. You can use the below templates without any hassle: :::CodeblockTabs head.ejs ```nodejs 1 Back4App - Node JS Application 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ``` index.ejs ```nodejs 1 2 3 4 <% include head.ejs %> 5 6 7 77 78 ``` reset\_password.ejs ```nodejs 1 2 3 4 <% include head.ejs %> 5 6 7 38 39 ``` ::: ## 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/). ```nodejs 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{type="warning"} **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. ```javascript 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. :::hint{type="info"} Click on [this link](https://nodeapplication.back4app.io/) 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!