# Using the Full Source Code

Full source code is provided only with an Extended License purchase. 

## Video Walkthrough

{% embed url="<https://youtu.be/GTYvpsFn9xo>" %}

## Setting up the Development Environment

You will need the following installed on your system (Windows/Mac/Ubuntu)

* Node v12.9.0
* NPM v6.10.2 (comes with node v12.9.0)
* XAMPP with PHP v7.2 (You may use any other PHP server like WAMP, XAMPP is recommended though)

{% hint style="danger" %}
If your local system doesn't have the above setup in place, you cannot proceed further.\
The versions should exactly be the same.\
\
The PHP version can be 7.2.x (But nothing less than 7.2 or more than 7.2)

XAMPP should be installed in the default folder of the installation. i.e **C:\xampp**
{% endhint %}

{% hint style="info" %}
**In this example, we will demonstrate with a Windows 10 system.**\
(Other OS setup should be similar, with the exceptions of paths and folder directives)
{% endhint %}

###

### Extracting the files and placing it in the correct folder

1. Go to **`C:\xampp\htdocs`** and create a folder named **`foodomaa`**<br>
2. Extract all the files(Source Code) that you received from over Google Drive into this folder.<br>
3. Inside the newly create foodomaa folder the contents should look something like this:

![Foodomaa folder setup inside C:\xampp\htdocs](/files/-M4CzMRHBCF_sexuoejh)

### Installing the Node Modules

In the same folder (C:\xampp\htdocs\foodomaa) open up a Command Prompt and run the following command:

```bash
npm install
```

This will automatically create a new folder named `node_modules` and install all the dependencies required for the React development.

![Installing dependencies by executing "npm install"](/files/-M4D-wHOT_YCpVxZ0OEZ)

{% hint style="warning" %}
Wait for the installation of modules to be completed and then proceed forward.
{% endhint %}

###

### Setting the API EndPoints

For connecting the Laravel Restful APIs to our React Application, we need to define our local Laravel project URL in our React Application.

* Open the folder `C:\xampp\htdocs\foodomaa` with your favorite code editor (VSCode Recommended)<br>
* Find the file `src/configs/website/index.js`<br>
* The first line of these files defines the `WEBSITE_URL` which needs to be changed according to our local environment setup, which in this case will result in:

![Changing the WEBSITE\_URL](/files/-M4D25oKShv7_1gTR9XL)

### &#x20;Starting the XAMPP Server

Go to C:\xampp\xampp-control.exe and start the Apache and MySQL Services

![Starting Apache and MySQL services](/files/-M4D3Wu8-1W-rpVSUcJ0)

### Creating a Database

Go to your favorite browser (Google Chrome recommended) and hit the following URL:

```bash
http://127.0.0.1/phpmyadmin/server_databases.php
```

Create a new Database named foodomaa

![](/files/-M4D4g4jwM819qoVRZYd)

### Installing Foodomaa

Now that we have our database setup, go to URL:

```bash
http://127.0.0.1/foodomaa/public/install
```

Then follow the installation wizard.

#### For XAMPP, the database credentials are:

* Host: 127.0.0.1
* Port: 3306
* Database Name: foodomaa
* Database User: root
* Password: (Leave Empty)

{% hint style="success" %}
After the setup, you will be able to login to your Admin Dashboard using the credentials you set during the installation process.\
\
The Admin Login URL is: **<http://127.0.0.1/foodomaa/public/auth/login>**
{% endhint %}

### Starting the React Development Server

In the folder C:\xampp\htdocs\foodomaa open up a Command Prompt and run the following command:

```bash
npm start
```

