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)

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:

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.

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:

Starting the XAMPP Server

Go to C:\xampp\xampp-control.exe and start the 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)

Starting the React Development Server

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

npm start

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.

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

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.