An eRestro(online food ordering system) will make it possible for you to sell your foods digitally without the involvement of any external portals or the need to pay commission. eRestro provides the possibility of placing orders on your appliation (and you don’t need any technical skills or help from IT specialists), which will enable your customers to place orders for delivery.
Kindely suggest to use npm version 8.1.0 and Node Js version 16.13.0 or current latest version of node.
To start your react web app, we need to setup the react devlopment Enviornment. Install NodeJS on your machine if you don't have it.
NodeJS works as a node package manager behind the scene. It is recommended to download and install the latest version of Node JS from its official site http://nodejs.org/
1. Copy Files : Copy files from the downloaded code to your desired folder. For example : C:\reactjs\eRestro\
2. Open the folder and command line terminal : Open that folder in code editor / terminal and use command line tool i.e. powershell, cmd or any other terminal and navigate to the your project root like C:\reactjs\eRestro\.
3. Install Packages and Dependencies : Hit the below shown command to install all the required dependencies and packages
C:\react\eRestro> npm installOr Install packages via below command in case if you are facing any issues with above command
C:\react\eRestro> npm install --legacy-peer-deps4. Run the App : After successful installation of the dependencies / packages now you are ready to run your project on your local server.
To run fire this command in the terminal again :
C:\react\eRestro> npm start
[ wait ] starting the development server ...
[ ready ] started server on
http://localhost:3000 ...
[ event ] compiled successfully
Now, in the browser go to localhost:3000
5. Your app is live : You can finally browse your react eRestro app somewhere here >> http://localhost:3000.
This step is very much important for web version login and register feature to work. So please follow the below steps carefully.
1. Go to >> Firebase console << .
2. Register a new account or try to log in with existing google accout.
3. Once logged in, you can see firebase console dashboard. Click on Add Project. Provide a project name, and then select country and then after that click on Create Project. For example, see the below image
4. Once the project has been created, it will automatically redirect to Firebase dashboard screen.
5. As eRestro(Web version) is a web project, you need to add web project/application to the firebase project.
6. Go to Authentication and open " Sign-in method " Tab
7. Now at the bottom of the page, in "Authorized domains", localhost and a Firebase domain are automatically added. Here we've to add domain name without http:// and https:// whever eRestro Front End(Web Version) Website will get hosted. If you're using www as prefix of domain name then you must have to add that.
8. Now add your domain with www. as prefix like www.myeRestro.com
9. Go to Project settings in firebase dashboard option.
10. Go to Project settings and scroll down you will find created web App there you find config option that will have firebase settings for front end.
11. here you have to set all details except the two fields 1. databaseURL & 2. measurementId. Here you can set only test word.
12. You need to set this details in eRestro admin panel -> Web Settings page from this Project settings page in firebase dashboard option
1. Go to Google Cloud Platform. Click here
2. Click on console.
3. Select your Firebase Project
4. While following this Offical Documentation there you need to enable two APIs You need to enable 1) Places, 2)Javascript Map API and 3) Geocoding API these APIs Offical Documentation for creating API key
5. Click on Enable to, enable that APIs
6. Go to Credential Tab. you will find your web API keys.
7. copy that key and paste in following file.
eRestro > config.js > YOUR_GOOGLE_MAPS_API_KEY
You can set your API URL which fetches data from the server and a link to partner registration
page here. To configure these
You can find .env file in your root of the project.
# BASE URL of your Admin panel,
# and the API URL which you can find in the admin panel
# please don't forget to add a trailing slash.
## for example :
# REACT_APP_ADMIN_PANEL_URL = "https://erestro-admin-panel.com/"
# API_URL = "https://erestro-admin-panel.com/app/v1/api/"
REACT_APP_ADMIN_PANEL_URL = "https://YOUR.ADMIN.APP/"
REACT_APP_API_URL = "https://YOUR.ADMIN.APP/app/v1/api/"
It is necesary for to setup the Google Maps API key and other settings here in the config.js to
make your site work. To configure these
Go to src\utils\config.js file.
let config = {
// defualt country set
DefaultCountrySelectedInMobile: "in",
//google Places key
YOUR_GOOGLE_MAPS_API_KEY: "Aasdasdaasdfsadfasfsaf6546546j1lE",
};
export default config;
1. Create Folder: create your language folder in this destination public\assets\locales.
2. Create Your Newely Added Language
Labels: In your language folder
create
translation.json file.
In the translation.jsonfile
you can add
your
react web labels.
3. Add Your Language Code: Add your language code in this line.
4. Your Language is Added: Hurrey you successfully add your own language in your react web.
Change Theme color to fit your needs.
Open src\assets\css\style.css file where you can set your desired primary color, border color or light color.
1. Set Url : In Package.json file set your server url where you can host your react web app.
"homepage": "https://myLiveReactsite.com/", 2. Generate Build : To Generate Build Hit the below shown command.
C:\react\eRestro> npm run build3. Run your React Web App on Your Server : first check .htaccess file is there on your server or not. If not then add .htaccess file on your server.
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]4. Add Build Zip File : Upload Your Build Zip File On Your Server.
5. Your app is live : You can finally browse your react eRestro app on your server.
If you are facing any technical issues or challanges while using our system. You can contact us on skype. We are available for technical support from 9.00AM to 6.00PM Indian Standard Time Monday to Friday .