Trigger Your GitHub Workflow | Generated by AI

Home PDF English 中文 日本語 Español हिंदी Français Deutsch العربية 繁體中文

---

You’re right, directly embedding a GitHub token in your frontend code is a security risk. Anyone viewing your page’s source code could potentially access and misuse your token.

Here’s a breakdown of secure approaches you can take to trigger your GitHub workflow from a frontend button, along with explanations and code examples:

Core Idea: Introduce a Secure Backend

The most secure way to handle this is to introduce a backend component (an API endpoint) that will:

1. Receive the trigger request from your frontend.
2. Securely store and use your GitHub token.
3. Make the authenticated API call to GitHub to dispatch your workflow.

This way, your sensitive GitHub token never leaves your server-side environment.

Here are a few options for your backend:

1. Serverless Functions (e.g., AWS Lambda, Google Cloud Functions, Netlify Functions, Vercel Functions)

This is often a lightweight and cost-effective solution for simple API endpoints like this.

• How it works: You write a small function that gets deployed to a serverless platform. This function will contain the logic to call the GitHub API using your stored token. Your frontend button will then make an HTTP request to the URL of this serverless function.

• Example (Conceptual - You’ll need to adapt this to your chosen platform):

  Serverless Function Code (Python - Example for AWS Lambda/API Gateway):

    import os
    import requests
    import json
  
    def handler(event, context):
        github_token = os.environ.get("GITHUB_TOKEN")
        if not github_token:
            return {
                'statusCode': 500,
                'body': json.dumps({'error': 'GitHub token not configured'})
            }
  
        owner = "lzwjava"
        repo = "lzwjava.github.io"
        workflow_id = "nytimes.yml"
        ref = "main"
        api_url = f"https://api.github.com/repos/{owner}/{repo}/actions/workflows/{workflow_id}/dispatches"
  
        headers = {
            'Accept': 'application/vnd.github+json',
            'Authorization': f'Bearer {github_token}',
            'X-GitHub-Api-Version': '2022-11-28',
            'Content-Type': 'application/json'
        }
        payload = {'ref': ref}
  
        try:
            response = requests.post(api_url, headers=headers, json=payload)
            response.raise_for_status()  # Raise an exception for bad status codes
            return {
                'statusCode': 204,
                'body': ''
            }
        except requests.exceptions.RequestException as e:
            return {
                'statusCode': 500,
                'body': json.dumps({'error': f'Failed to trigger workflow: {e}'})
            }
  

  • Important: You would configure an environment variable (e.g., GITHUB_TOKEN) in your serverless platform to securely store your GitHub Personal Access Token.

  Frontend Code (Modified nytimes.js):

    const nytimesDiv = document.querySelector('.nytimes');
    const backendApiUrl = '/.netlify/functions/trigger-nytimes-update'; // Example for Netlify Functions
  
    if (nytimesDiv) {
        const updateButton = document.createElement('button');
        updateButton.textContent = 'Update NYTimes Articles';
        nytimesDiv.appendChild(updateButton);
  
        updateButton.addEventListener('click', () => {
            fetch(backendApiUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({}) // You might not need a body for a simple trigger
            })
            .then(response => {
                if (response.status === 204) {
                    alert('Update triggered successfully! Please wait a few minutes to see the result.');
                } else {
                    return response.json().then(data => {
                        alert(`Update failed. Status code: ${response.status}: ${data.error || 'Unknown error'}`);
                        console.error('Update failed:', response, data);
                    });
                }
            })
            .catch(error => {
                alert('Update failed. Check the console for errors.');
                console.error('Error triggering update:', error);
            });
        });
    } else {
        console.error("nytimes div not found!");
    }
  

• Deployment: You’ll need to deploy this serverless function to your chosen platform. The specific deployment process varies depending on the provider.

2. Your Own Web Server (if you have one)

If you have your own web server (e.g., using Node.js, Python/Flask, etc.), you can create a simple API endpoint on that server.

