Saravanan Ramupillai
2 min readMay 6, 2020

--

Publishing React app to Firebase using Github Action

It is been while github action has publically available to everyone to try it out. I started learning it to apply it in my side project and here are my observations.

Action (with respective to github) is a independent unit of work, that we wish to perform it on our code-base. (eg: Performing lint analysis, Generating code coverage report, triggering external notification) when some event (code merged, review comments added, review request, issue opened etc) is happening on the codebase.

Action constructs :-

Action is simple unit of work (eg: perform lint check), In many cases we generally have bunch of tasks to be performed on our codebase, not just one. So github has defined the following constructs to help us to run the multiple actions together.

In github, it’s all starting with a single or set of actions that form a Job.

When we wish to run set of actions for during build time (linting, code coverage report) and set of actions for deployment(creating tar file, publishing to npm), we create multiple Jobs that forms a workflow.

Now we need someone to execute each action in workflow and update the status of to us, there comes the role of Runner. Runner is the VM(virtual machine) necessary software packages to run actions.

Writing First Workflow :-

With the overall understanding of how Githup action is structured, let’s write our first workflow, that will build and publish a react app in firebase hosting. We can write the workflow in .yml file using a syntax specified by Github. Below workflow .yml is self explanatory. Nothing complex here.

deploy-to-fb.yml

Once done with writing workflow, we need to save it in specified folder specified by github. .github > workflows > workflow.yml

Once checked in the workflow, we can see the Action working when ever we push (the trigger we specified in our yml file) changes to master branch.

Here is the full working example.

You can get more information in the official documentation

--

--