I recently worked on my new website. I built it using Polymer.js and Firebase. Firebase offers a wide range of services. I used it for deployment and hosting. I had the site running in the firebase provided url (<project_id>.firebaseapp.com). However you need a domain registrar like GoDaddy for custom domains. I have one with GoDaddy and I didn’t find the right sequence of instructions to set it up with Firebase. In this post, I will share the steps I followed to have a Firebase deploy setup with custom domain from GoDaddy. I will also introduce you to deploying your site using Firebase. Let’s start with the deployment.
Deploying using Firebase
Let’s assume that your site is either fully ready or even just says “Hello World”. I built mine with Polymer.js and had it running using node.js.
Note that I have all the webcomponents, script files, styles, bower_components inside the public folder.
Log in to firebase console. Create a new project for your website.
Now in your terminal, go in to your website folder. Let’s setup using Firebase
npm install -g firebase-tools$ firebase init// Log in and Use the new project you set up in firebase console.
You will have a firebase.json file resembling the following in your website directory:
Once you have this done, let’s deploy your site.
$ firebase deploy
This will list the number of files that are deployed. Ensure that everything required for your site, is included in this list. As I mentioned before, I created a public directory with everything that needs to go with the deployment. This includes bower_components.
Now, visit the link that firebase gives you to look at your deployed site. Make sure all routes and pages work as expected.
Set up custom domain from GoDaddy
I reserved archana.cloud on GoDaddy and I wanted to use it for my website.
Things to not do in GoDaddy before you start:
- Do not set up name servers
- Do not connect to an existing site
Firebase custom domain setup documentation is elaborate and setting up is easy.
Connect a Custom Domain | Firebase
You will need to update the DNS entries for your domain by adding two TXT entries. The entries are available from the…
Following instructions from the link should get you through for the most part.
But let’s go through all the steps anyway:
- Go to firebase console
- Get in to your project where the website is deployed
- You should see this page:
4. Click on “Hosting” tab
5. Click “Connect Custom Domain” button
6. In the screen that asks for the domain name, enter the custom domain that you own. In my case it is “archana.cloud”
7. You should see TXT records set out. This is what we will use in GoDaddy for setting up.
8. Log in to GoDaddy and go to your domain. (Accounts -> Domain -> your website domain)
9. Click on the settings button on the top right corner and choose “Manage DNS”
10. Now add the two TXT records that Firebase suggested here using the “ADD” button. Remove any existing TXT records.
11. Once you do this, go back to Firebase console. (It could take a few minutes to complete the “Verification” stage). You will now see this:
12. Click on “Continue Setup”
13. Now copy the suggested CNAME records to GoDaddy records. Replace the value for CNAME record with www name to point to firebase provided url (<project_id>.firebaseapp.com)
14. Click on “A” radio button in Firebase modal that you see in Step 12.
15. Paste the A records in GoDaddy records too. Remove any existing A records.
16. Now give it a few minutes and your site should be up and running with the custom domain.
This worked for me and now my website is running on archana.cloud.
I made a few mistakes while setting up the custom domain.
- I added forwarding from GoDaddy to the firebase deployed link first.
- I added the CNAME records and not the A records.