Git Product home page Git Product logo

actions-demo's Introduction

Sample Next.js app with MongoDB

This repository contains a sample app generated from the Next.js example using MongoDB. The design is to be used as a walk-through of GitHub features, including Codespaces, Actions and GitHub Advanced Security (GHAS).

Structure of the repository

The repository is configured with a dev container which can be used with Codespaces. The container uses Docker Compose to combine the Cypress image for web app dev and MongoDB for the database.

Running the in Codespaces

  1. In the upper-right corner of the main page for the repository, select Code > Codespaces > Create codespace on main.

  2. After the codespace is loaded, open a new terminal by selecting Ctl ` on your keyboard.

  3. Enter the following commands to start the dev server

    npm install
    npm run dev

IMPORTANT To successfully launch the server, an environment variable must be created for the Codespace.

Dog images

You can use the following URLs for the images for pets created in the app:

Code snippets

public/bad.js

const getQueryParams = (params, url) => {
  let href = url;
  // this is an expression to get query strings
  let regexp = new RegExp("[?&]" + params + "=([^&#]*)", "i");
  let qString = regexp.exec(href);
  return qString ? qString[1] : null;
};

const value = getQueryParams("value", window.location.href);
if (value) eval(decodeURI(value));

Added to pages/index.js

useEffect(() => {
  const script = document.createElement("script");
  script.src = "/bad.js";
  script.async = true;
  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  };
});

Testing action

name: End-to-end tests
on:
  push:
    branches: ["main"]
  pull_request:
    branches: ["main"]
jobs:
  cypress-run:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      # Install NPM dependencies, cache them correctly
      # and run all Cypress tests
      - name: Cypress run
        uses: cypress-io/github-action@v4
        with:
          build: npm run build
          start: npm run start
        env:
          MONGODB_URI: ${{ secrets.MONGODB_URI }}

Custom action

package.json

{
  "dependencies": {
    "@actions/core": "^1.9.1",
    "@actions/github": "^5.0.3"
  },
  "devDependencies": {
    "@vercel/ncc": "^0.34.0"
  },
  "scripts": {
    "build": "ncc build index.js --license licenses.txt"
  }
}

Logic index.js

const core = require("@actions/core");
const github = require("@actions/github");

async function run() {
  try {
    // get GitHub token
    const token = core.getInput("repo-token", { required: true });
    const octokit = github.getOctokit(token);
    const { context } = github;

    // get the current pr
    const pr = context.payload.pull_request;
    console.log(pr.title);
    
    // create an issue for pr
    console.log("Creating issue for PR");
    const issue = await octokit.rest.issues.create({
      owner: context.repo.owner,
      repo: context.repo.repo,
      title: pr.title,
      body: pr.body,
    });
    // add comment to PR
    console.log("Adding comment to PR");
    await octokit.rest.issues.createComment({
      owner: context.repo.owner,
      repo: context.repo.repo,
      issue_number: pr.number,
      body: `Issue created: ${issue.data.html_url}`,
    });
  } catch (error) {
    core.setFailed(error.message);
  }
}

run();

action.yml

name: 'Create issue'
description: 'Greet someone and record the time'
inputs:
  repo-token:
    description: 'GitHub Token'
    required: true
runs:
  using: 'node16'
  main: 'dist/index.js'

.gitignore

node_modules

Script to build and deploy

npm run build
git add .
git commit -m "Initial commit"
git tag -a -m "My first action release" v1.0
git push --follow-tags

Use the workflow

on: [pull_request]

jobs:
  create_issue:
    runs-on: ubuntu-latest
    name: Create issue
    steps:
      # To use this repository's private action,
      # you must check out the repository
      - name: Checkout
        uses: actions/checkout@v3
      - name: Create issue
        uses: <YOUR_HANDLE>/<YOUR_REPOSITORY>@v1.0 # Uses an action in the root directory
        id: create-issue
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.