Newest

.eslintrc.js

@@ -1,12 +1,14 @@
 module.exports = {
   "env": {
     "browser": true,
+    "node": true,
     "es6": true,
-    "jest/globals": true
+    "jest/globals": true,
+    "cypress/globals": true
   },
   "extends": [
     "eslint:recommended",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
   ],
   "parserOptions": {
     "ecmaFeatures": {
@@ -16,7 +18,7 @@ module.exports = {
     "sourceType": "module"
   },
   "plugins": [
-    "react", "jest"
+    "react", "jest", "cypress"
   ],
   "rules": {
     "indent": [
@@ -45,5 +47,10 @@ module.exports = {
     ],
     "no-console": "error",
     "react/prop-types": 0
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

.github/workflows/hello.yml

@@ -0,0 +1,21 @@
+name: Hello World!
+
+on:
+  push:
+    branches:
+      - master
+      # note that your "main" branch might be called main instead of master
+
+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,53 @@
+name: Deployment pipeline
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:    
+    branches: [master]    
+    types: [opened, synchronize]
+
+jobs:
+    simple_deployment_pipeline:
+        runs-on: ubuntu-20.04
+        steps:
+          - uses: actions/checkout@v3
+          - uses: actions/setup-node@v3
+            with:
+              node-version: '16'
+          - name: Install dependencies 
+            run: npm install  
+          - name: Check style        
+            run: npm run eslint
+          - name: Build
+            run: npm run build
+          - name: Test
+            run: npm run test
+          - name: e2e tests
+            uses: cypress-io/github-action@v5
+            with:
+              command: npm run test:e2e
+              start: npm run start-prod
+              wait-on: http://localhost:5000
+    build:
+      runs-on: ubuntu-latest
+      if: ${{ github.event_name == 'push' }}
+      needs: [simple_deployment_pipeline]
+      steps:
+        - name: Deploy to production
+          uses: johnbeynon/[email protected]
+          with:
+            service-id: ${{ secrets.RENDER_SERVICE_ID }}
+            api-key: ${{ secrets.RENDER_API_KEY }}
+    tag_release:
+      runs-on: ubuntu-20.04
+      if: ${{ github.event_name == 'push' }}
+      needs: [build, simple_deployment_pipeline]
+      steps:
+        - uses: actions/checkout@v3
+        - name: Bump version and push tag
+          uses: anothrNick/[email protected]
+          env:
+            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+            DEFAULT_BUMP: patch

.gitignore

@@ -1,2 +1,2 @@
 dist/
-node_modules/
+node_modules/

app.js

@@ -1,11 +1,20 @@
-const express = require("express");
-const app = express();
+const express = require('express')
+const app = express()
 
 // Heroku dynamically sets a port
-const PORT = process.env.PORT || 5000;
+const PORT = process.env.PORT || 5000
 
-app.use(express.static("dist"));
+app.use(express.static('dist'))
+
+app.get('/version', (req, res) => {
+  res.send('24') // change this string to ensure a new version deployed
+})
+
+app.get('/health', (req, res) => {
+  res.send('ok')
+})
 
 app.listen(PORT, () => {
-  console.log("server started on port 5000");
-});
+  // eslint-disable-next-line no-console
+  console.log('server started on port 5000')
+})

build_step.sh

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

cypress.config.js

@@ -0,0 +1,10 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    // eslint-disable-next-line no-unused-vars
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+})

cypress/e2e/pokemon.cy.js

@@ -0,0 +1,17 @@
+describe('Pokedex', function() {
+  beforeEach(function() {
+    cy.visit('http://localhost:5000')
+  })
+  it('front page can be opened', function() {
+    cy.contains('ivysaur')
+    cy.contains('Pokémon and Pokémon character names are trademarks of Nintendo.')
+  })
+  it('Navigation works', () => {
+    cy.contains('ivysaur')
+    cy.contains('kakuna').click()
+    cy.contains('ivysaur').should('not.exist')
+    cy.contains('Next').click()
+    cy.contains('kakuna').should('not.exist')
+    cy.contains('beedrill')
+  })
+})

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

exercise1.md

@@ -0,0 +1,31 @@
+In the JavaScript ecosystem, specific tools cater to the common steps in a CI setup.
+
+For linting, ESLint is a popular choice that analyzes JavaScript code for errors, enforces coding styles, and ensures consistency across the codebase.
+
+When it comes to testing, Cypress is widely used for end-to-end testing of modern web applications. It provides a feature-rich framework with a powerful API, real-time reloading, and easy debugging.
+
+For building JavaScript applications, Webpack is a popular bundler that handles dependency management, asset loading, and code optimization for production deployments.
+
+Besides Jenkins and GitHub Actions, alternative CI tools like Travis CI and CircleCI exist. Travis CI is a cloud-based service that integrates seamlessly with GitHub repositories, offering simple setup and support for test execution and deployments. CircleCI provides both cloud-based and self-hosted options, featuring parallel workflows, dependency caching, and flexible configuration.
+
+Deciding between a self-hosted or cloud-based environment depends on factors like budget, infrastructure requirements, and team expertise. As a beginner, a cloud-based solution may be more practical, eliminating the need for infrastructure management, providing scalability, and comprehensive documentation and support.
+
+To make an informed decision, consider project size, budget constraints, infrastructure capabilities, and the team's familiarity with self-hosted environments. Weighing these factors helps determine whether a cloud-based or self-hosted setup is more suitable for the JavaScript application's CI pipeline.
+
+
+
+In the world of JavaScript, there are these tools that you can use for setting up CI stuff.
+
+For checking code errors and making sure everything looks good there's ESLint. It looks at your JavaScript code, finds mistakes and keeps things consistent.
+
+When it comes to testing, there's a testing library called Cypress. It's all about testing your web apps from start to finish. It has a bunch of cool features like an easy interface, real-time reloading, and making it really easyu to figure out what went wrong.
+
+Then there's Webpack for building your JavaScript apps. It handles all the complex things like managing dependencies and optimizing your code so that it runs fast when it's out in the real world.
+
+Now, apart from Jenkins and GitHub Actions, there are some other tools you can use for CI. Like Travis CI, it's a cloud based tool that works nicely with your GitHub projects. It helps you run tests and deploy your app to different places.
+
+Another option is CircleCI. They have both cloud and self-hosted options. It's got cool features like running things in parallel and caching stuff to make things faster.
+
+Now, when it comes to choosing between a self-hosted or cloud-based setup, it can be confusing. As a beginner, it might be easier to go with a cloud-based option. You don't have to worry about setting up your own servers and stuff. Also they usually have good documentation and support to help you out.
+
+To decide, think about things like how big your project is, how much money you have and how good you are with setting up and maintaining servers. These things will help you figure out whether a cloud-based or self-hosted setup is better for your CI stuff.