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.
Click on Get started. It should show you the following screen to Set up Firebase Hosting. Now click on Next.
After you click on Continue to console at Step 3 Deploy to Firebase Hosting. It should show you the following screen of Hosting Dashboard
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
The screen below shows ionic build --prod running in the VS Code terminal.
Run the following command
The screen below shows firebase login running in the VS Code terminal.
It should show you the following message Already logged in as "your email id".
Caution : Please Log in to you google account in your browser to continue this step.
Firebase console settings
Go to your Firebase console and click on “Project settings” as shown below.
You should see the following screen. Copy Project ID shown as selected below.
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.
Run the following command
The screen below shows firebase init running in the VS Code terminal.
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.
The screen will show Firebase initialization complete!
Run the following command
The screen below shows firebase deploy running in the VS Code terminal.
The screen will show Deploy complete! Click on Hosting URL as shown below.
This will deploy your app on a Firebase URL such as 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
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
Testing the app
Please note that this app in not running on localhost now.
The Products section should show you the following screen where the product you added will appear as follows.
The Category section should show you the following screen where the category you added will appear as follows.
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.
Check the offers entry to verify that the offers you created in the Dashboard is added to Database.
Check the products entry to verify that the products you created in the Dashboard is added to Database.
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 section to move to next major step.
Last updated
