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.

cGAmUfOXYm8dSwiJaQ34fv2tspwpEbL1aPswFMjd.png

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

tngNupH8lKIbzUsiFZBmJUHAh7sTDKPbImlBQndo.png

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

and

 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.

Run

firebase init

select hosting, and hit the SPACE button

select your firebase database

enter build

Choose

  • 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
    XzU3eWlewhmBTmwVIT3XJz1ZOgfofFFhSfCI0qiA.png
  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 Archive.zip ( the produced zip )
  6. Extract it with the File manager Unzip Functionality

j2lcoRJ4aOz49sqLdXsRg9pJVmpAQPqVHsI1hpsU.png

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

5K6M8GinjOzi7sUtHhCzzNMVAoJxq4WqDPDUvDzJ.png


Next: Manage Landing page and Pricing Plans