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.
** Required **
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.
This will add all the demo data, that the landing page requires.
** Totally Optional **
Open the folder SaaS Landing Page / app-builder-landing in Terminal or Command Prompt.
This will open your site in the browser locally.
npm run build
This will produce the build folder
In this step, you have to run several commands for deployment.
select hosting, and hit the SPACE button
select your firebase database
- single page
- don't overwrite
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.
- Go inside the build folder . Full Path ( Builder/build )
- Zip all the files
- In your hosting, create domain or subdomain. ( This will be your landing page, so it can be directly in the domain, not in subdomain )
- Go in the File Manager
- Upload the Archive.zip ( the produced zip )
- 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