diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 00000000..d6b1a3fb --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,68 @@ +# .github/workflows/main.yml - Build and Test Workflow (Cleaned) +name: Build and Test Workflow + +on: + push: + branches: + - main # This workflow runs when code is pushed to the main branch + +jobs: + build: + runs-on: ubuntu-latest + # Define the default working directory for all 'run' commands and actions in this job + defaults: + run: + working-directory: './Code/04 Artifacts & Outputs/03 Finished Project' # Your specified subdirectory + steps: + - name: Get code + uses: actions/checkout@v3 # Checks out your repository's code + + - name: Cache dependencies + uses: actions/cache@v3 + with: + path: ~/.npm # Path to the directory to cache + # Corrected hashFiles key syntax + key: "deps-node-modules-${{ hashFiles('Code/04 Artifacts & Outputs/03 Finished Project/package-lock.json') }}" + + - name: Install dependencies + run: npm ci # Installs dependencies from package-lock.json + + - name: Build website + run: npm run build # Builds your website for production + + - name: Upload artifacts + uses: actions/upload-artifact@v4 # Using version 4 + with: + name: dist-files # Name for the uploaded artifact + path: dist # Path to the built files (relative to the working directory) + if-no-files-found: warn # Warn if no files found, but don't fail job + compression-level: 6 + overwrite: false + include-hidden-files: false + + test: + needs: build # This job will only run after the 'build' job completes successfully + runs-on: ubuntu-latest + # Define the default working directory for all 'run' commands in this job. + defaults: + run: + working-directory: './Code/04 Artifacts & Outputs/03 Finished Project' # Your specified subdirectory + steps: + - name: Get code + uses: actions/checkout@v3 # Checks out your repository's code + + - name: Cache dependencies + uses: actions/cache@v3 + with: + path: ~/.npm # Path to the directory to cache + # Corrected hashFiles key syntax + key: "deps-node-modules-${{ hashFiles('Code/04 Artifacts & Outputs/03 Finished Project/package-lock.json') }}" + + - name: Install dependencies + run: npm ci # Installs dependencies from package-lock.json + + - name: Lint code + run: npm run lint # Runs your project's lint script + + - name: Test code + run: npm run test # Runs your project's test script \ No newline at end of file diff --git a/Code/02 Basics/01 First Workflow/README.md b/Code/02 Basics/01 First Workflow/README.md index 56af5a03..59b71597 100644 --- a/Code/02 Basics/01 First Workflow/README.md +++ b/Code/02 Basics/01 First Workflow/README.md @@ -1,3 +1,4 @@ # Getting Started with GitHub Actions -This repository will be used to get started with GitHub Actions! \ No newline at end of file +This repository will be used to get started with GitHub Actions! +Let's Test ok diff --git a/Code/04 Artifacts & Outputs/03 Finished Project/.github/workflows/main.yml b/Code/04 Artifacts & Outputs/03 Finished Project/.github/workflows/main.yml new file mode 100644 index 00000000..6ed450e5 --- /dev/null +++ b/Code/04 Artifacts & Outputs/03 Finished Project/.github/workflows/main.yml @@ -0,0 +1,89 @@ +# .github/workflows/deploy-website.yml +name: Deploy website + +on: + push: + branches: + - main # This workflow runs when code is pushed to the main branch + +jobs: + test: + runs-on: ubuntu-latest + # Define the default working directory for all 'run' commands in this 'test' job. + # This assumes your package.json, package-lock.json, etc., are inside this directory. + defaults: + run: + working-directory: './Code/04 Artifacts & Outputs/03 Finished Project' # <--- Correct path for your project + steps: + - name: Get code + uses: actions/checkout@v3 # Checks out your repository's code + + - name: Cache dependencies + uses: actions/cache@v3 + with: + path: ~/.npm # Path to the directory to cache + key: deps-node-modules-${{ hashFiles('**/package-lock.json') }} # Cache key based on package-lock.json + + - name: Install dependencies + run: npm ci # Installs dependencies from package-lock.json (requires it to be present) + + - name: Lint code + run: npm run lint # Runs your project's lint script + + - name: Test code + run: npm run test # Runs your project's test script + + build: + needs: test # This job will only run after the 'test' job completes successfully + runs-on: ubuntu-latest + outputs: + script-file: ${{ steps.publish.outputs.script-file }} # Outputs the generated JavaScript filename + # Define the default working directory for all 'run' commands in this 'build' job. + # This assumes your package.json, package-lock.json, etc., are inside this directory. + defaults: + run: + working-directory: './Code/04 Artifacts & Outputs/03 Finished Project' # <--- Correct path for your project + steps: + - name: Get code + uses: actions/checkout@v3 # Checks out your repository's code + + - name: Cache dependencies + uses: actions/cache@v3 + with: + path: ~/.npm + key: deps-node-modules-${{ hashFiles('**/package-lock.json') }} + + - name: Install dependencies + run: npm ci # Installs dependencies + + - name: Build website + run: npm run build # Builds your website for production + # Note: The 'dist/' path here is relative to the working-directory set above. + # So, if your project builds to 'Code/04 Artifacts & Outputs/03 Finished Project/dist', + # then 'dist/' is correct. + + - name: Publish JS filename + id: publish # Gives this step an ID to reference its outputs + # Finds the generated JS file in 'dist/assets' and sets it as an output + run: find dist/assets/*.js -type f -execdir echo 'script-file={}' >> $GITHUB_OUTPUT ';' + + - name: Upload artifacts + uses: actions/upload-artifact@v3 + with: + name: dist-files # Name for the uploaded artifact + path: dist # Path to the built files (relative to the working directory) + + deploy: + needs: build # This job will only run after the 'build' job completes successfully + runs-on: ubuntu-latest + steps: + - name: Get build artifacts + uses: actions/download-artifact@v3 # Downloads the 'dist-files' artifact + with: + name: dist-files # Name of the artifact to download + - name: Output contents + run: ls # Lists the contents of the current directory (should show 'dist' files) + - name: Output filename + run: echo "Generated script file: ${{ needs.build.outputs.script-file }}" # Displays the JS filename from the build job + - name: Deploy + run: echo "Deployment placeholder executed." \ No newline at end of file diff --git a/Code/04 Artifacts & Outputs/03 Finished Project/.github/workflows/readme.md b/Code/04 Artifacts & Outputs/03 Finished Project/.github/workflows/readme.md new file mode 100644 index 00000000..966359b0 --- /dev/null +++ b/Code/04 Artifacts & Outputs/03 Finished Project/.github/workflows/readme.md @@ -0,0 +1,299 @@ +# Getting Started with GitHub Actions + +GitHub Actions is a powerful automation platform that allows you to automate, customize, and execute your software development workflows right in your repository. You can build, test, and deploy your code directly from GitHub, or integrate with a variety of third-party services. + +This `README.md` will guide you through the basics of GitHub Actions, providing a foundation for creating your own automated workflows. + +## Table of Contents + +1. [What are GitHub Actions?](#what-are-github-actions) +2. [Core Concepts](#core-concepts) + * [Workflows](#workflows) + * [Events](#events) + * [Jobs](#jobs) + * [Steps](#steps) + * [Actions](#actions) + * [Runners](#runners) +3. [Getting Started: Your First Workflow](#getting-started-your-first-workflow) + * [Workflow File Location](#workflow-file-location) + * [Basic Workflow Structure](#basic-workflow-structure) +4. [Common Commands and Tips](#common-commands-and-tips) + * [Viewing Workflow Runs](#viewing-workflow-runs) + * [Debugging Workflows](#debugging-workflows) + * [Skipping Workflow Runs](#skipping-workflow-runs) + * [Secrets](#secrets) +5. [Sample Workflow: React App CI/CD](#sample-workflow-react-app-cicd) + * [Prerequisites](#prerequisites) + * [Workflow Explained](#workflow-explained) +6. [Further Learning](#further-learning) + +--- + +## What are GitHub Actions? + +GitHub Actions enable you to define custom workflows that automatically execute a series of commands when specific events occur in your GitHub repository. These events can range from a `push` to a branch, a `pull_request` being opened, a `release` being published, or even a scheduled `cron` job. + +## Core Concepts + +Understanding these core concepts is crucial for effectively using GitHub Actions: + +### Workflows + +A workflow is an automated, configurable process that runs one or more jobs. Workflows are defined in YAML files (`.yml` or `.yaml`) within the `.github/workflows/` directory of your repository. + +### Events + +An event is a specific activity in your repository that triggers a workflow run. Common events include: + +* `push`: When code is pushed to a branch. +* `pull_request`: When a pull request is opened, synchronized, or closed. +* `workflow_dispatch`: Manually trigger a workflow from the GitHub UI or API. +* `schedule`: Run a workflow at a scheduled time using `cron` syntax. + +### Jobs + +A job is a set of steps that execute on the same runner. Each job runs in a fresh instance of the virtual environment. Jobs can run in parallel or sequentially, and dependencies between jobs can be defined. + +### Steps + +A step is an individual task within a job. Steps can be a script (a set of commands) or an action (a reusable unit of code). Steps are executed in the order they are defined. + +### Actions + +Actions are the fundamental building blocks of a workflow. They are reusable units of code that can perform complex tasks without you having to write a lot of code. Actions can be: + +* **Community-created:** Available on the GitHub Marketplace. +* **Locally-defined:** Custom actions you create within your repository. +* **Docker container actions:** Actions packaged as Docker containers. + +### Runners + +A runner is a server that has the GitHub Actions runner application installed. It listens for available jobs, runs them, and reports the progress and results back to GitHub. GitHub provides Ubuntu, Windows, and macOS virtual machines as hosted runners, or you can host your own self-hosted runners. + +--- + +## Getting Started: Your First Workflow + +Let's create a simple workflow that triggers on a `push` and prints "Hello, GitHub Actions!" to the console. + +### Workflow File Location + +All workflow files must be placed in the `.github/workflows/` directory at the root of your repository. + +### Basic Workflow Structure + +1. **Create the directory:** + ```bash + mkdir -p .github/workflows + ``` + +2. **Create a new file:** `.github/workflows/hello-world.yml` + +3. **Add the following content:** + + ```yaml + # .github/workflows/hello-world.yml + name: Hello World Workflow + + on: [push] # This workflow runs on every push to any branch + + jobs: + build: # This is the ID of our job + runs-on: ubuntu-latest # Specify the runner environment + + steps: + - name: Checkout code + uses: actions/checkout@v4 # An action to check out your repository's code + + - name: Greet + run: echo "Hello, GitHub Actions!" # A simple script step + ``` + +4. **Commit and Push:** + ```bash + git add .github/workflows/hello-world.yml + git commit -m "Add hello world workflow" + git push + ``` + +Now, navigate to your repository on GitHub, click on the "Actions" tab, and you should see your "Hello World Workflow" running! + +--- + +## Common Commands and Tips + +While there aren't "commands" in the traditional sense for GitHub Actions (they are defined in YAML), here are some tips for managing and interacting with your workflows: + +### Viewing Workflow Runs + +* Go to your repository on GitHub. +* Click on the **"Actions"** tab. +* You'll see a list of all workflow runs. Click on a specific run to view its details, including jobs, steps, and logs. + +### Debugging Workflows + +* **Review Logs:** The most crucial debugging tool. The logs for each step will show you exactly what happened during execution. Look for error messages. +* **Increase Verbosity:** For JavaScript actions, you can set the `ACTIONS_STEP_DEBUG` secret to `true` to enable step debugging logs. +* **Local Testing (act):** For more complex scenarios, consider using tools like `act` (https://github.com/nektos/act) to run your workflows locally before pushing to GitHub. +* **`continue-on-error`:** You can add `continue-on-error: true` to a step to allow a job to continue even if that step fails. This is useful for debugging. + +### Skipping Workflow Runs + +You can conditionally skip workflow runs or individual jobs using `if` conditions in your workflow file. + +Example: Only run on `main` branch pushes: + +```yaml +on: + push: + branches: + - main +jobs: + build: + runs-on: ubuntu-latest + steps: + # ... +Example: Skip a job if a specific file hasn't changed: + +YAML + +jobs: + my-job: + if: contains(github.event.head_commit.modified, 'my-specific-file.js') + runs-on: ubuntu-latest + steps: + # ... +Secrets +Sensitive information (like API keys, tokens, or passwords) should never be hardcoded in your workflow files. GitHub Actions provides a secure way to store and access secrets: + +Go to your repository on GitHub. + +Click on "Settings". + +In the left sidebar, click on "Secrets and variables" > "Actions". + +Click "New repository secret". + +Give your secret a Name (e.g., MY_API_KEY) and its Value. + +You can then access this secret in your workflow using the secrets context: + +YAML + +steps: + - name: Use a secret + run: echo "The API Key is: ${{ secrets.MY_API_KEY }}" +Sample Workflow: React App CI/CD +This sample workflow demonstrates a common CI/CD pipeline for a React application. It will: + +Trigger on push to the main branch. +Install dependencies. +Run tests. +Build the React application. +(Optional) Deploy to GitHub Pages (requires additional setup for your package.json and a gh-pages branch). +Prerequisites +A React project (created with Create React App, Vite, etc.). +Ensure your package.json has test and build scripts defined. +If deploying to GitHub Pages, ensure your package.json has a homepage field pointing to your GitHub Pages URL (e.g., "homepage": "https://.github.io/") and the gh-pages package installed (npm install gh-pages --save-dev). +Workflow Explained +Create a new file: .github/workflows/react-ci-cd.yml + +YAML + +# .github/workflows/react-ci-cd.yml +name: React CI/CD Pipeline + +on: + push: + branches: + - main # Trigger on pushes to the main branch + +jobs: + build-and-test: + name: Build and Test React App + runs-on: ubuntu-latest # Use the latest Ubuntu runner + + steps: + - name: Checkout Repository + uses: actions/checkout@v4 # Checkout the repository code + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' # Specify the Node.js version to use + + - name: Install Dependencies + run: npm install # Install project dependencies + + - name: Run Tests + run: npm test -- --watchAll=false # Run tests, disabling watch mode for CI + + - name: Build React App + run: npm run build # Build the production-ready React app + + - name: Upload Build Artifact (Optional) + uses: actions/upload-artifact@v4 + with: + name: react-build + path: build/ # Path to your built React app (usually 'build' or 'dist') + + # deploy-to-github-pages: # Uncomment this job to enable GitHub Pages deployment + # name: Deploy to GitHub Pages + # needs: build-and-test # This job depends on the 'build-and-test' job succeeding + # runs-on: ubuntu-latest + # if: success() # Only run if the previous job was successful + # + # steps: + # - name: Checkout Repository + # uses: actions/checkout@v4 + # + # - name: Download Build Artifact + # uses: actions/download-artifact@v4 + # with: + # name: react-build + # path: build/ # Download the build artifact to this path + # + # - name: Deploy to GitHub Pages + # uses: peaceiris/actions-gh-pages@v4 # Action for deploying to gh-pages + # with: + # github_token: ${{ secrets.GITHUB_TOKEN }} # GITHUB_TOKEN is automatically provided + # publish_dir: ./build # Directory to publish + # force_orphan: true # Recommended for clean deployments + # cname: your-custom-domain.com # Uncomment and replace if you have a custom domain +To use the deploy-to-github-pages job: + +Uncomment the deploy-to-github-pages job in the .github/workflows/react-ci-cd.yml file. +Configure homepage in package.json: +JSON + +// package.json +{ + // ... + "homepage": "https://.github.io/", + "scripts": { + // ... + "predeploy": "npm run build", + "deploy": "gh-pages -d build" + } +} +Replace and with your actual GitHub username and repository name. +Install gh-pages: npm install gh-pages --save-dev +Ensure your repository has GitHub Pages enabled in its settings, pointing to the gh-pages branch. +Further Learning +GitHub Actions Documentation: The official and most comprehensive resource. +https://docs.github.com/en/actions +GitHub Marketplace: Discover thousands of actions created by the community. +https://github.com/marketplace?type=actions +Awesome GitHub Actions: A curated list of resources, actions, and tips. +https://github.com/sdras/awesome-actions +Start experimenting with different events, jobs, and actions to automate your development workflow and make your life easier! Happy automating! + + +Sources + +main.yml is now ar root now working maybe 2 + + + + +