Webhosting

This document intends to illustrate how to use Back4App’s Webhosting. So, let’s start!

Step 1 – Enable Webhosting

After login, click on Features and look for this section and click on SERVER:

 

 

Webhost

Enable the ‘Activate Hosting’ box. Then, add your desired ‘Subdomain name’:

web_webhosting

Hit the ‘Save’ button and you’re set with the Back4App part. Now, let’s create a few pages and templates.

 

Step 2 – Create static page

Again, go to your Features and find this item:

Click on SERVER and you’ll see the cloud code page. This is where every page is uploaded. Now, we have to upload the files to the folder. Let’s create a simple file named ‘index.html’ that looks like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Back4App rocks!</title>
  </head>
  <body>
    <h1>
    Back4App hosts pages too!
    </h1>
  </body>
</html>

Upload this file to the cloud using the file chooser that is in the page. After the upload, the file will be in the public folder:

 

 

Click on the Save button and it should be working. Just visit your endpoint:

web_webtest

Now, we will create content that uses a template engine.

 

Step 3 – Create page with templates

To illustrate it, we will create one new express.Router. Create a new folder named ‘routers’ and add a file named ‘index.js’. Add the following code inside the file:

// Importing express
var express = require('express');

// Creating a Router
var route = express.Router();

// Defining a route that binds the GET method
route.get('/', function(req, res) {
  // This is the code that renders the template
  res.render('index', {testParam: 'Back4Apper'});
});

module.exports = route;

After you’ve done that, we will need to create a file named ‘app.js’ inside the cloud. It has to be this name, due to the fact that Parse Server instance searches for this exact name. Add the following code to the file:

// Helper modules that will be used
var path = require('path');
var bodyParser = require('body-parser')

// This imports the Router that uses the template engine
var index = require('./routers/index');

// Sets the template engine as EJS
app.set('view engine', 'ejs');

// This defines that the 'views' folder contains the templates
app.set('views', path.join(__dirname, '/views'));

// These options are necessary to 
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

// This bind the Router to the / route
app.use('/', index)

After that, we have to create the templates. Create a folder named ‘views’, as we defined in the ‘app.js’ file, and add the following code to a file named ‘index.ejs’:

<html>
  <head>
    <title>Back4App Rocks</title>
  </head>
  <body>
    Hello, <%= testParam %>!
  </body>
</html>

Hit the save button and you’re set. Here is a screenshot of the working page:

web_working

Back4App supports all the default template engines that come with express and ‘pug’ as a templating engine. That’s it for the webhosting!