Develop

.eslintrc.js

@@ -1,49 +1,34 @@
 module.exports = {
-  "env": {
-    "browser": true,
-    "es6": true,
-    "jest/globals": true
+  settings: {
+    react: {
+      version: 'detect' // Автоматическое определение версии React
+    }
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended"
-  ],
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
+  env: {
+    browser: true,
+    es6: true,
+    'jest/globals': true,
+    node: true
+  },
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
     },
-    "ecmaVersion": 2018,
-    "sourceType": "module"
+    ecmaVersion: 2018,
+    sourceType: 'module'
   },
-  "plugins": [
-    "react", "jest"
-  ],
-  "rules": {
-    "indent": [
-      "error",
-        2
-      ],
-    "linebreak-style": [
-      "error",
-      "unix"
-    ],
-    "quotes": [
-      "error",
-      "single"
-    ],
-    "semi": [
-      "error",
-      "never"
-    ],
-    "eqeqeq": "error",
-    "no-trailing-spaces": "error",
-    "object-curly-spacing": [
-      "error", "always"
-    ],
-    "arrow-spacing": [
-      "error", { "before": true, "after": true }
-    ],
-    "no-console": "error",
-    "react/prop-types": 0
+  plugins: ['react', 'jest'],
+  rules: {
+    indent: ['error', 2],
+    'linebreak-style': ['error', 'unix'],
+    quotes: ['error', 'single'],
+    semi: ['error', 'never'],
+    eqeqeq: 'error',
+    'no-trailing-spaces': 'error',
+    'object-curly-spacing': ['error', 'always'],
+    'arrow-spacing': ['error', { before: true, after: true }],
+    'no-console': 'off',
+    'react/prop-types': 0
   }
 }

.github/workflows/hello.yml

@@ -0,0 +1,20 @@
+name: Hello World!
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  hello_world_job:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Say hello
+        run: |
+          echo "Hello World!"
+      - name: Now it is
+        run: |
+          date
+      - name: Directory content
+        run: |
+          ls -l

.github/workflows/pipeline.yml

@@ -0,0 +1,121 @@
+name: Deployment pipeline
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches: [main]
+    types: [opened, synchronize]
+
+env:
+  SKIP_DEPLOYMENT: ${{ contains(join(github.event.commits.*.message, ' '), '#skip') }}
+
+jobs:
+  simple_deployment_pipeline:
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Lint
+        run: npm run eslint
+        id: lint-check
+
+      - name: Build
+        run: npm run build
+        id: build-check
+        continue-on-error: true
+
+      - name: Build Failure Notification
+        if: steps.build-check.outcome == 'failure'
+        run: |
+          BASE_URL="${{ secrets.BASE_URL }}"
+          WEBHOOK_PATH="${{ secrets.WEBHOOK_PATH }}"
+          FULL_URL="${BASE_URL}${WEBHOOK_PATH}"
+          CURRENT_TIME=$(date +"%Y-%m-%d %H:%M:%S")
+          curl -X POST -H "Content-Type: application/json" -d '{
+            "username": "lemon196417",
+            "content": "Build Failure Detected",
+            "embeds": [{
+              "title": "Build Failure",
+              "description": "Commit [${{ github.sha }}](${{ github.server_url }}/${{ github.repository }}/commit/${{ github.sha }}) by ${{ github.actor }} broke the build. You can view the [workflow run](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}) for more details.",
+              "color": 15158332,
+              "footer": {
+                "text": "Severity: Error • '"$CURRENT_TIME"'"
+              }
+            }]
+          }' "$FULL_URL"
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Test
+        run: npm run test
+        id: test-check
+
+      - name: Run Playwright tests
+        run: npm run test:e2e
+        id: test-e2e-check
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+      - name: Trigger deployment
+        if: github.ref == 'refs/heads/main' && env.SKIP_DEPLOYMENT == 'false'
+        run: curl https://api.render.com/deploy/srv-${{ secrets.RENDER_SERVICE_ID }}?key=${{ secrets.RENDER_API_KEY }}
+
+      - name: Deploy to Render
+        if: github.ref == 'refs/heads/main' && env.SKIP_DEPLOYMENT == 'false'
+        run: |
+          echo "Deploying to Render"
+          git push https://github.com/lemon1964/full-stack-open-pokedex.git HEAD:main
+
+      - name: Send Discord Notification on Successful Deployment
+        if: github.ref == 'refs/heads/main' && env.SKIP_DEPLOYMENT == 'false'
+        run: |
+          BASE_URL="${{ secrets.BASE_URL }}"
+          WEBHOOK_PATH="${{ secrets.WEBHOOK_PATH }}"
+          FULL_URL="${BASE_URL}${WEBHOOK_PATH}"
+          CURRENT_TIME=$(date +"%Y-%m-%d %H:%M:%S")
+          curl -X POST -H "Content-Type: application/json" -d '{
+            "username": "lemon196417",
+            "content": "A new version of Pokedex deployed!",
+            "embeds": [{
+              "title": "Deployment Details",
+              "description": "Deployed to [full-stack-open-pokedex-render](https://full-stack-open-pokedex-op08.onrender.com/) by lemon1964",
+              "color": 3066993,
+              "footer": {
+                "text": "Severity: Informational • '"$CURRENT_TIME"'"
+              }
+            }]
+          }' "$FULL_URL"
+
+      - name: Log Webhook Result
+        run: echo "Webhook message sent successfully."
+
+
+  tag_release:
+    needs: [simple_deployment_pipeline]
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Bump version and push tag
+        if: github.ref == 'refs/heads/main' && env.SKIP_DEPLOYMENT == 'false'
+        uses: anothrNick/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          WITH_V: true
+

