For the last few years, I have been working as a full-stack web developer. Creating a platform using two individual programming languages and managing the code with various tools is a pretty complicated process. In that sense, Firebase gives me great relief. It makes my life much easier. And there is nothing to say about a VC repository platform like Github, it's a must-have tool for almost every programmer. I am recently enrolled myself a DevOps certification course, the goal of this course is CI / CD of the software project. It means automating the SDLC(Software development life cycle) process. It's really wonderful journey I will write about that in a separate article. Recently, I have used an automating deployment process using Github and firebase, I want to share my learning with everyone so that a newbie can dig into the process. Let's jump into it 1)Firstly, I make an angular(I am an angular developer and I am loving it) project using the following command

As you can see in the picture my project name is firelit :). I have also added a component name "home" and added routing details on the routing file. After finishing everything, run the project locally using ng serve command.By default it is using the port number 4200. In case, 4200 port is used by another program then you can use ng serve --port=" another port number" .

I added a few lines of code (which are pretty simple) which makes my web page something like this

As we can see that there are four color boxes on the web page. 2) Secondly, add git and firebase settings into the project, at first, I have added git,we have only one branch called master then create a Github repository. Before integrating firebase settings I created a Firebase project in the web firebase console. Here my firebase project is ready Now back into the firebase cli tool, integrate firebase service in my project.

In "Set up automatic builds and deploys with GitHub?" select yes It will open a GitHub authentication webpage, select yes, it will authenticate your GitHub account details with firebase. The next step is to add GitHub repository details After that, it will be asking for the workflow file( this is basically creating a yml(yet another markup language) file to automate the process, I will show this in detail later) and type "yes". I make the As we can see I have added two command lines in the yml file first one is npm ci which is basically build dependencies and the second line is npm run build which will build the project. After all finished all the setup I made another commit. 3) We finished all the settings, it's time to push to the github and it will automatically build and deploy.

now go to the github repository page you can see my all code push to the repository.

Go to the action tab Here we can see that, a github workflow file(yml) under process. After it finishes building I go to the firebase hosting URL and Wah-la my code is online.

The project will be deployed automatically every time I made a push command. To test the whole process, let's change some code and push the project once more time.

Here you can see that I delete a color box, there is now a total of three color boxes.

After that, I push the code once more time to the github and I notice that with the help of workflow files github automatically deploys the up-to-date project.

image of the updated workflow file

image of updated deployment Currently, I have only one branch, for additional branches, we have to merge with the main branch.

Finally, I have tried to share the whole process precisely for more information you can rise issues in the comment section.