{"id":89716,"date":"2019-03-26T10:00:12","date_gmt":"2019-03-26T08:00:12","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=89716"},"modified":"2019-03-22T18:02:46","modified_gmt":"2019-03-22T16:02:46","slug":"angular-firebase-hosting-example","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html","title":{"rendered":"Angular Firebase Hosting Example"},"content":{"rendered":"<p>Welcome readers, in this tutorial, we will learn the basic concepts to host an angular application on the firebase platform.<\/p>\n<h2>1. Introduction<\/h2>\n<ul>\n<li><strong>Angular<\/strong> is a TypeScript-based open-source framework that helps developers build single page applications<\/li>\n<li>Offers Object-oriented features and supports the dynamic loading of the pages<\/li>\n<li>Supports Two-way data-binding, Property (<code>[]<\/code>), and Event (<code>()<\/code>) binding techniques<\/li>\n<li>Supports command-line-interface to easily initiate and manage the angular projects from the command line<\/li>\n<\/ul>\n<h3>1.1 Firebase<\/h3>\n<ul>\n<li><strong>Firebase<\/strong> is a simple and user-friendly mobile and web application development platform developed by Google<\/li>\n<li>Supports the NoSQL cloud database which provides a mechanism for the storage and retrieval of data<\/li>\n<li>It offers,\n<ul>\n<li>Real-time synchronization of data meaning every change is automatically updated to the connected clients<\/li>\n<li>Scalability across multiple databases<\/li>\n<li>Different authentication techniques such as anonymous, password, or social<\/li>\n<li>Application deployment on the firebase servers<\/li>\n<li>Storing the documents in the json format<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Now open the visual studio code and let us see how to implement this tutorial in angular and host it on a firebase platform.<\/p>\n<h2>2. Angular 6 Firebase Hosting Example<\/h2>\n<p>Here is a systematic guide for implementing this tutorial.<\/p>\n<h3>2.1 Tools Used<\/h3>\n<p>We are using Visual Studio Code, and Node Terminal to compile and execute the angular code on a browser. In addition, we will also require a Firebase account to host our application.<\/p>\n<h3>2.2 Project Structure<\/h3>\n<p>In case you are confused about where you should create the corresponding files or folder, let us review the project structure of the angular application.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"290\" height=\"618\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular-firebasehosting-example-project-structure-img-1-1.jpg\" alt=\"Fig. 1: Application Structure\" class=\"wp-image-89735\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular-firebasehosting-example-project-structure-img-1-1.jpg 290w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular-firebasehosting-example-project-structure-img-1-1-141x300.jpg 141w\" sizes=\"(max-width: 290px) 100vw, 290px\" \/><figcaption>Fig. 1: Application Structure<\/figcaption><\/figure>\n<\/div>\n<h2>3. Creating Angular application<\/h2>\n<p>Follow the below steps to initiate a new Angular application and run it on your local system.<\/p>\n<h3>3.1 Using Angular CLI to Create project<\/h3>\n<p>Run the following command in the NPM console to create a new angular project.<\/p>\n<pre class=\"brush:plain; wrap-lines:false;\">&gt; ng new angular-firebase-example\n<\/pre>\n<p>A folder with the name <em>angular-firebase-example<\/em> will be created and the initial project structure is created as shown in Fig. 1. Developers can make the required changes and have completed that they can enter the project directory.<\/p>\n<pre class=\"brush:plain; wrap-lines:false;\">&gt; cd angular-firebase-example\n<\/pre>\n<p>And test if the application is working or not.<\/p>\n<pre class=\"brush:plain; wrap-lines:false;\">&gt; ng serve -o\n<\/pre>\n<p>This command will start the server and make the application available at the localhost url (i.e. <code>http:\/\/localhost:4200<\/code>). Open your favorite browser and hit the angular application url to display the welcome page of the application as shown in Fig. 2.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"720\" height=\"144\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/localhost-angular-example-project-demo-img-1-1.jpg\" alt=\"Fig. 2: Welcome Page\" class=\"wp-image-89736\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/localhost-angular-example-project-demo-img-1-1.jpg 720w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/localhost-angular-example-project-demo-img-1-1-300x60.jpg 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption>Fig. 2: Welcome Page<\/figcaption><\/figure>\n<\/div>\n<h3>3.2 Build the Angular application for Production<\/h3>\n<p>To deploy the application on the production environment, developers need to build the application. They can use the following command to ask the Angular CLI to start the production build.<div style=\"display:inline-block; margin: 15px 0;\"> <div id=\"adngin-JavaCodeGeeks_incontent_video-0\" style=\"display:inline-block;\"><\/div> <\/div><\/p>\n<pre class=\"brush:plain; wrap-lines:false;\">&gt; ng build --prod\n<\/pre>\n<p>The result of this command is available in the <code>dist<\/code> folder inside the project directory. This command optimizes, bundles, and minifies the application code and the contents of this folder are later used in the production deployment.<\/p>\n<h3>3.3 Create a Firebase project &amp; Install Firebase CLI<\/h3>\n<p>At this step, we have our angular application ready &amp; deployed on the localhost system. To proceed with the Firebase hosting, developers need to open the Firebase <a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">console<\/a> and create a new Firebase project as shown in Fig. 3.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"421\" height=\"512\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/creating-firebase-project-guide-img-1-1.jpg\" alt=\"Fig. 3: Creating a Firebase project\" class=\"wp-image-89737\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/creating-firebase-project-guide-img-1-1.jpg 421w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/creating-firebase-project-guide-img-1-1-247x300.jpg 247w\" sizes=\"(max-width: 421px) 100vw, 421px\" \/><figcaption>Fig. 3: Creating a Firebase project<\/figcaption><\/figure>\n<\/div>\n<p>To deploy the localhost angular application to the Firebase Hosting Service developers will first need to install the Firebase Command-Line-Interface. Navigate to the project directory and execute the following command.<\/p>\n<pre class=\"brush:plain; wrap-lines:false;\">&gt; npm install -g firebase-tools\n<\/pre>\n<p>This command will install the firebase CLI to log in and deploy the application to firebase.<\/p>\n<h3>3.4 Authentication to Firebase Console<\/h3>\n<p>To proceed with deployment, developers will use the following command to log in to firebase.<\/p>\n<pre class=\"brush:plain; wrap-lines:false;\">&gt; firebase login\n<\/pre>\n<p>If the developer has not already logged in, executing this command will open the browser and ask for authentication. Login with your credentials and after successful validation the following success message as shown in Fig. 4 will appear on the command line.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"818\" height=\"125\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/firebase-login-guide-img-1-1.jpg\" alt=\"Fig. 4: Login to Firebase account\" class=\"wp-image-89738\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/firebase-login-guide-img-1-1.jpg 818w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/firebase-login-guide-img-1-1-300x46.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/firebase-login-guide-img-1-1-768x117.jpg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption>Fig. 4: Login to Firebase account<\/figcaption><\/figure>\n<\/div>\n<p>If the developer is already logged in the following message as shown in Fig. 4(a) will appear on the command line.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"592\" height=\"76\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/firebase-login-guide-img-2-1.jpg\" alt=\"Fig. 4(a): Already logged-in\" class=\"wp-image-89739\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/firebase-login-guide-img-2-1.jpg 592w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/firebase-login-guide-img-2-1-300x39.jpg 300w\" sizes=\"(max-width: 592px) 100vw, 592px\" \/><figcaption>Fig. 4(a): Already logged-in<\/figcaption><\/figure>\n<\/div>\n<p>After successful authentication developers can again use the firebase commands to initialize the project deployment.<\/p>\n<h3>3.5 Deploying to Firebase<\/h3>\n<p>To initialize the project setup on Firebase hosting service developers will need to execute the following command.<\/p>\n<pre class=\"brush:plain; wrap-lines:false;\">&gt; firebase init\n<\/pre>\n<p>This command will trigger the project setup and stores all the settings in a local <code>firebase.json<\/code> file. The command will ask the following questions for an effective project set-up i.e.<\/p>\n<ul>\n<li><em>What Firebase CLI features do you want to set up for this folder?<\/em>: Developers need to select their appropriate requirement. In our case, we have selected the Hosting service<\/li>\n<li><em>Select a default Firebase project for this directory<\/em>: Choose [create a new project]<\/li>\n<li><em>What do you want to use as your public directory?<\/em>: Developers need to choose the build (i.e. dist) folder their angular application<\/li>\n<li><em>Configure as a single-page app (rewrite all urls to \/index.html)?<\/em>: Answer this as \u2018yes\u2019<\/li>\n<\/ul>\n<p>Having answered all the questions (as shown in Fig. 5), the application is now ready for being deployed to Firebase. This project configuration will be stored in the <code>firebase.json<\/code> file and will be used to perform the deployment.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"807\" height=\"517\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/project-initialization-project-guide-img-1-1.jpg\" alt=\"Fig. 5: Application Initialization\" class=\"wp-image-89740\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/project-initialization-project-guide-img-1-1.jpg 807w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/project-initialization-project-guide-img-1-1-300x192.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/project-initialization-project-guide-img-1-1-768x492.jpg 768w\" sizes=\"(max-width: 807px) 100vw, 807px\" \/><figcaption>Fig. 5: Application Initialization<\/figcaption><\/figure>\n<\/div>\n<h3>3.6 Hosting Set-up<\/h3>\n<p>In this step, we will pick up the project for deployment. To proceed developers will need to execute the following command.<\/p>\n<pre class=\"brush:plain; wrap-lines:false;\">&gt; firebase use --add\n<\/pre>\n<p>And answer the following of questions i.e.<\/p>\n<ul>\n<li><em>Which project do you want to add?<\/em>: Enter the project name you created in Step 3.3. In our case, the project name is: <code>angular-firebase-7b663<\/code><\/li>\n<li><em>What alias do you want to use for this project?<\/em>: Developers can use any name for easy reference<\/li>\n<\/ul>\n<p>If everything goes well the following screen will be displayed as shown in Fig. 6.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"519\" height=\"100\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/project-hosting-project-guide-img-1-1.jpg\" alt=\"Fig. 6: Application Hosting\" class=\"wp-image-89741\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/project-hosting-project-guide-img-1-1.jpg 519w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/project-hosting-project-guide-img-1-1-300x58.jpg 300w\" sizes=\"(max-width: 519px) 100vw, 519px\" \/><figcaption>Fig. 6: Application Hosting<\/figcaption><\/figure>\n<\/div>\n<h3>3.7 Application Deployment<\/h3>\n<p>Following <em>deploy<\/em> command is used by the developers to start the deployment process.<\/p>\n<pre class=\"brush:plain; wrap-lines:false;\">&gt; firebase deploy\n<\/pre>\n<p>Firebase will deploy the application and provide a url to access the application online as shown in Fig. 7.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"592\" height=\"229\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/project-deploy-project-guide-img-1-1.jpg\" alt=\"Fig. 7: Application Deployment\" class=\"wp-image-89742\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/project-deploy-project-guide-img-1-1.jpg 592w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/project-deploy-project-guide-img-1-1-300x116.jpg 300w\" sizes=\"(max-width: 592px) 100vw, 592px\" \/><figcaption>Fig. 7: Application Deployment<\/figcaption><\/figure>\n<\/div>\n<h2>4. Project Demo<\/h2>\n<p>Open your favorite browser and hit the shared url to display the welcome page of the application.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"818\" height=\"153\" src=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/firebasehosting-angular-example-project-demo-img-1-1.jpg\" alt=\"Fig. 8: Output Page\" class=\"wp-image-89743\" srcset=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/firebasehosting-angular-example-project-demo-img-1-1.jpg 818w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/firebasehosting-angular-example-project-demo-img-1-1-300x56.jpg 300w, https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/firebasehosting-angular-example-project-demo-img-1-1-768x144.jpg 768w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><figcaption>Fig. 8: Output Page<\/figcaption><\/figure>\n<\/div>\n<p>The user should see the same result in the browser as when the application was running on the localhost environment. That is all for this tutorial and I hope the article served you whatever you were looking for. Happy Learning and do not forget to share!<\/p>\n<h2>5. Conclusion<\/h2>\n<p>In this section, developers learned how to create a simple Angular application and deploy the same on Firebase using the firebase hosting services. Developers can download the sample application as an Eclipse project in the <a href=\"#projectDownload\">Downloads<\/a> section.<\/p>\n<h2>6<a name=\"projectDownload\"><\/a>. Download the Eclipse Project<\/h2>\n<p>This was a tutorial of Angular 6 Firebase Hosting.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>You can download the full source code of this example here: <a href=\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/03\/angular-firebase-example.zip\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Angular Firebase Hosting Example<\/strong><\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome readers, in this tutorial, we will learn the basic concepts to host an angular application on the firebase platform. 1. Introduction Angular is a TypeScript-based open-source framework that helps developers build single page applications Offers Object-oriented features and supports the dynamic loading of the pages Supports Two-way data-binding, Property ([]), and Event (()) binding &hellip;<\/p>\n","protected":false},"author":26931,"featured_media":49726,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1880],"tags":[1707,1387],"class_list":["post-89716","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular-5","tag-firebase"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular Firebase Hosting Example - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"Interested to learn more about Angular? Then check out our detailed example on Angular Firebase Hosting!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Firebase Hosting Example - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about Angular? Then check out our detailed example on Angular Firebase Hosting!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-26T08:00:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Yatin Batra\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Yatin Batra\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-firebase-hosting-example.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-firebase-hosting-example.html\"},\"author\":{\"name\":\"Yatin Batra\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/cda31a4c1965373fed40c8907dc09b8d\"},\"headline\":\"Angular Firebase Hosting Example\",\"datePublished\":\"2019-03-26T08:00:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-firebase-hosting-example.html\"},\"wordCount\":1074,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-firebase-hosting-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"keywords\":[\"Angular 5\",\"Firebase\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-firebase-hosting-example.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-firebase-hosting-example.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-firebase-hosting-example.html\",\"name\":\"Angular Firebase Hosting Example - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-firebase-hosting-example.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-firebase-hosting-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"datePublished\":\"2019-03-26T08:00:12+00:00\",\"description\":\"Interested to learn more about Angular? Then check out our detailed example on Angular Firebase Hosting!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-firebase-hosting-example.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-firebase-hosting-example.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-firebase-hosting-example.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/2019\\\/03\\\/angular-firebase-hosting-example.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Angular\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\\\/angular\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Angular Firebase Hosting Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/cda31a4c1965373fed40c8907dc09b8d\",\"name\":\"Yatin Batra\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Yatin.batra_.jpg\",\"caption\":\"Yatin Batra\"},\"description\":\"An experience full-stack engineer well versed with Core Java, Spring\\\/Springboot, MVC, Security, AOP, Frontend (Angular &amp; React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).\",\"sameAs\":[\"https:\\\/\\\/www.javacodegeeks.com\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/yatin-batra\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Firebase Hosting Example - Java Code Geeks","description":"Interested to learn more about Angular? Then check out our detailed example on Angular Firebase Hosting!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html","og_locale":"en_US","og_type":"article","og_title":"Angular Firebase Hosting Example - Java Code Geeks","og_description":"Interested to learn more about Angular? Then check out our detailed example on Angular Firebase Hosting!","og_url":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2019-03-26T08:00:12+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Yatin Batra","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Yatin Batra","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html"},"author":{"name":"Yatin Batra","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/cda31a4c1965373fed40c8907dc09b8d"},"headline":"Angular Firebase Hosting Example","datePublished":"2019-03-26T08:00:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html"},"wordCount":1074,"commentCount":1,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","keywords":["Angular 5","Firebase"],"articleSection":["Angular"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html","url":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html","name":"Angular Firebase Hosting Example - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","datePublished":"2019-03-26T08:00:12+00:00","description":"Interested to learn more about Angular? Then check out our detailed example on Angular Firebase Hosting!","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2015\/12\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/2019\/03\/angular-firebase-hosting-example.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/www.javacodegeeks.com\/category\/web-development"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript"},{"@type":"ListItem","position":4,"name":"Angular","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript\/angular"},{"@type":"ListItem","position":5,"name":"Angular Firebase Hosting Example"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/cda31a4c1965373fed40c8907dc09b8d","name":"Yatin Batra","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/12\/Yatin.batra_.jpg","caption":"Yatin Batra"},"description":"An experience full-stack engineer well versed with Core Java, Spring\/Springboot, MVC, Security, AOP, Frontend (Angular &amp; React), and cloud technologies (such as AWS, GCP, Jenkins, Docker, K8).","sameAs":["https:\/\/www.javacodegeeks.com"],"url":"https:\/\/www.javacodegeeks.com\/author\/yatin-batra"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/89716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/26931"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=89716"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/89716\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/49726"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=89716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=89716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=89716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}