Landing page: Setup and Publish

Setup the landing page folder

In the source code that you got from CodeCanyon there are several folders. 

The Landing Page code is located in SaaS Landing Page / app-builder-landing folder.

Set up the demo data

In the source code you got from CodeCanyon in the folder SaaS Landing page you will find data.json file.

data.json contains the data that will be displayed on the landing page. Later you will learn how to manage it.

Open your firebase console and navigate to the Realtime Database, you previously set it up. 

Create a new node: rab_saas_site with some test data just to create the node.


Then click on the newly created element.

On the top right, there is a "more" menu button, that will show the import functionality. 

Import data.json


This will add all the demo data, that the landing page requires.

Create a landing page for your portal 

** Totally Optional **

Open the folder  SaaS Landing Page / app-builder-landing in Terminal or Command Prompt.

Then Run

npm install


 npm start

This will open your site in the browser locally. 

Next run 

npm run build

This will produce the build folder

Option 1: Publish on Firebase hosting

In this step, you have to run several commands for deployment.


firebase init

select hosting, and hit the SPACE button

select your firebase database

enter build


  • single page
  • don't overwrite

and run

firebase deploy

Option 2: Deploy on your own server or hosting via FTP or FileManager

Firebase Hosting is ok, but there are use cases that you want to upload the React App Builder and the landing pag on your own Hosting / Server.

In this example, I will upload the build folder via File Manager. So let's start. 

  1. Go inside the  build folder .   Full Path ( Builder/build )
  2. Zip all the files
  3. In your hosting, create domain or subdomain. ( This will be your landing page, so it can be directly in the domain, not in subdomain )
  4. Go in the File Manager
  5. Upload the ( the produced zip )
  6. Extract it with the File manager Unzip Functionality


Visit your domain or subdomain. The landing page should be functional there. 

In the end after all steps your landing page should looks as in the picture


Next: Manage Landing page and Pricing Plans