{% hint style="info" %}
This will take about 20 seconds to 1 minute (Depending on your system's performance) to start the development server.

Once the development server has started, your system's default browser window will automatically open up with **<http://localhost:3000>** running on its tab.
{% endhint %}

{% hint style="success" %}
The one-time setup is completed, and now you will be able to edit the core React files and customize the application.
{% endhint %}

## Understanding the project structure

Foodomaa is a hybrid application. It uses [**Laravel 5.8**](https://laravel.com/docs/5.8) and an open-source React QuickStart package from Facebook - [**Create React App (CRA)**](https://github.com/facebook/create-react-app)

The files from Laravel 5.8 and CRA are merged together.

The common folder that both of these application shares is **/public** directory

As you can see, there are two index files in /public directory

* index.html
* index.php

The file index.html is the entry point to the React Application after you run npm start and visit \*\*[http://localhost:3000\*\*\\](https://docs.foodomaa.com/advanced-usage/http:/localhost:3000**\\)
\
The file index.php is the entry point to the Laravel Application when you Run XAMPP's Apache and visit **<http://127.0.0.1/foodomaa>**

## **Making changes to the Application**

### React Application

All the source code for the react application (Customer and the Delivery Application) is inside the **/src** folder.\
\
After running the development server with **npm start** the system starts the live tracking of the files with Hot Reloading, that means whenever any changes are made to any files inside the **/src** folder, the dev server will recompile the code and auto-reload the browser's tab (<http://localhost:3000>)<br>

### Laravel Application

We have followed the standard laravel project structure.\
**Example**

* Models are present in **/app** folder.
* Controllers are present in **/app/Http/Controllers** folder.
* Web routes are present in **/routes/web.php** file.
* The Restful API routes are present in **/routes/api.php** file.
* The Database migrations are present in **/database/migrations** folder.
* The Laravel blade files for the Admin and the Restaurant Dashboard are present in **/resources/views** folder.

### Syncing with the uploaded images

When you upload any image files from the Admin/Restaurant Dashboard, the files are store in **/assets** directory. But the react development server will only be looking for files inside the **/public** folder.\
Hence is an exact replica of the **/assets** folder is present inside the **/public** directory as well.\
\
So, to fix this (just in the dev environment, this is not required on live website) you will need to copy the whole **assets** folder and paste it to the **/public** folder after you create a restaurant, item, upload logo, favicons, splashscreen or any form of image that needs to be shown on the Customer/Delivery Application.

## Deploying your customized application

Prior to deployment of your changes made to the application to your live website, you will need to install the standard non-edited Foodomaa application on your live server. \
[Here's how you can install it.](/installation/installation-on-server.md)

{% hint style="warning" %}
This tutorial assumes that your website is fully working on a non-edited version of Foodomaa.\
\
If you have customized v1.8.0 source code, the live server should already be running v1.8.0 un-touched version provided from CodeCanyon.
{% endhint %}

####

### Step 1 - Changing the Version

Go to package.json file present in the root directory (C:\xampp\htdocs\foodomaa) and increment the version number.\
Foodomaa follows [Semantic Versioning](https://semver.org) of every release.\
So, prior to your every deployment, you will need to increment the version number as 1.8.0, 1.8.1, 1.8.2, ..., 1.9.0, 1.9.1 and so on...

### Step 2 - Changing the API EndPoints

* Find the file `src/configs/website/index.js`<br>
* The first line of this files defines the `WEBSITE_URL` which needs to be changed according to your website URL

For Example: if your website is: my-website.com, then the first line of the file needs to be:

```jsx
export const WEBSITE_URL = "https://my-website.com";
```

{% hint style="warning" %}
HTTPs in the URL is mandatory before deployment.
{% endhint %}

### Step 3 - Compiling files

In the folder C:\xampp\htdocs\foodomaa open up a Command Prompt and run the following command:

```jsx
npm run build
```

This will create a new **build** folder inside  **C:\xampp\htdocs\foodomaa** and generate the compiled/production-ready files.

### Step 4 - Editing the Service Worker file

* Go to the newly created **build** folder inside and find the file **service-worker.js**
* Open the file with your Code Editor and find the following code:

```javascript
workbox.routing.registerNavigationRoute("/index.html", {
  
  blacklist: [/^\/_/,/\/[^\/]+\.[^\/]+$/],
  
});
```

Change the above code to:

```javascript
workbox.routing.registerNavigationRoute("/index.html", {
  
  blacklist: [/^\/public/, /^\/cpanel/, /^\/assets/],
  
});
```

###

### Step 5 - Zipping the file for deployment

From inside the build folder, zip the following folders/files and name the zip **build.zip** (You can name it anything)

* static (Folder)
* asset-manifest.json (File)
* index.html (file)
* precache-manifest (file)
* service-worker.js (file)

Then upload this **build.zip** file to your website's root directory on your live server and extract the files.

{% hint style="info" %}
Step 5 only shows the files needs to be zipped and uploaded for react application deployment, if you have made changes in the Laravel side of the application (models, databases, views, controllers), all these files must be zipped and uploaded to their respective directories in the server.
{% endhint %}

{% hint style="info" %}
If you have created Database Migrations on the Laravel side of the application, you will need to run "php artisan migrate" command on the server using SSH or, after deployment, you can Go to **Admin > Settings > Fix Update Issues.**\
\
Doing this will automatically run the new migrations.
{% endhint %}


---

# 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://docs.foodomaa.com/advanced-usage/using-the-full-source-code.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.