Firebase Hosting and Siteground
Tags: webdev, productivity, flutter, dart
Published: 2020-08-29 08:18:31

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Hosted URL&nbsp;: <a href="https://web.flatteredwithflutter.com/" rel="noreferrer noopener" target="_blank">https://web.flatteredwithflutter.com/</a></p></blockquote>
<!-- /wp:quote -->


<!-- wp:heading {"level":4} -->
<h4>Pre-Requisite:</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We have a website programmed using Flutter Web (<a href="https://fir-signin-4477d.firebaseapp.com/#/" rel="noreferrer noopener" target="_blank"><strong><em>https://fir-signin-4477d.firebaseapp.com/#/</em></strong></a>). Now we want to give our website a custom domain name.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This article won’t be creating any website(rather uses an existing website).</p>
<!-- /wp:paragraph -->

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>


<!-- wp:heading {"level":4} -->
<h4>Firebase Hosting</h4>
<!-- /wp:heading -->

{% youtube FNmOmiZIJIk %}

####Article here: https://flatteredwithflutter.com/firebase-hosting-and-siteground/

<!-- wp:paragraph -->
<p>Once you are ready building your website, you can deploy onto Firebase Hosting via</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">firebase deploy</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>This command deploys a <strong>release</strong> to your Firebase project’s default Hosting sites:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><code>PROJECT_ID.web.app</code></li><li><code>PROJECT_ID.firebaseapp.com</code></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Firebase Hosting serves your content over SSL, by default.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Go to <strong>Firebase Console</strong> and navigate to the <strong>Hosting Option</strong>. You will see your website deployed and its details.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"width":580,"height":165} -->
<figure class="wp-block-image is-resized"><img src="https://cdn-images-1.medium.com/max/1600/1*IsCqmnRrEU6YfLvg3hFwiQ.png" alt="Firebase Hosting and Siteground" width="580" height="165"/><figcaption>Firebase Hosting and Siteground</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Let's proceed with adding a custom domain to this deployed website.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Custom Domain</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Click on the “<strong>Add custom domain</strong>” button</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/1*vghktwLvnCePnbQNCab57g.png" alt="Firebase Hosting and Siteground"/><figcaption>Firebase Hosting and Siteground</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Here, enter the domain which you want the end-users to see on their web-browsers.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In our case, we have entered (<strong>web.flatteredwithflutter.com</strong>)</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Note</strong>: You should enter a domain which you own, in our case its <strong>flatteredwithflutter.com</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>Next, click <strong>continue</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/1*vghktwLvnCePnbQNCab57g.png" alt="Firebase Hosting and Siteground"/><figcaption>Firebase Hosting and Siteground</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Here, enter the domain which you want the end-users to see on their web-browsers.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In our case, we have entered (<strong>web.flatteredwithflutter.com</strong>)</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p><strong>Note</strong>: You should enter a domain which you own, in our case its <strong>flatteredwithflutter.com</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>Next, click <strong>continue</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/1*Ts-22ycqlcbUw421cOOacA.png" alt="Firebase Hosting and Siteground"/><figcaption>Firebase Hosting and Siteground</figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Firebase Hosting gives us <strong>A records</strong>, which need to be added to our DNS provider, in our case, its <strong>Siteground.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>A <strong>Records</strong> are the most basic type of <strong>DNS record</strong> and are used to point a domain or subdomain to an IP address</p></blockquote>
<!-- /wp:quote -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":4} -->
<h4>Custom Domain with Siteground</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Log in to your Siteground account and navigate to <strong>cPanel</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Go to the <strong>Domain</strong> section inside the cPanel home.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/1*5Dj9Uo2gA_p_llvV5ptOEw.png" alt="Firebase Hosting and Siteground"/><figcaption>Firebase Hosting and Siteground</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Inside the Domain section, click on <strong>Advanced DNS Zone Editor</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next, you need to add both <strong>A records</strong>, as mentioned in the Firebase Hosting.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Name: What you entered inside the custom domain.&nbsp;</li><li>TTL (Time To Live): Enter the value as 3600</li></ol>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>TTL is set in seconds, lowest <strong>value</strong> possible is 600 seconds (10 minutes). The highest possible <strong>value</strong> is 86400 seconds (24 hours).</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>3. Address: As specified in the Firebase Custom Domain step.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/1*49VHG_qtqrstLMreZddamA.png" alt="Firebase Hosting and Siteground"/><figcaption>Firebase Hosting and Siteground</figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Finally, click <strong>Add Record</strong></p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Repeat the same step, for the next IP Address. (since Custom Domain provided us with two IPs)</p></blockquote>
<!-- /wp:quote -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Finally, click <strong>Finish</strong>, inside the <strong>Firebase Custom Domain Setup</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You will see something like this now (inside the Firebase Hosting Console),</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/1*q94KaFnZH9d29HDOpHFQfA.png" alt="Firebase Hosting"/><figcaption>Firebase Hosting</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>In case, you want to navigate to this site now, you will see insecure connection warnings.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/1*mUyHOcmwqekKYeTRlu12tA.png" alt=""/><figcaption>Firebase Hosting and Siteground</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>It takes some time to propagate domain name changes, up to 24 hours.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In our case, it took much less,(around 2 hours) and we see something like this (inside <strong>Firebase Hosting Console</strong>).</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/1*9Qbtllshwm1SwZFm0eqV9g.png" alt="Firebase Hosting and Siteground"/><figcaption>Connected</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Our new domain has been assigned an SSL certificate.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/1600/1*33vW4AtOUnr1icuj3fg7BQ.png" alt="Firebase Hosting and Siteground"/><figcaption>Certificate Issued</figcaption></figure>
<!-- /wp:image -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Hosted URL&nbsp;: <a href="https://web.flatteredwithflutter.com/" rel="noreferrer noopener" target="_blank">https://web.flatteredwithflutter.com/</a></p></blockquote>
<!-- /wp:quote -->

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>



{% youtube FNmOmiZIJIk %}