<p>Today we're going to deploy a website to the google firebase. Google firebase is free &amp; easy to use. Google firebase provides the free hosting upto 1GB space, if you need more there are some plans provided by firebase. You can use as per your requirements.</p>

<p>Before starting, I assume you already have a google firebase account and a website ready to be host.</p>

<p>let's start hosting a website to google firebase.</p>

<h3>1. Create a Build</h3>

<p>Open cmd prompt in your website folder and run the below command</p>

<pre class="wp-block-code"><code>npm run build</code></pre>

<p>It will create a <strong>build</strong> folder which contains all the website data ready to be host. All website data means html, js, css, images files.</p>
<p><img src="../../../../uploads/1744736389804-create-build-1024x516.png" alt="" width="1024" height="516"></p>

<h3>2. Create Project in Firebase</h3>

<p>Login to your Firebase Console &amp; add a new project. If you have already created a project, just choose that.</p>
<p><img src="../../../../uploads/1744736425550-add-new-project-in-firebase-1024x470.png" alt="" width="1024" height="470"></p>

<h3>3. Open Hosting Page</h3>

<p>You can find a <strong>Hosting</strong> link in the left side menu. Click on it and open the hosting page.</p>
<p><img src="../../../../uploads/1744736456047-here.png" alt="" width="960" height="439"></p>

<h3>4. Set up firebase hosting.</h3>

<p>Open cmd in your project folder and install the Firebase CLI into website.</p>

<h4>1. Install Firebse CLI</h4>

<pre class="wp-block-code"><code>npm install -g firebase-tools</code></pre>

<h3><strong><img src="../../../../uploads/1744736520931-firebase-installation-1024x240.png" alt="" width="1024" height="240"></strong></h3>
<h4><strong>2.&nbsp;</strong>Initialize the Project</h4>

<p>Open a terminal window and navigate to or create a root directory for your web app</p>

<h5>A. Sign in to Google</h5>

<p>It will take you to Google Login page and log you in into the app.</p>

<pre class="wp-block-code"><code>firebase login</code></pre>

<h5>B. Initiate your project</h5>

<pre class="wp-block-code"><code>firebase init</code></pre>

<ul>
<li>Go to hosting by up-down arrow key</li>
<li>Select <strong>Hosting</strong> by clicking the <strong>space</strong> button on keyboard and hit <strong>Enter</strong></li>
<li>It will ask you to select the hosting folder, write <strong><em>build</em></strong></li>
<li>Next <em>Configure as a single-page app</em>, write <strong><em>Y</em></strong></li>
<li>Next <em>Overwrite the index.html, </em>write <strong><em>N</em></strong></li>
<li>Firebase initialisation is complete. Now, deploy the website in next step.</li>
</ul>
<p><img src="../../../../uploads/1744736581454-firebase-initialisation-1024x517.png" alt="" width="1024" height="517"></p>

<h4>3. Deploy to Firebase Hosting</h4>

<p>Run this command from your app&rsquo;s root directory:</p>

<pre class="wp-block-code"><code>firebase deploy</code></pre>

<h3><img src="../../../../uploads/1744736632941-firebase-deployemnt-1024x309.png" alt="" width="1024" height="309"></h3>
<h4>4. Open and run your website.</h4>

<p>After successful deployment, firebase will provide you a <strong>link</strong> and you can use it to see your live website in action.</p>

<p>This link will be a subdomain of google domains. It will be look like <strong>your-project-id.web.app</strong></p>

<p>If you want to add your custom domain to this website, you can follow the link <a href="../../../../blog/google-firebase-custom-domain-subdomain-mapping-with-godaddy">Map custom domain to firebase hosting.</a></p>

<p>Have any questions? Write into the comment section.</p>

Today we're going to deploy a website to the google firebase. Google firebase is free &amp; easy to use. Google firebase provides the free hostin...

How to deploy websites to Google Firebase - TCMHACK

How to deploy websites to Google Firebase

<p>In my post about&nbsp;<a href="../../../../blog/how-to-deploy-websites-to-google-firebase">how to deploy your website on firebase</a>, I explained about hosting our website on Google Firebase and we are able to access the website using the firebase Url. Now in this article, we are going to talk and learn about adding our website with custom domain like your own domains purchased on the domain providing websites like&nbsp;<a href="https://www.godaddy.com/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">GoDaddy</a>&nbsp;and&nbsp;<a href="https://www.namecheap.com/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">NameCheap</a>. I this article we are going to integrate our domain in GoDaddy with Firebase hosted website. I tried and Integrated my custom domain by taking reference from&nbsp;<a href="https://firebase.google.com/docs/hosting/custom-domain" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">google firebase documentation</a>.</p>

