Connecting your domain by using Google Firebase

Google Chrome announced that they are going to show “Not secure” message on their address bar from this October, if Chrome trying to enter URL with ‘HTTP’. Most of the major websites, such as Google, Twitter, Facebook — were already move their protocol to HTTPS.

However, with Firebase, you can get your own SSL certificate(for free!), and you don’t need to worry about ‘Not secure’ message even if you don’t have your own SSL certificate right now.

Create a new project

Main page of Firebase — You can add new project by clicking the”Add project(Red box)” button.

With your Google account, you can create a Firebase project at Google Firebase.

Create a new project

Dialog shows up after you click “Add project” button. You can name your new project and select your country here. I selected “South Korea”, But I recommend you to select the country which has the best CDN server located(and of course, the nearest country!)

Go straight to “Hosting” tab on the left navigation bar and click “Start” button on the “Hosting” page.

You have to setup your local directory first — and open Terminal by Hold down the Shift key while right-clicking in your directory. Just copy and paste the npm code — Install code, Google sign in, Start project and Publish website.

You must setup your local directory first, because it’s based on Commend Line Interface of Node.js, not like a FTP server or Web hosting manager.

*Open Terminal by Hold down the Shift key while right-clicking*

You may set your new directory for yoursef, or just leave it like this.

After this, click the “Connect domain” button to start connecting your domain to Firebase. In this step, you need your own domain, or domain to redirection.

Click the “Connect domain” button

Type your domain, and confirm your domain’s ownership by adding TXT record to your DNS provider or service.

In my case, my DNS provider is “GoDaddy”. So I added the TXT record on my DNS provider’s DNS setting.

Type is TXT, Host is your domain. And just copy and paste the TXT value on TXT field.

Next, you’ll get some “A” values, add them to your service provider in the same way, just like you did for TXT value.

Changed “A” values on my service provider (GoDaddy)

Next thing to do is bringing your assets into your directory, which you’ve setup on terminal. In my case, I set my public directory as “public” folder(default). And then, on your Terminal, type a line of commend below.

Type this line…

Files uploading… Done!

That’s it! Now you have to wait for 5 mins to 2 hours for Firebase to applying your domain’s settings. Before that, uncomfortable screen may come across to you — when you’re trying to enter your domain, like

This!

I did this for my design portfolio website, cause I don’t want to make my visitors get scared by “Not Secure” message on Chrome(seriously!).

and after 30 mins…

Finally I got it!

Certificate for my website — Spemer.com

Hope this can help you, especially for people who are ‘non-professional’ in programming fields like me. Thanks!

p.s.

Visit my portfolio here! and Github link

References

004. 도메인 연결

Firebase 발급 및 도메인 연결

http://www.itworld.co.kr/news/104619

https://www.slideshare.net/sungbeenjang/firebase-for-web-1-hosting