• How it works: Your frontend button sends a request to your server’s endpoint. Your server-side code, which has access to your GitHub token (stored securely as an environment variable or in a configuration file), then makes the API call to GitHub.

• Example (Conceptual - Node.js with Express):

  Server-side Code (Node.js/Express):

    const express = require('express');
    const fetch = require('node-fetch');
    require('dotenv').config();
  
    const app = express();
    const port = 3000;
  
    app.post('/api/trigger-nytimes-update', async (req, res) => {
        const githubToken = process.env.GITHUB_TOKEN;
        if (!githubToken) {
            return res.status(500).json({ error: 'GitHub token not configured' });
        }
  
        const owner = "lzwjava";
        const repo = "lzwjava.github.io";
        const workflow_id = "nytimes.yml";
        const ref = "main";
        const apiUrl = `https://api.github.com/repos/${owner}/${repo}/actions/workflows/${workflow_id}/dispatches`;
  
        const headers = {
            'Accept': 'application/vnd.github+json',
            'Authorization': `Bearer ${githubToken}`,
            'X-GitHub-Api-Version': '2022-11-28',
            'Content-Type': 'application/json'
        };
        const payload = { ref: ref };
  
        try {
            const response = await fetch(apiUrl, {
                method: 'POST',
                headers: headers,
                body: JSON.stringify(payload)
            });
            if (response.status === 204) {
                res.sendStatus(204);
            } else {
                const data = await response.json();
                res.status(response.status).json({ error: `Failed to trigger workflow: ${JSON.stringify(data)}` });
            }
        } catch (error) {
            console.error('Error triggering workflow:', error);
            res.status(500).json({ error: `Failed to trigger workflow: ${error.message}` });
        }
    });
  
    app.listen(port, () => {
        console.log(`Server listening at http://localhost:${port}`);
    });
  

  • Important: Use a .env file (and ensure it’s not committed to your repository) to store your GITHUB_TOKEN and access it using a library like dotenv.

  Frontend Code (Modified nytimes.js):

    const nytimesDiv = document.querySelector('.nytimes');
    const backendApiUrl = '/api/trigger-nytimes-update'; // Adjust to your server's endpoint
  
    // ... (rest of the frontend code is similar to the serverless function example)
  

• Deployment: You’ll need to deploy your server application to your web server.

3. GitHub Actions Workflow Triggered by a Different Event (Less Direct)

While not a direct button trigger, you could set up a different event to trigger your workflow, which might be indirectly initiated by a user action. For example:

• Scheduled Workflow: Run the update workflow periodically (e.g., daily).
• Webhook Trigger: If you have another system or service that users interact with, that system could trigger a webhook that then starts your GitHub Actions workflow.

However, these options don’t provide the immediate, on-demand update you likely want from a button click.

Choosing the Right Approach

• For simple static sites: Serverless functions are often the easiest and most cost-effective solution. Platforms like Netlify and Vercel have built-in support for serverless functions.
• If you already have a web server: Creating an API endpoint on your existing server is a natural choice.
• Security is paramount: Always prioritize keeping your GitHub token secure on a backend server and never expose it in your frontend code.

Steps to Implement (Using Serverless Functions as an Example):

1. Create a Serverless Function: Write the code for your serverless function (e.g., in Python or Node.js) that includes the logic to call the GitHub API.
2. Securely Store Your GitHub Token: Configure an environment variable in your serverless platform’s settings to store your GitHub Personal Access Token.
3. Deploy Your Serverless Function: Deploy the function to your chosen platform (e.g., Netlify, Vercel, AWS Lambda with API Gateway). You’ll get a URL for your deployed function.
4. Update Your Frontend Code: Modify your nytimes.js file to make a POST request to the URL of your deployed serverless function when the button is clicked.
5. Test: Deploy your updated frontend and test if clicking the button successfully triggers your GitHub Actions workflow.

By implementing one of these backend-based solutions, you can provide a button to trigger your GitHub workflow securely without exposing your sensitive API token in your frontend code. Remember to choose the approach that best fits your current infrastructure and technical skills.

---

Back 2025.04.02 Donate