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 next web app, we need to setup the next 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:\nextjs\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:\nextjs\eRestro\.
3. Install Packages and Dependencies : Hit the below shown command to install all the required dependencies and packages
C:\next\eRestro> npm installOr Install packages via below command in case if you are facing any issues with above command
C:\next\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:\next\eRestro> npm run dev
[ 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 next 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 Official Documentation, you need to enable three APIs: 1) Places API, 2) JavaScript Map API, and 3) Geocoding API Official Documentation for creating API key
5. Click on Enable to enable these APIs
6. Go to Credential Tab. You will find your web API keys.
7. Copy that key and paste it in the following file:
eRestro > .env > NEXT_PUBLIC_MAP_API_KEY
In addition to the Map API key, configure these environment variables in your .env file:
1. NEXT_PUBLIC_BASE_URL
This is the base URL for your API. Obtain this from your server configuration or backend team.
https://your backend url/app/v1/api
2. NEXT_PUBLIC_COUNTRY_CODE
Set this to your country code, e.g., "in" for India.
3. Firebase Configuration Values
To get these values:
4. NEXT_PUBLIC_SSR
Set this to "false" to disable server-side rendering if not required. Adjust based on your project needs.
5. NEXT_PUBLIC_MAP_API_KEY
You can get your Map API key from the Google Cloud Console:
After obtaining the values, replace the placeholder text (xxxxxxxxxxxxxxxxxxxxxxxx) with the actual values in your .env file.
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.
NEXT_PUBLIC_BASE_URL=xxxxxxxxxxxxxxxxxxxxxxxx
NEXT_PUBLIC_COUNTRY_CODE="in"
NEXT_PUBLIC_FIREBASE_APIKEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
NEXT_PUBLIC_FIREBASE_AUTHDOMAIN = "xxxxxxxxxxxxxxxxxx"
NEXT_PUBLIC_FIREBASE_PROJECTID = "xxxxxxxxxxxxxxxxx"
NEXT_PUBLIC_FIREBASE_STORAGEBUCKET = "xxxxxxxxxxxxxxxxxxxxx"
NEXT_PUBLIC_FIREBASE_SENDER_ID = "xxxxxxxxxxx"
NEXT_PUBLIC_FIREBASE_APPPID = "xxxxxxxxxxxxxxxxxxxxxxxxxx"
NEXT_PUBLIC_FIREBASE_MEASUREMENTID = "xxxxxxxxxxxxxxx"
NEXT_PUBLIC_SSR = "false"
NEXT_PUBLIC_MAP_API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxx"
It is necesary for to setup Currency Settings and other settings here in the config.js to
make your site work. To configure these
Go to src\@core\config.js file.
export const currencySettings = {
currencySymbolPosition: "start",
decimalPoints: 2,
currencyFormate: ",",
currencySymbol: "₹",
};
1. Create Folder: create your language folder in this destination src\locales.
2. Create Your Newely Added Language
Labels: In your language folder
create
translation.json file.
In the translation.jsonfile
you can add
your
next 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 next web.
Change Theme color to fit your needs.
Open src\theme.js file where you can set your desired primary color, danger color or light color.
1. Set Url : In Package.json file set your server url where you can host your next web app.
"homepage": "https://myLivenextsite.com/", 2. Generate Build : To Generate Build Hit the below shown command.
C:\next\eRestro> npm run build3. Add Build Zip File : Upload Your Build Zip File On Your Server.
4. Your app is live : You can finally browse your next eRestro app on your server.
If you are facing any technical issues or challanges while using our system. You can contact us on teams. We are available for technical support from 9.00AM to 6.00PM Indian Standard Time Monday to Friday .