.github/workflows/schedule.yml

@@ -0,0 +1,20 @@
+name: Schedule
+
+on:
+  schedule:
+    - cron: '0 15 1 * *'
+  workflow_dispatch:
+
+jobs:
+  test_schedule:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Check the deployed service URL
+        uses: jtalk/url-health-check-action@v4
+        with:
+          url: https://full-stack-open-pokedex-op08.onrender.com/health
+          follow-redirect: false
+          max-attempts: 3
+          retry-delay: 10s
+
+

.gitignore

@@ -1,2 +1,6 @@
 dist/
-node_modules/
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.prettierrc

@@ -0,0 +1,9 @@
+{
+    "singleQuote": true,
+    "semi": false,
+    "trailingComma": "none",
+    "printWidth": 80,
+    "tabWidth": 2,
+    "endOfLine": "lf"
+  }
+

README.md

@@ -1,15 +1,64 @@
-# Full Stack open CI/CD
+# Full Stack Open Course Assignments, Part 11
 
-This repository is used for the CI/CD module of the Full stack open course
+This repository contains a project from **Part 11** of the Full Stack Open course, based on the [full-stack-open-pokedex](https://github.com/fullstack-hy2020/full-stack-open-pokedex) project with a Webpack configuration. The project website features a collection of Pokemon, each with its own page containing detailed information. The project includes a full CI/CD deployment pipeline.
 
-Fork the repository to complete course exercises
+A custom **Blogs** project was implemented based on the full-stack-open-pokedex project at [https://github.com/lemon1964/Blogs.git](https://github.com/lemon1964/Blogs.git). The **blogs_backend** and **blogs_redux** projects from Part 7 of the Full Stack Open course were used as the backend and frontend templates. Both projects were placed in a shared repository under `client` and `server` folders, and the configuration files and `package.json` were refactored. Otherwise, the CI/CD deployment for the **Blogs** project is identical to that of the full-stack-open-pokedex project.
 
-## Commands
+### Project Overview and Steps
 
-Start by running `npm install` inside the project folder
+**full-stack-open-pokedex**:
+- Created a production build of the project.
+- Set up a workflow in the `hello.yml` file that displays a "Hello World!" message to the user.
+- The main workflows in GitHub Actions are defined in the `pipeline.yml` file, described below.
+- Implemented the **Lint** workflow.
+- Implemented the **Build** workflow.
+- Fixed jest tests and wrote end-to-end tests with Playwright.
+- Created the **Test** workflow.
+- Created the **Run Playwright Tests** workflow.
+- Deployed the app to Render.
+- Implemented auto-deployment using Render's deploy hook.
+- Set up a health check at the `/health` endpoint.
+- Created a new `develop` branch and opened a pull request to the `main` branch.
+- Added version control automation with the **Bump version and push tag** feature.
+- Configured commit messages with `#skip` to exclude deployments and mark tagged releases.
+- Protected the `main` branch, requiring approval for all pull requests and passing all status checks before merging.
+- Set up notifications to Discord for successful deployments and error reports in case of build failures.
+- Added a **schedule.yml** file to schedule a monthly health check of the deployed app by pinging `/health`.
+
+### How to Use
+
+1. **Clone the repository**:
+   ```sh
+   git clone https://github.com/lemon1964/full-stack-open-pokedex.git
+   ```
+
+2. **Install dependencies**:
+   ```sh
+   npm install
+   ```
+
+3. **Run the project locally**:
+   ```sh
+   npm run dev
+   ```
+   Make sure it works at [http://localhost:8080/](http://localhost:8080/).
+
+4. **Full Check**:
+   To fully check the project, you need to:
+   - Create a new GitHub repository.
+   - Configure it according to the `.yml` files provided in the project.
+   - Deploy the project to Render.
+
+5. **Full-stack-open-pokedex on Render**:
+   You can check the deployed **Pokedex** project at [https://full-stack-open-pokedex-op08.onrender.com/](https://full-stack-open-pokedex-op08.onrender.com/).
+
+6. **Blogs on Render**:
+   You can check the deployed **Blogs** project at [https://blogs-jaml.onrender.com/](https://blogs-jaml.onrender.com/).  
+   You can log in using the following credentials:  
+   **Username**: `admin`  
+   **Password**: `admin`
+
+---
+
+If you have any questions or need additional clarification, feel free to contact us!
 
-`npm start` to run the webpack dev server
-`npm test` to run tests
-`npm run eslint` to run eslint
-`npm run build` to make a production build
-`npm run start-prod` to run your production build

app.js

@@ -1,11 +1,20 @@
-const express = require("express");
-const app = express();
+const express = require('express')
+const app = express()
+
+app.get('/health', (req, res) => {
+  res.send('Health is fine!')
+})
+// app.get('/health', (req, res) => {
+//   // eslint-disable-next-line no-constant-condition
+//   if (true) throw('error...  ')
+//   res.send('ok')
+// })
 
 // get the port from env variable
-const PORT = process.env.PORT || 5000;
+const PORT = process.env.PORT || 5000
 
-app.use(express.static("dist"));
+app.use(express.static('dist'))
 
 app.listen(PORT, () => {
-  console.log(`server started on port ${PORT}`);
-});
+  console.log(`server started on port ${PORT}`)
+})

build_step.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+echo "Build script"
+npm install
+npm run build

exercise1.md

@@ -0,0 +1,13 @@
+**CI/CD for Python Applications**
+
+When setting up a CI/CD pipeline for Python applications, the key steps are linting, testing, and building. There are several popular tools in the Python ecosystem for each of these steps.
+
+- **Linting**. For static code analysis in Python, a commonly used tool is `Flake8`, which checks the code for compliance with PEP 8, the Python style standard. You can also use `Pylint`, which provides more detailed reports on the quality of the code.
+- **Testing**. For automated code testing in Python, `pytest` and `unittest` libraries are popular. They allow you to run tests, and also integrate with various CI platforms to run tests automatically on each commit.
+- **Build**. Building an application involves preparing distributions or containers for deployment. In Python, you can use `setuptools` to create packages, and Docker to containerize the application.
+
+Alternatives for setting up CI/CD include CircleCI, TravisCI, and GitLab CI. CircleCI works particularly well with Docker and parallel builds, which can speed up your pipeline. TravisCI integrates with GitHub and offers free plans for open-source projects. GitLab CI is a built-in solution for GitLab users, making it an attractive option for those who use the platform for source control.
+
+Choosing between an on-premises or cloud CI/CD environment depends on a number of factors. Cloud-based solutions, such as GitHub Actions or CircleCI, simplify the setup process and provide the scalability of the cloud, which is especially useful for team collaboration. On-premises solutions can be useful for proprietary or mission-critical applications that require full control of the environment. However, they require more resources and time to maintain the infrastructure.
+
+To make a decision, you need to weigh your security requirements, maintenance costs, and scalability. If the team is small and the project does not require specific conditions, cloud solutions will be preferable.