DEV Community: stephin007

How to deploy multiple sites to firebase hosting?

stephin007 — Mon, 04 Jan 2021 02:45:08 +0000

Wait, what..is that even possible... Cause one project in firebase means only one hosting for that particular project, Right..!
Well, my fellow reader, Firebase has this feature to deploy multiple sites in a single firebase hosting. You might be wondering why do we need multiple websites for a single project, yeah I thought that too, so apparently, there might be situations, in which the user might need 2 separate apps i.e. one for customers, one for admin employees - both of which share the same database and functions.

In this blog, let me walk through the steps which you will need to follow strictly to deploy the sites correctly to their respective domains.

NOTE: I ASSUME THAT YOU HAVE ALREADY DEPLOYED ONE OF YOUR APPS TO YOUR FIREBASE PROJECT, OTHERWISE, YOU WON'T BE ABLE TO DEPLOY MULTIPLE SITES

Great, I hope you are still with me, Lets Begin.

1 Define Your Site Name(s)

Assume, there is an e-commerce vendor, whose consumer app is done and deployed on firebase, now you are working on the admin site for the vendor which will help the user to add products to his e-commerce website.

In the Firebase Hosting Console, scroll to the bottom under the Advanced Section you will find an option to Add Another Site , When you click that, you will see the below screen.

Add the site name for ex: admin-multi-site-magic , then you will see the site will be added like this.

Wait, it's not over yet, you have just added the site, you have not deployed anything to your new site, lets see how that's done

2 Install the latest Firebase Tools and Initialize hosting

You need Firebase Tools v4.2 or later for multisite hosting.

npm i -g firebase-tools@latest
firebase -v

firebase init hosting

One thing to note here, to make sure you add the word hosting in the last command since firebase has a lot of functions so when you add hosting after init, it will understand that it needs to only initialize the hosting.
It will prompt you some questions to select the project where you want to host it, make sure to select the correct project.

3 Update the firebase.json

As soon as you complete the above step, you will see that firebase adds 2 files to your project directory i.e. .firebaserc firebase.json

Now we just need to update this firebase.json by adding a field called target. Firebase uses this target, (yes you guessed it probably) to target the site to which your code needs to be deployed.

If you are using React, your deployable code will be your build folder
and If you are using Angular, your deployable code will be your dist folder.
The name of the target can be anything, but better to keep it relevant to the site you are about to deploy. Add your target file as shown below, just above the public field

