To automate the build and deployment process, GitHub Actions is utilized. A YAML file named ci-cd-pipeline.yml is configured in the repository to define the workflow.
name: CI/CD Pipeline
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '14.x'
- name: Install dependencies
run: npm install
- name: Build website
run: npm run build
- name: Deploy to Firebase Hosting
uses: w9jds/firebase-action@master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
The website is deployed to Firebase Hosting, which provides a fast and reliable hosting solution. Firebase Hosting automatically serves the latest deployed version of the website to visitors, ensuring a seamless experience.
Website URL: https://ci-cd-pipeline-demo.firebaseapp.com
Feel free to explore the website and its source code on GitHub to see the magic of CI/CD in action!
In this page, you can view the complete process of the CI/CD pipeline in action. The automation ensures that every code change pushed to the "main" branch triggers a build and deployment, resulting in an always up-to-date and functioning website. The use of GitHub Actions and Firebase Hosting makes the entire development and deployment process efficient and hassle-free.
Please note that the actual code snippets and explanations of the website's features and functionalities can be added in the provided space below. This way, visitors can gain insight into the specific code used to build the website and better understand its working.
Begin by creating a Git repository on GitHub to host your website's source code. You can create a new repository or use an existing one.
Add your website's HTML, CSS (with Tailwind CSS), and JavaScript code to the repository. Make sure your code is functional and ready for deployment.
Create a new file in your repository named ci-cd-pipeline.yml (or any name you prefer) to define the GitHub Actions workflow.
In the YAML file, define the workflow name and specify the event that will trigger the pipeline. In this example, the pipeline is triggered on each push to the "main" branch.
Configure the steps in the workflow. In the example provided earlier, the workflow performs the following steps:
Set up a Firebase project if you don't have one already. You can do this through the Firebase console (https://console.firebase.google.com/).
Install the Firebase CLI globally on your local machine using npm: npm install -g firebase-tools.
Authenticate the Firebase CLI with your Google account: firebase login.
Initialize Firebase Hosting for your project: firebase init hosting.
Follow the prompts to select the project and configure Firebase Hosting settings. Make sure to specify the "public" directory where your built website files are located.
To deploy to Firebase Hosting from GitHub Actions, you need to store the Firebase token as a secret in your GitHub repository.
Go to your repository settings on GitHub, then navigate to "Secrets".
Create a new secret with the name FIREBASE_TOKEN and paste your Firebase token as the value. The token should have the necessary permissions to deploy to Firebase Hosting.
Push a code change to the "main" branch of your repository. This will trigger the GitHub Actions workflow.
GitHub Actions will automatically run the defined workflow. It will check out the code, install dependencies, build the website, and deploy it to Firebase Hosting.
Once the deployment is successful, you should be able to access your website at the Firebase Hosting URL (e.g., https://your-firebase-project-id.firebaseapp.com).
Review the logs and outputs of the GitHub Actions workflow to ensure everything is working as expected. Address any issues that may arise during the build and deployment process.
If needed, make changes to your website code or the CI/CD pipeline configuration (e.g., in the ci-cd-pipeline.yml file) and push the changes to test the updates in the pipeline.