Nikita  Koelpin

Nikita Koelpin

1625166660

AUTOMATE your code deploys: Firebase Hosting & Github Actions

Really quick and simple Firebase Hosting CI/CD that will totally upgrade your game. Thank you for watching! Please like & subscribe if it helped you out. Links are:

Node & NPM installation:
https://nodejs.org/en/download/

Demo GitHub repository:
https://github.com/EnterFlash/ci-cd-github-firebase

#EnterFlash #Firebase #automate #devops

Music:
https://www.youtube.com/watch?v=KGQNrzqrGqw

#firebase #github #automate #nodejs

What is GEEK

Buddha Community

AUTOMATE your code deploys: Firebase Hosting & Github Actions
Nikita  Koelpin

Nikita Koelpin

1625166660

AUTOMATE your code deploys: Firebase Hosting & Github Actions

Really quick and simple Firebase Hosting CI/CD that will totally upgrade your game. Thank you for watching! Please like & subscribe if it helped you out. Links are:

Node & NPM installation:
https://nodejs.org/en/download/

Demo GitHub repository:
https://github.com/EnterFlash/ci-cd-github-firebase

#EnterFlash #Firebase #automate #devops

Music:
https://www.youtube.com/watch?v=KGQNrzqrGqw

#firebase #github #automate #nodejs

A Simple Guide to Github Page Deployment

Long story short: Jekyll is a template engine changing

markdowndocuments on staticHTMLwebpages, that you can then host anywyere, because you don’t need databases or server that has PHP or Python.

Usual Process

Normally the process of adding new post looks like this:

  • I write markdown document with setting parameters like title, date and tags
  • when I’m happy with what I wrote (never), I commit changes and push it to repository on GitHub. Repository name comes from my nick and is also address for blog asvid.github.io
  • Github after pushing to branch master builds website from sources using Jekyll - probably something like running jekyll build
  • result of Jekyll build is not present in a repository, but you see it right now after visiting bloga page

#github-pages #github-page-with-jekyll #jekyll #github-actions #github #deployment #continuous-deployment #web-development

How to deploy a React app to Firebase using GitHub Actions

GitHub Actions provide a way to automate pretty much anything you want to do with your repository. It can be used to automatically test your project every time you make a pull request or push some code to it, or maybe to publish something to GitHub Packages every time you make a release. The possibilities are endless.

So, in this article, I’m going to walk you through the most obvious functionality of GitHub Actions: deploy your application to production in an automated fashion, so you never have to do it manually again.

What are we going to do exactly?

Keeping in mind that the goal of this tutorial is the deployment, not the application being deployed, we are going to set up a React application using only the template that is already provided when you set up a React app, with a few modifications to make it a little more personal.

Then, we are going to set up a project on Firebase and extract some credentials so we can use the Hosting functionality to eventually — guess what? — host our application and make it available in the internet.

Finally, we will write our workflow file, commit it to GitHub, sit back, and watch the magic of automation happen right before your eyes.

Set up a React app

This section might be unnecessary for the majority of the readers, but I’ll keep it here for those who maybe never dealt with React before and want a glimpse of this beauty. If this is like eating a candy to you, please jump to the next section.

Then buckle up, snap your fingers, and go through the following steps:

  1. Make sure you have NPM installed locally (instructions here)
  2. Make sure you have NPX installed locally:
npm install -g npx

3. Open a terminal of your choice, select a folder where you want your project to live, decide on a name for your project (I’ll use awesome-app for this tutorial), and use NPX to build your application’s template:

npx create-react-app awesome-app

4. Go grab some coffee while everything is being set up, then return to your desk, move into the recently created awesome-app folder and start the application with the following commands:

cd awesome-app
npm start

Wait for it and… Awesome! You now are the proud owner of a website! Right there running in your browser with the animated React logo and all. This is sufficient for the purposes of our demo, but go ahead and edit src/App.js to something more personal, if you so desire. Being a cat person, mine looks like this

#firebase #automation #react #deployment #github-actions

Ida  Nader

Ida Nader

1601376600

Automate Application Deployment Using Github Actions

GitHub Actions makes it easy to automate all your software workflows. You can build, test, and deploy your code right from GitHub. In this post we will explore how you can use GitHub Actions to automate serverless application deployment on AWS. You can also use AWS’s own CI/CD services to achieve the same. But here we are going to keep our discussion limited to GitHub Actions.

How to Use GitHub Actions?

Creating a GitHub action is simple. Go to your GitHub repository that you want to automate and click on “Actions”

You will be taken to Actions page where you can create a new Blank workflow or select existing actions from the marketplace. The actions from marketplace are reusable actions that you can use in your workflow. We are going to create a blank action and we will also use some actions from marketplace.

Let’s rename the YAML file to workflow.yml. You can name anything you like. We are going to create a Lambda function with API gateway in Serverless Application Model (SAM) template and deploy it using GitHub Actions. Below is our SAM template.

YAML

AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Description: 
  GitHub Actions demonstration App
Resources:
  ApiGatewayApi:
    Type: AWS::Serverless::Api
    Properties:
      StageName: Prod
    Auth:
     UsagePlan:
      CreateUsagePlan: PER_API
      Description: Usage plan for this API
      Quota:
       Limit: 500
       Period: MONTH
      Throttle:
       BurstLimit: 100
       RateLimit: 50
  LamdbaFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: ./    
      Handler: lambda.handler
      Runtime: python3.8
      Events:
        getCounter:
          Type: Api
          Properties:
            Path: /hello
            Method: get
            RestApiId: !Ref ApiGatewayApi

lambda.py

#aws #automation #deployment automation #github actions #how-to guides

Harber Jazlyn

Harber Jazlyn

1604286810

CI/CD with Vue, Firebase Hosting and Github Actions

Even if you’re the only developer in a project, you still have to make sure you automate your deployment process and follow certain steps in order to prevent bugs sneak into production code. Writing tests is the first step of it. But then, running those tests everytime you make a change in the code is a time consuming process where you can benefit from some automation.

This is where Github Actions come into play: How about creating a workflow in Github Actions which will run the tests for you when you make a pull request and won’t allow merging to master and deploying to production if the tests fail? That would really help with avoiding unintentional deployment of buggy code. Another important point is not forgetting to deploy your code into production when a pull request is merged to master. The Github workflow that we are going to create will also handle that by automatically deploying to Firebase Hosting when a pull request is completed.

Let’s see how it’s done step by step:

Creating a Vue Project

First of all, make sure your Vue CLI is up-to-date. As of this writing, the latest version is 4.5.8. You can check your current installment with this terminal command: vue --version .

If you have an older version, you can update by npm update -g @vue/cli or if you never had installed before you can install it globally by npm install -g @vue/cli.

Next, let’s create a brand new vue project called “vue_ci_cd” with the command vue create vue_ci_cd_example.

Not all settings are relevant for the purpose of this tutorial, but make sure the following settings are handled as follows:

  • Please pick a preset: Manually select features
  • Pick a unit testing solution: Jest
  • Pick an E2E testing solution: Cypress (Chrome only)

It will then install all the necessary dependencies for the app. If everything goes well, you should be able to run the app with this command cd vue_ci_cd_example && npm run serve .

#firebase #github #vuejs #ci-cd-pipeline #github-actions