Running the App (Web Browser)
Steps to follow for running your apps on browser, device or deploy as PWA.
These steps are common to both the apps in this platform. You will be redirected to this section again, if you skip this initially.
Remember to enter your own GOOGLE API KEY in the source code in the place of YOUR_API_KEY. Without this api key, many functionalities might not work, especially maps. Check the docs for more info
Install the app dependencies
After you have Ionic installed, you have to install all the dependencies required by the app. These dependencies are listed in package.json file in the root of the project.
To do this :
Open your favourite code editor and open the app folder which is ION4-GROC-ADM-FB-IONIC5 in this case. It should show the following files.
Now open a terminal and make sure that your folder name is shown at the terminal to ensure that you are running the following commands inside your ionic app folder path.
Run the following command
The screen below shows npm install running in the VS Code terminal.
If you are using latest NPM, you might see an audit report after the installation is completed. If you see any vulnerability marked as high , please contact us regarding the same.
Run the app on Browser
Make sure you have the initial setup and above steps done, before you try to run your app.
First we'll run the app in development environment.
In development environment, your app runs in a browser (of your choice).
It is recommended to make all changes and development while running the app on browser . Running on device while developing will be too time consuming.
Make sure that your folder name is shown at the terminal to ensure that you are running the following commands inside your ionic app folder path.
The screen below shows ionic serve running in the VS Code terminal.
This will build the project and deploy it on a localhost url (usually it is localhost:8100).
The initial deploy process will take some time when it creates "chunks" of code pieces. Once you see compiled successfully , you are good to go.
After successfully running the app, your browser window will open automatically and load the app in a full screen view, as shown below.
Click on Products and check to see that you see a similar Products page, as given below.
Click on Category and check to see that you see a similar Category page, as given below.
Click on Order and check to see that you see a similar Order page, as given below.
Click on Offer and check to see that you see a similar Offer page, as given below.
Similarly Click on Users and check to see list of Users.
Click on Select Themes and check different themes available, as given below.
Next steps
For Complete setup, checkout the Section Grocery Dashboard And App Complete Setup
Last updated
