Comment on page
Using the Full Source Code
Full source code is provided only with an Extended License purchase.
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)
- 1.Go to
C:\xampp\htdocsand create a folder namedfoodomaa - 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
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.
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\foodomaawith your favorite code editor (VSCode Recommended) - Find the file
src/configs/website/index.js - The first line of these files defines the
WEBSITE_URLwhich needs to be changed according to our local environment setup, which in this case will result in:
Changing the WEBSITE_URL
Go to C:\xampp\xampp-control.exe and start the Apache and MySQL Services
Starting Apache and MySQL services
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
Now that we have our database setup, go to URL:
http://127.0.0.1/foodomaa/public/install
Then follow the installation wizard.
- 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
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.
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
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)
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.
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.
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.
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...
- Find the file
src/configs/website/index.js - The first line of this files defines the
WEBSITE_URLwhich 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.
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.
- 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/],
});
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.
Last modified 2yr ago