<p>Let's Start the Domain/Subdomain Mapping.</p>

<ol>
<li><strong>Go to firebase console and check your project.</strong><br><img src="../../../../uploads/1744736975467-firebase-project-overview-console-page-1024x447.png" alt="" width="1024" height="447"></li>
<li><strong>Check your hosted site</strong><br>Click&nbsp;<strong>Hosting</strong>&nbsp;Link from the left side and you can see your default website deployed<br><img src="../../../../uploads/1744737058809-firebase-web-hosting-project-page-1024x284.png" alt="" width="1024" height="284"></li>
<li style="font-weight: bold;"><strong>Click <em>Connect Domain</em> link from the page.</strong></li>
<li><strong>Add Domain Name</strong><br>Add Domain name in the connect custom domain popup<br><img src="../../../../uploads/1744737126386-add-domain-name-in-customdomain-1-1024x621.png" alt="" width="1024" height="621"></li>
<li><strong>Get Google Site Verification Code</strong><br>Now you will get the google site verification ID and Copy the Id Note: Do not copy the only value, you should copy the whole text like<br>
<pre><strong>google-site-verification=9xUIjWlRgKX-jsM8Hhlaj3HHtDK0xnEoA98Ms<br></strong></pre>
We need this google site verification Id to add to&nbsp;<strong>TXT</strong> record in DNS provider.<br><img src="../../../../uploads/1744737265680-verify-ownership-verification-customdomain-1024x583.png" alt="" width="1024" height="583"></li>
<li><strong>Login to Godaday account</strong><br>Now go back to GoDaddy and login to your account and go to&nbsp;<a href="https://dcc.godaddy.com/domains/" target="_blank" rel="noreferrer noopener">Domain Page</a></li>
<li><strong>Go to Manage DNS</strong><br>Now click on the three dots near to&nbsp;<strong>Use My Domain</strong>&nbsp;button and click&nbsp;<strong>Manage DNS</strong> link<br><img src="../../../../uploads/1744737338952-godaddy-manage-domain-dns-1024x663.png" alt="" width="1024" height="663"></li>
<li><strong>Add Google Site Varification Code</strong><br>On manage DNS page add the value of google site verification Id as TXT value in the list<br><img src="../../../../uploads/1744737408772-txt-value-for-google-verification-1024x64.png" alt="" width="1024" height="64"></li>
<li><strong>Verify Domain Mapping</strong><br>Now after adding this&nbsp;<strong>TXT</strong> value in the DNS list, Go back to firebase console and click the verify link from the custom domain popup</li>
<li><strong>Get IP address of hosted site</strong><br>In FireBase on GoOnline Step you will get 2 IP address which you need to add in the GoDaddy DNS table again as&nbsp;<strong>Type A</strong> value<br><img src="../../../../uploads/1744737496213-typea-value-update-in-dns-table-1024x275.png" alt="" width="1024" height="275"></li>
</ol>

<pre class="wp-block-preformatted">&nbsp;</pre>

<blockquote class="wp-block-quote">
<p>Use <strong><em>@</em></strong> if you want to map the domain and <em><strong>subdomain</strong></em> for subdomain.</p>
<p>Example: <em>@</em> will be refered as: <em>http://www.mydomain.com</em> and <em>subdomain</em> will be refered as <em>http://subdomain.mydomain.com</em></p>
</blockquote>

<p><strong>11. Now go back to Firebase console again and Connect.</strong></p>

<p>After performing all the steps in some time, you can see your website is up and running with the custom domain you just added in the firebase.<strong> You will see certificate error for HTTP for some time but after some time with certificate verification, the error will go and you can access website in HTTPS</strong>.</p>

<p>Above steps, I used to connect my custom domain with GoDaddy and It worked for me. I wrote this article because I didn&rsquo;t find any recently updated article on the internet about the whole process.</p>

<p>Please feel free to write me incase you face issues while connecting your custom domain.</p>

Learn how to map a custom domain or subdomain from GoDaddy to your Google Firebase project with step-by-step instructions and best practices.

Google Firebase custom domain/subdomain mapping with GoDaddy - TCMHACK

Google Firebase custom domain/subdomain mapping with GoDaddy

