# Hosting on Firebase ### Firebase console settings Go to your **Firebase** **Console** to complete the following steps. Click on **Hosting** shown under the **Develop** section.It should show you the following screen. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5M-hiSSMkNabKHt6Hs%2F-M5M8oR_8egF4OXF4rIC%2FScreenshot%202020-04-19%20at%209.04.10%20PM.png?alt=media\&token=ea02139e-ac78-4796-9373-d68d3eec8ddc) \ Click on **Get** **started.** It should show you the following screen to **Set** **up** **Firebase** **Hosting**. Now click on **Next.** ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5M-hiSSMkNabKHt6Hs%2F-M5M9V5kZdvJwUCI_JFE%2FScreenshot%202020-04-19%20at%209.03.18%20PM.png?alt=media\&token=1cd8b2d9-8f7b-412e-b6a1-ed02861f6240) After you click on **Continue to console** at Step 3 **Deploy to Firebase Hosting.** It should show you the following screen of **Hosting** **Dashboard** ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5M-hiSSMkNabKHt6Hs%2F-M5MB1MBm93qBG-g7_VE%2FScreenshot%202020-04-19%20at%209.05.38%20PM.png?alt=media\&token=074397a3-4aff-40b5-a94a-ef4d594bdded) ### Project running in Code editor Go to **ION4-GROC-ADM-FB-IONIC5** app folder running in VS Code to complete the following steps. 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 ``` ION4-GROC-ADM-FB-IONIC5 $ ionic build --prod ``` The screen below shows **ionic build --prod** running in the VS Code terminal. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5QslLn71Dy7iVyqO-c%2F-M5Qx4maUeWUgv4IkUAY%2FScreenshot%202020-04-19%20at%209.55.16%20PM.png?alt=media\&token=269e5f18-6cbe-4554-a745-887a97a4e825) Run the following command ``` ION4-GROC-ADM-FB-IONIC5 $ firebase login ``` The screen below shows **firebase login** running in the VS Code terminal. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5QslLn71Dy7iVyqO-c%2F-M5QxAmmDdvPG71OjrlD%2FScreenshot%202020-04-19%20at%209.56.53%20PM.png?alt=media\&token=e929814b-17ff-4faf-a2ca-90559f433ca5) It should show you the following message **Already logged in as** "your email id". {% hint style="danger" %} **Caution** : Please **Log in** to you google account in your browser to continue this step. {% endhint %} ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5QySix_F8QZRRh6nSt%2F-M5QyWzyx0tF6UhfkIhO%2FScreenshot%202020-04-20%20at%2012.22.17%20PM.png?alt=media\&token=f10e942a-b1e7-47a0-8814-b526326de2d9) ### Firebase console settings Go to your **Firebase console** and **c**lick on “Project settings” as shown below. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5QySix_F8QZRRh6nSt%2F-M5QycLUhBX9m1kdmGDE%2FScreenshot%202020-04-20%20at%2012.22.37%20PM.png?alt=media\&token=cb2ac0d8-701b-43a6-9c87-cad23c9f86a1) You should see the following screen. Copy **Project ID** shown as selected below. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5QySix_F8QZRRh6nSt%2F-M5QyguNMTtlA93Txhj3%2FScreenshot%202020-04-20%20at%2012.24.11%20PM.png?alt=media\&token=4f8e6415-1e72-4c9d-b4e8-36b82b626234) ### Project running in Code editor Open the project in your code editor and navigate as follows:- www -> .firebaserc The code to be replaced is shown and highlighted below. Replace the highlighted code below with the **Project ID** you copied in previous step. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5QySix_F8QZRRh6nSt%2F-M5QyxanphlmAxJsigiI%2FScreenshot%202020-04-20%20at%2012.27.28%20PM.png?alt=media\&token=0ff4160a-04e6-4475-9179-5dbc835fc1d3) Run the following command ``` ION4-GROC-ADM-FB-IONIC5 $ firebase init ``` The screen below shows **firebase init** running in the VS Code terminal. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5QySix_F8QZRRh6nSt%2F-M5Qz7NVAy9-r7qUtS8c%2FScreenshot%202020-04-20%20at%2012.28.20%20PM.png?alt=media\&token=ffb3e6f4-3083-4b9a-a5e0-c6543fffdf65) The system will ask you the following things: > **What do you want to use as your public directory?** > > Please write **www** > > **Configure as a single-page app (rewrite all urls to /index.html)?** > > Please write **Yes** > > **File www/index.html already exists. Overwrite?** > > Please write **N** The screen below shows the questions discussed above. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5QySix_F8QZRRh6nSt%2F-M5QzLqGjrvBZoA7u_Ct%2FScreenshot%202020-04-20%20at%2012.30.33%20PM.png?alt=media\&token=a4442bbe-7600-4da1-b5cf-0c608f051ccb) The screen will show **Firebase initialization complete!** Run the following command ``` ION4-GROC-ADM-FB-IONIC5 $ firebase deploy ``` The screen below shows **firebase deploy** running in the VS Code terminal. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5QySix_F8QZRRh6nSt%2F-M5QzYDVAB9JPGJR3caU%2FScreenshot%202020-04-20%20at%2012.31.16%20PM.png?alt=media\&token=34fcc659-0c15-424e-8b86-7d7a2365c9c0) The screen will show **Deploy complete!** Click on **Hosting** **URL** as shown below. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5QySix_F8QZRRh6nSt%2F-M5QzuyySc9p8u6KgfwV%2FScreenshot%202020-04-20%20at%2012.33.20%20PM.png?alt=media\&token=696dac25-3228-4845-86c3-391db714880e) This will deploy your app on a Firebase URL such as [https://grocerydashboard.firebaseapp.com](https://grocerydashboard.firebaseapp.com/) where you will see your app running perfectly. The Firebase console will show the deployment like this For a more detailed step-by-step guide on PWA deployment,[ check this blog​](https://enappd.com/blog/pwa-features-in-ionic-4/102/) When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers and features like Geolocation, etc. For more information on PWA related option in `firebase.json` , check [here](https://firebase.google.com/docs/hosting/full-config#section-full-firebasejson) ### Testing the app Please note that this app in not running on localhost now. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5RExHwbUeg6WxRrGyC%2F-M5RHRUxRzRTMjAxYehi%2FScreenshot%202020-04-21%20at%203.59.54%20PM.png?alt=media\&token=07bf7e72-028f-45be-8c17-bd1c07157db6) The **Products** section should show you the following screen where the product you added will appear as follows. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5RHUUA0yB-U1NKvSAI%2F-M5RHyuvtHcxCUn3tj5k%2FScreenshot%202020-04-21%20at%204.02.17%20PM.png?alt=media\&token=a1dc7abf-9221-4e6b-8f11-6ccf29ac21e2) The **Category** section should show you the following screen where the category you added will appear as follows. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5RHUUA0yB-U1NKvSAI%2F-M5RICwrvTsTuCCdwvOL%2FScreenshot%202020-04-21%20at%204.03.21%20PM.png?alt=media\&token=a5c74eb7-2ca7-4cf3-9e98-1a09dacc0ba4) Go to your **Firebase console** and click on **Database** shown under the **Develop** section.It should show you the following screen. Check the **categories** entry to verify that the category you created in the Dashboard is added to Database. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5R1Q-yONnkz9ZaJAMf%2F-M5R2VAU2X2Onz6CpzBN%2FScreenshot%202020-04-20%20at%2012.38.56%20PM.png?alt=media\&token=61d41016-9e2e-408a-a5d6-89e67ea60e9d) Check the **offers** entry to verify that the offers you created in the Dashboard is added to Database. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5R2YFawg6ZV3cxRx_d%2F-M5R3-gf96we9ladI7tS%2FScreenshot%202020-04-21%20at%202.56.09%20PM.png?alt=media\&token=f20342fd-79fd-46ca-a675-61e8c81200a9) Check the **products** entry to verify that the products you created in the Dashboard is added to Database. ![](https://49959285-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqKJPcdFUudMSgr6xGy%2F-M5R2YFawg6ZV3cxRx_d%2F-M5R3APgktflIvMrNAcn%2FScreenshot%202020-04-21%20at%202.55.43%20PM.png?alt=media\&token=402da079-cd48-4a36-acd0-57ee9fa94974) ### ### Completed Grocery Dashboard app setup Now we have successfully run the **Grocery Dashboard** app. We need to setup **Grocery App** to complete the next steps. Go to the [Grocery App - Setup](https://enappd.gitbook.io/ionic-grocery-shopping-app-platform/how-to-use-this-starter-1/grocery-app-setup) section to move to next major step. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://enappd.gitbook.io/ionic-grocery-shopping-app-platform/firebase-setup/hosting.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.