Using the Full Source Code

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

Video Walkthrough

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)

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

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)

Extracting the files and placing it in the correct folder

1. Go to C:\xampp\htdocs and create a folder named foodomaa

2. Extract all the files(Source Code) that you received from over Google Drive into this folder.

3. Inside the newly create foodomaa folder the contents should look something like this:

Foodomaa folder setup inside C:\xampp\htdocs

Installing the Node Modules

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

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"

Wait for the installation of modules to be completed and then proceed forward.

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)

• Find the file src/configs/website/index.js

• 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

Starting the XAMPP Server

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

Starting Apache and MySQL services

Creating a Database

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

http://127.0.0.1/phpmyadmin/server_databases.php

Create a new Database named foodomaa

Installing Foodomaa

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

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)

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

Starting the React Development Server

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

npm start

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.

The one-time setup is completed, and now you will be able to edit the core React files and customize the application.

Understanding the project structure

Foodomaa is a hybrid application. It uses Laravel 5.8 and an open-source React QuickStart package from Facebook - Create React App (CRA)

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 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)

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.

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.

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 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

• 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:

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

HTTPs in the URL is mandatory before deployment.

Step 3 - Compiling files

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

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:

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

Change the above code to:

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.

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.

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.