<p>Angular is front-end framework that&rsquo;s focused on declarative templating, dependency injection and integrates some of the best practices to make web development less challenging. Angular&rsquo;s architecture is structured around components that are reusable and is built in a way that helps developers write code for the web, mobile and the desktop. In this tutorial, we are going to have at our options for quickly deploying an Angular application and some of the challenges that you might come across.</p>
<h2>Let&rsquo;s have a look at Angular CLI first</h2>
<p>Angular CLI is the official command-line tool that lets you generate, build, debug and serve Angular applications them and run tests and deploy them. This is an essential tool that you can use to create recommended boilerplates for your Angular application. To install Angular CLI, you can use the following npm command:</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">npm install -g @angular/cli</pre>
</div>
<p>To create a new Angular application, all you need to do is run this command:</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">ng new demoFirebaseApp</pre>
</div>
<p>To serve your application on your localhost, you can use this command:</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">cd demoFirebaseApp
ng serve</pre>
</div>
<p>Next up, you need to create a Firebase Account.</p>
<h2>Setting up a Firebase Account</h2>
<p>You will need to create a&nbsp;<a href="http://firebase.google.com/" target="_blank" rel="noopener">Firebase account</a>&nbsp;to be able to deploy your application and make it publicly available. Why Firebase? We&rsquo;re choosing Firebase over other alternatives because it&rsquo;s easy to set up and you can have your Angular application up and running under a couple of minutes. Apart from Firebase, there&rsquo;s Amazon S3 which is also ideal for file storage. For actual production builds, you can also use AWS toolkit to automate the build process.<span id="ezoic-pub-ad-placeholder-108" class="ezoic-adpicker-ad"></span><span id="div-gpt-ad-codeforgeek_com-medrectangle-4-0" class="ezoic-ad ezfound" data-google-query-id="CPDK6NWbkeECFYNJKwod6UUM5A"></span> With AWS, you can set up redundant S3 buckets or use&nbsp;<a href="https://n2ws.com/product/aws-backup" target="_blank" rel="noopener">third-party backup tools for AWS</a>&nbsp;so that there is no disruption while uploading new production builds. This helps you push your releases faster and goes well with the principle,&nbsp;<strong>&ldquo;Automate everything&rdquo;</strong>. Moving on, here are the steps that you need to follow to set up your Firebase account.</p>
<ol>
<li>Create a firebase account if you haven&rsquo;t already. Click the Add Project button to create a new project. <img class="aligncenter wp-image-139 size-full" src="../../../../uploads/1744864496096-image1.png" alt="" width="640" height="321"></li>
<li>Give your project a good name. We&rsquo;re going to name it &ldquo;Demo Firebase App&rdquo;. You can also choose the subdomain for your app. Your app will be hosted at subdomain.firebase-app.com.</li>
</ol>
<p>That&rsquo;s it!</p>
<h2>Installing the Firebase Tools</h2>
<p>To deploy your Firebase project, you&rsquo;d need to install&nbsp;<a href="https://github.com/firebase/firebase-tools" target="_blank" rel="noopener noreferrer">firebase-tools</a>&nbsp;which is a toolbelt that comprises of Firebase authentication and deployment. To install Firebase tools, you can use npm.<span id="ezoic-pub-ad-placeholder-109" class="ezoic-adpicker-ad"></span><span id="div-gpt-ad-codeforgeek_com-box-4-0" class="ezoic-ad ezfound" data-google-query-id="COaH-r2bkeECFYmQjwodve8Mwg"></span></p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">npm install -g firebase-tools</pre>
</div>
<p>Once you have the tools, you can use the firebase command to login to your firebase account. Run firebase login and you should see something like this: <img class="aligncenter wp-image-137 size-full" src="../../../../uploads/1744864518491-image3.png" alt="" width="640" height="80"> Open the link, log in to your Google account the way that you usually do and if everything goes well, you will see the login success page. <img class="aligncenter wp-image-136 size-full" src="../../../../uploads/1744864533759-image4.png" alt="" width="640" height="367"></p>
<h2>Using Firebase In Our Angular App</h2>
<p>In this step, we&rsquo;re going to use the firebase CLI too initialize a firebase repository inside our project and then use it to push the build version into the Firebase storage.</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">firebase init</pre>
</div>
<p>When you run the initialization script, you will be asked a few questions. &gt;&nbsp;<strong>Which Firebase CLI features do you want to set up for this folder?</strong>&nbsp;(Press Space to select features, then Enter to confirm your choices) Hosting: Configure and deploy Firebase Hosting sites &gt;&nbsp;<strong>Select a default Firebase project for this directory:</strong>&nbsp;demo-angular-app (demoangularapplication) &gt;&nbsp;<strong>What do you want to use as your public directory?</strong>&nbsp;dist &gt;&nbsp;<strong>Configure as a single-page app (rewrite all urls to /index.html)?</strong>&nbsp;Yes The default firebase project corresponds to the project that we created earlier. For the third question, make sure that the name of the public directory is dist. This is important because Angular places the builds in the dist directory. <img class="aligncenter wp-image-138 size-full" src="../../../../uploads/1744864553566-image2.png" alt="" width="640" height="314"> The details entered here are configurable. Firebase creates two files&nbsp;<strong>.firebaserc</strong>&nbsp;and&nbsp;<strong>firebase.json</strong>. Feel free to open the files to see the contents.</p>
<h2>Deploy Your Application</h2>
<p>To deploy your Angular application, you can use the CLI tool to generate a build and then use the firebase toolkit to deploy into the cloud. Generating a build is easy with Angular CLI.</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">ng build</pre>
</div>
<p>Angular generates a /dist directory where all the build artifacts are kept. If you open the directory, you will find the following content and their respective file sizes.</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">vendor.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2.2 MB
polyfills.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 163 KB
main.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;13 &nbsp;KB
inline.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;6 &nbsp; KB
styles.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;10 &nbsp;KB</pre>
</div>
<p>A 2.2 MB bundle is bad for production. It might take a couple of minutes to load the bundle page. For production builds, you can run the below command.</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">ng build --prod</pre>
</div>
<p>The prod flag tells the ng script to generate a build file for production. Angular will use industry standard techniques to reduce the output size and minify the JavaScript bundle so that the production build will load fast on your server. If you&rsquo;re curious to know the exact difference in sizes, here&rsquo;s the file sizes now.</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">vendor.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;352 KB &nbsp; &nbsp;// Reduced from 2.2 MB
polyfills.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 57 &nbsp;KB &nbsp; &nbsp;// Reduced from 163 KB
main.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;12 &nbsp;KB &nbsp; &nbsp;// Reduced from 13 &nbsp;KB
inline.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2 &nbsp; KB &nbsp; &nbsp;// Reduced from 6 &nbsp; KB
styles.bundle.js &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;0 &nbsp; KB &nbsp; &nbsp;// Reduced from 10 &nbsp;KB</pre>
</div>
<p>That&rsquo;s nearly about 80% of the decrease in file size and the size is usually okay for a webpage. The actual deployment is just a command away now.</p>
<div class="codecolorer-container text twitlight">
<pre class="text codecolorer">firebase deploy</pre>
</div>
<p>If everything goes okay, you should see something like this:</p>
<div class="codecolorer-container text twitlight">
<div class="text codecolorer">
<ul>
<li>=== Deploying to 'demoangularapplication'...&nbsp;</li>
<li>deploying hosting...</li>
<li>hosting: preparing dist directory for upload...&nbsp;</li>
<li>hosting: 8 files uploaded successfully...</li>
<li>Deploy complete!</li>
</ul>
<p>Project Console: <a href="https://console.firebase.google.com/project/demoangularapplication/overview">https://console.firebase.google.com/project/demoangularapplication/overview</a></p>
<p>Hosting URL: <a href="https://demoangularapplication.firebaseapp.com">https://demoangularapplication.firebaseapp.com</a></p>
</div>
</div>
<p>The hosting URL is the actual URL of the website. To enhance and automate this further, you can add a small script to package.json that looks like this:</p>
<div class="codecolorer-container javascript twitlight">
<pre class="javascript codecolorer"><span class="st0">"scripts"</span><span class="sy0">:</span>&nbsp;<span class="br0">{</span>
&nbsp; ...&nbsp;
&nbsp;&nbsp;<span class="st0">"deploy"</span><span class="sy0">:</span>&nbsp;<span class="st0">"ng build --prod &amp;&amp; firebase deploy"</span>
<span class="br0">}</span><span class="sy0">,</span></pre>
</div>
<p>You can now execute npm run deploy to create a build and then deploy it into firebase.</p>
<h2>Summary</h2>
<p>In this post, we&rsquo;ve covered everything that you need to know about deploying Angular on Firebase. You can then connect Firebase to your domain by going to the console. With Firebase, you can experiment for free and the basic plan is sufficient for almost all development purposes. We hoped you enjoyed reading this. If you have any thoughts, please share them in the comments.</p>

Angular is front-end framework that’s focused on declarative templating, dependency injection and integrates some of the best practices to make w...

How to deploy websites to Google Firebase

Google Firebase custom domain/subdomain mapping with GoDaddy

How to Set Up an Angular Application on Firebase