{
  "hosting": {
    "target": "admin",
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

4 Letting firebase know about the new target you just created.

We need to associate the sites with a local target so Firebase knows which code to deploy where. We run the following command for each site:
firebase target:apply hosting <target-name> <resource-name>

firebase target:apply hosting admin admin-multi-site-magic

where the target-name is just a unique name you choose, and resource-name is the site from step 1.

5 Deploy to FIrebase

We have done all the major steps, now we can deploy it to firebase to the targeted site.

firebase deploy --only hosting

And that's it, I hope you liked it if you do leave some reactions and comments. Also, I am open to collaboration you can mail us or ping us on any of the social media platforms.

How to sync your local git and remote git repository changes?

stephin007 — Fri, 01 Jan 2021 11:14:04 +0000

Today we will focus on how we can synchronize our GitHub local repository master with an upstream repository branch of the GitHub project.
Now, you might think what is an upstream branch,
Upstream branches define the branch tracked on the remote repository by your local remote branch (also called the remote-tracking branch), the below figure will help ya'll understand.

** NOTE : When we made any CLONE/PULL for the first time this is not required as we do fork the repository for the first time all the content in both will be the same.**

So, Why do we need this process to be done?

This is very much necessary if you are working in a team and the teammates are working on different aspects of the project and you yourselves are working on something,
Certain files will differ in both repositories as there are many other developers are merging the code upstream and your branch will not have that changes unless you sync the repository with the current upstream, so you might need to keep up with their code changes as well, this is called syncing your changes with your local and remote repo.

Synching will override the local repository with a master remote repository. And if there are files in the local repository that do not exist in the remote repo, local files get removed

If you don't, this will cause conflicts while you raise a PULL REQUEST.

Now, let me walk you through how to sync your changes with other changes by other developers.
Here I have the taken example of the Opencart GitHub project. First, change your working directory to the file location where you want to clone the project with the command.

$ cd your/local/storage/path

STEP 1: Clone your project with the command.

After the clone is completed then move to the Opencart folder
This will move to the current working directory as opencart

STEP 2: List the current configured remote repository for your fork.

$ git remote -v

This will list your forked repository response will be as below :

This is our repository branch content now we have to get a project from the upstream repository
Now Specify a new remote upstream repository that will be synced with the fork. In Opencart Project this https://github.com/opencart/opencart.git is my upstream repository. Run the following command.

$ git remote add upstream https://github.com/opencart/opencart.git

Now you cross-check that the new upstream repository created for your forked repo. To do this run the same command again as below.

$ git remote -v

Now it will show the response as below and it will also include your upstream repository from your master project.

STEP 3: Make your origin repository the same as your upstream repository.

Now we have created upstream branches for our local repository. Now we will match the content from the upstream repository to the local repository. In this, we will have all the code which is not in our local repository from the upstream repository

Run the commands as mentioned below.

$ git fetch upstream

This command will respond by fetching the content from the upstream for your Master repo. All the new branches and files, contents will the fetched from the upstream repository. And the response for the command as below.

Now checkout to your master branch with the command (if not on the master branch)

$ git checkout master

And run the command.

$ git merge upstream/master

This will sync all the changes to your local repository if any, Now your local repository is synced with the upstream repository.

And that's it, If you have any queries let me know in the comments and it would be great if you leave a reaction as well and follow our community

Connect your firebase Domain to any Custom Domain

stephin007 — Sat, 26 Dec 2020 08:12:25 +0000

Firebase is a free hosting provider, through this you can deploy from simple static HTML to complex e-commerce website made on the latest tech stack.
In this post, we will look into how to connect the firebase domain to the custom domain we bought from domain providers like Namecheap, Hostinger, Google Domains, etc.

We will add another post on how to deploy any website on firebase, stay tuned :)

Assuming that you already have hosted your website on firebase, do the following steps:

- Add Domain

Go to your firebase console
Select your project from the list of projects.
After you click on the desired project, select the hosting option from the left panel
CLick on Add custom domain, you will see the following window, add your custom domain name in the text field provided(make sure the spelling is correct)

-Verify domain ownership

In your domain provider's site, locate the DNS management page.
As soon as you click on continue, it will give you TXT value. This TXT value will be used by firebase to verify that you really own this domain.
.
In your domain provider's site, locate the DNS management page.
Add this TXt value as a DNS record, you will see a bunch of options like A record, AAA record, etc. to add as a record, select TXT and then input
- Type: TXT
- Value: It must be the value provided by the firebase.
- Host/Name: it should either @ or yourdomainname.com(generally it's @ - it will already be prefilled)
- TTL Value: Keep it either Automatic or to 3600
Allow up to 24 hours for the propagation of your updated TXT records, then click Verify.
It probably takes 15-20 mins, the trick is to continue clicking verify for few mins. eventually, it will get verified.
If clicking Verify prompts an error message, your records have not propagated or your values may be incorrect.

- Go Live

After your txt record gets verified, firebase will provide you with 2 A records which you have to add into your DNS Records of your domain provider by default the QUICK SETUP MODE will be selected which is suitable for new websites.
Add A new record in your DNS Management Section, just as you added the TXT record, this time add an A Record and then input.
- Type: A
- Value: In this, you have to add the IP provided by Firebase, Your domain provider may list this term as "Data", "Points To", "Content", "Address", or "IP Address".
- Host/Name: it should either @ or yourdomainname.com(generally it's @ - it will already be prefilled)
- TTL Value: Keep it either Automatic or to 3600
Do the above step twice, since firebase provides you with 2 IPs to add to your DNS.

Common domain providers.

Here are some common domain providers and the types of input each might require. This information is kept up-to-date as much as possible, but refer to your domain provider's documentation for detailed instructions.

NameCheap

DNS TXT record inputs

Type TXT
Host/Name @
Value verification value provided in Firebase console.

DNS A records inputs

A @ 151.101.1.195
A @ 151.101.65.195

Hostinger

DNS TXT record inputs

Type TXT
Host/Name @
Value verification value provided in Firebase console

DNS A records inputs

A @ 151.101.1.195
A @ 151.101.65.195

Note: if in case, your domain gets not connected, it's probably due to an existing A record in your DNS Records, just delete that then you are good to go but make sure, the firebase A records are not deleted.

CloudFare

DNS TXT record inputs

Type TXT
Host/Name example.com
Value verification value provided in Firebase console.

DNS A records inputs

A example.com 151.101.1.195
A example.com 151.101.65.195
A www 151.101.1.195
A www 151.101.65.195

Google Domains

DNS TXT record inputs

Type TXT
Host/Name @
Value verification value provided in Firebase console.

DNS A records inputs

A @ 151.101.1.195
A www 151.101.1.195
A www 151.101.65.195

Google Cloud DNS

DNS TXT record inputs

Type TXT
Host/Name example.com
Value verification value provided in Firebase console.

DNS A records inputs

A example.com 151.101.1.195
A example.com 151.101.65.195
A www 151.101.1.195
A www 151.101.65.195

Squarespace

DNS TXT record inputs

Type TXT
Host/Name @
Value verification value provided in Firebase console.

DNS A records inputs

A @ 151.101.1.195
A @ 151.101.65.195
A www 151.101.1.195
A www 151.101.65.195

That's it for today!

Hope you liked the post, if you’ve got any questions your can Mail us mail@stephinreji.me or join our Discord-server and do checkout our website forcommunity.tech

Currency Converter Using React JS

stephin007 — Tue, 15 Sep 2020 00:18:05 +0000

Currency convertor made by using open source Exchange rate API.

It has real time exchange support of upto 33 countries.

[Github] : https://github.com/stephin007/currencyconvertor
It would be great if you could 🌟 the repository.

[Link] : https://currencyconvertor.stephinreji.me/