# Install the  WEB PLATFORM

## Video Guide&#x20;

{% embed url="<https://www.loom.com/share/6dce0553821444f5aef44304636d07b4>" %}

> The video uses github - now we use gitlab. But steps are similar. Follow the written docs.

## Make Firebase and Paddle Account

{% content-ref url="/pages/-LsMAAxaauvuRoNp9E1g" %}
[Firebase Account setup](/react-app-builder/easy-setup-netlify/firebase-account-setup.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LsMBb3MOBh34\_ft0YoU" %}
[Paddle Account](/react-app-builder/easy-setup-netlify/paddle-account.md)
{% endcontent-ref %}

## Become our collaborator on [GitLab](https://gitlab.com/)

By becoming our collaborator, you will always have access to the latest code. [Send us](https://help.mobidonia.com/#reactappbuilder) your [GitLab](https://gitlab.com/) username and purchase code.&#x20;

Then we will add you as collaborator on our repository.

[Fork it. ](https://docs.gitlab.com/ee/user/project/repository/forking_workflow.html#creating-a-fork)

Then you will have your own clone of the App Builder site.&#x20;

{% hint style="info" %}
If you don't want to wait for us to give you access, you can [create new private repository with the code you downloaded](https://docs.gitlab.com/ee/gitlab-basics/create-project.html) from Code Canyon (Builder Folder). But this way you lose the opportunity to sync with our source code when we release new version.&#x20;
{% endhint %}

## Publish on Netlify

[Create account on Netlify.](https://www.netlify.com/)

Click on the button "New GIT Site"&#x20;

Then select GitLab and connect with your account where you have forked the repository.&#x20;

For **Build command** enter:   `unset CI && node fillenv.js && npm run build:cloud`

**Environment variables**

{% hint style="success" %}

* [ ] NODE\_VERSION                         - 12.22.7
* [ ] REACT\_APP\_appName              - Your Project name
* [ ] REACT\_APP\_isSaaS                    - true
* [ ] REACT\_APP\_adminEmail           - Your desired admin email
* [ ] REACT\_APP\_purchaseCode      - Your CodeCanyon purchase code
* [ ] REACT\_APP\_databasePrefix     - New Firebase DB have **-default-rtdb** prefix
  {% endhint %}

{% hint style="info" %}
&#x20;Firebase have made changes in their firebase database link structure. So new databases are operating under <https://PROJECTI&#x44;**-default-rtdb**.firebaseio.com/>. In that case, you need to deine new variable&#x20;

* [ ] REACT\_APP\_databasePrefix
  {% endhint %}

{% hint style="success" %}

* [ ] REACT\_APP\_apiKey                    - Firebase Api Key ( from console.firebase.com )
* [ ] REACT\_APP\_appId                      - Firebase App ID ( from console.firebase.com
* [ ] REACT\_APP\_projectId                - Firebase Project ID ( from console.firebase.com )
  {% endhint %}

{% hint style="success" %}

* [ ] REACT\_APP\_privateKey             - Private key ( from service account json )
* [ ] REACT\_APP\_serviceAccount . - client\_email ( from service account json )
  {% endhint %}

{% hint style="success" %}
Now on Netlify, click on "**Deploy new site**".&#x20;
{% endhint %}

In you project, register with the admin email you have provided.&#x20;

###

### Configure React App Builder

{% tabs %}
{% tab title="Point domain to Netlify" %}
Now you site is up and running. But it is running on a subdomain from Netlify.&#x20;

And you would want to have it under your domain. ex. builder.MYDOMAIN.com

NOTE: If you use Cloud Version - we will email you instructions.&#x20;

This is supper easy. &#x20;

1. **Go in Domain Settings**

![](/files/-M01alwO0BbbJr9apuxx)

2\. **Add custom domain**

![](/files/-M01atO7CRTE6t30c7pa)

![](/files/-M01ayYfW0A9LzcEpaNd)

3\. **Receive DNS info. Enter the required DNS changes in your cPanel, Domain Register or DNS provider.**

![](/files/-M01b6UDgctwoHK0sDka)
{% endtab %}

{% tab title="Paddle Webhook" %}
In your Paddle, go in **Developers Tools - > Alerts/Week hooks**\
Paste the Url to receive web hooks \
\
`https://YOUR_DOMAIN/.netlify/functions/paddle`<br>

You can also enter your email, to be notified.\
Select all Subscription events to be notified for.
{% endtab %}

{% tab title="Pricing options" %}
Set up pricing by clicking on your **Avatar -> Pricing.**&#x20;

![](/files/-M01bh2W6VPfLd42aJMW)
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Your Builder Site is Active now. You can accept new customers now.
{% endhint %}

**Local (** On your computer **)**: Makes iPhone apps ( Mac Only ) and Android Apps (MAC or Windows) ) <br>

{% content-ref url="/pages/-LsME9QERMB3lngdJ7Yq" %}
[Run App Producer locally](/react-app-builder/local/run-app-producer-locally.md)
{% endcontent-ref %}

### Update to latest repository code.

With GitLab we can configure automatic code syn so your fork always has the latest code automatically. To do that.

[Send us ](https://help.mobidonia.com/#reactappbuilder)

1. GitLab Username
2. Forked project link
3. [Access token](https://gitlab.com/help/user/profile/personal_access_tokens.md#creating-a-personal-access-token) with **api** access

And your code and instance on Netlify will be always up to date. No manual action needed.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mobidonia.gitbook.io/react-app-builder/easy-setup-netlify/easy-install-on-netlify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
