Ionic 5 Food Ordering Template
  • Introduction
  • Ionic 5 Food Ordering App and PWA Template
  • Why to use this Template
  • Initial Setup
  • Running the app
  • Template features
    • Screens
      • Login, Signup, Forgot Password
      • Food Ordering Flow
      • Offers Pages
      • Address Pages
      • User Profile and Settings
      • Restaurant and Product Lists
      • Cart Page
      • Search Page
      • Filters
      • Chat
      • Order History
    • Features
      • Geolocation
      • Chat Support Page
      • Google Place Prediction
      • Social Sharing
      • Device Compatibility
  • how to use this template
    • Two ways to use
    • Modifying Code
    • Removing a Page
    • Removing a plugin
    • Integrating Back-end
    • Add More Features
  • how to build app and pwa
    • Building App on Device
    • Deploying app as PWA
  • Extra
    • Troubleshooting
    • FAQs
Powered by GitBook
On this page

Was this helpful?

Running the app

Steps to follow for running your app on browser, device or deploy as PWA

PreviousInitial SetupNextScreens

Last updated 4 years ago

Was this helpful?

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 for more info

Run the app on Browser

Once you have the done, it's time 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.‌

To run the app on browser, run

$ ionic serve

on your command line, inside your project folder. This will build the project and deploy it on a localhost url (usually it is localhost:8100). Your command line will look like this‌

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. Your browser window will open automatically and load the app in a full screen view.‌

To change the app to a device view, right click anywhere on the browser and choose Inspect Elementand choose device mode.‌

More about browser development tools can be found out in following links‌

​​

​​

Chrome Dev Tools
Firefox Dev Tools
docs
initial setup