From 0c8666e1e3d47ab16c9f3fe666206ef02a55a4ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonas=20Bj=C3=B8ralt?= <61310258+jonasbjoralt@users.noreply.github.com> Date: Thu, 12 Oct 2023 10:29:53 +0200 Subject: [PATCH] Do formatting and add checks. Refactor deploy pipeline (#129) --- .github/workflows/deploy-backend-dev.yml | 54 ------------------ .github/workflows/deploy-backend-prod.yml | 48 ---------------- ...deploy-frontend-dev.yml => deploy-dev.yml} | 44 ++++++++++++++- ...ploy-frontend-prod.yml => deploy-prod.yml} | 44 ++++++++++++++- .github/workflows/test-frontend.yml | 25 ++++++++- frontend/.prettierrc | 2 +- frontend/README.md | 4 +- frontend/next.config.js | 6 +- frontend/package.json | 3 +- frontend/postcss.config.js | 2 +- .../ThemeRegistry/ThemeRegistry.tsx | 24 ++++---- .../src/components/ThemeRegistry/theme.ts | 20 +++---- frontend/src/components/VibesNavBar.tsx | 56 +++++++++++++------ frontend/src/components/VibesNavBarTabs.tsx | 29 +++++----- frontend/src/middleware.ts | 26 +++++---- 15 files changed, 206 insertions(+), 181 deletions(-) delete mode 100644 .github/workflows/deploy-backend-dev.yml delete mode 100644 .github/workflows/deploy-backend-prod.yml rename .github/workflows/{deploy-frontend-dev.yml => deploy-dev.yml} (67%) rename .github/workflows/{deploy-frontend-prod.yml => deploy-prod.yml} (66%) diff --git a/.github/workflows/deploy-backend-dev.yml b/.github/workflows/deploy-backend-dev.yml deleted file mode 100644 index eab33e9c..00000000 --- a/.github/workflows/deploy-backend-dev.yml +++ /dev/null @@ -1,54 +0,0 @@ -name: (DEV) Deploy Backend - -on: - push: - paths: - - backend/** - branches: - - main - workflow_dispatch: - - -env: - AZURE_WEBAPP_NAME: vibes-backend-dev # set this to your application's name - AZURE_WEBAPP_PACKAGE_PATH: './build' # set this to the path to your web app project, defaults to the repository root - DOTNET_VERSION: '7.x.x' # set this to the dot net version to use - -jobs: - build-backend-and-deploy: - runs-on: ubuntu-latest - environment: Development - - steps: - # Checkout the repo - - uses: actions/checkout@main - - # Setup .NET Core SDK - - name: Setup .NET Core - uses: actions/setup-dotnet@v1 - with: - dotnet-version: ${{ env.DOTNET_VERSION }} - - # Run dotnet build and publish - - name: Build - working-directory: backend/Api/ - run: | - dotnet restore - dotnet build --configuration Release - dotnet publish -c Release --property:PublishDir='./build' - - # Deploy to Azure Web apps - - name: Deploy to App Service (NO) - uses: azure/webapps-deploy@v2 - with: - app-name: vibes-backend-norway-dev - publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_BACKEND_NO }} # Define secret variable in repository settings as per action documentation - package: 'backend/Api/build' - - # Deploy to Azure Web apps - - name: Deploy to App Service (SE) - uses: azure/webapps-deploy@v2 - with: - app-name: vibes-backend-sweden-dev - publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_BACKEND_SE }} # Define secret variable in repository settings as per action documentation - package: 'backend/Api/build' \ No newline at end of file diff --git a/.github/workflows/deploy-backend-prod.yml b/.github/workflows/deploy-backend-prod.yml deleted file mode 100644 index 6f7deda7..00000000 --- a/.github/workflows/deploy-backend-prod.yml +++ /dev/null @@ -1,48 +0,0 @@ -name: (PROD) Deploy Backend - -on: - workflow_dispatch: - -env: - AZURE_WEBAPP_NAME: vibes-backend-prod # set this to your application's name - AZURE_WEBAPP_PACKAGE_PATH: './build' # set this to the path to your web app project, defaults to the repository root - DOTNET_VERSION: '7.x.x' # set this to the dot net version to use - -jobs: - build-backend-and-deploy: - runs-on: ubuntu-latest - environment: Production - - steps: - # Checkout the repo - - uses: actions/checkout@main - - # Setup .NET Core SDK - - name: Setup .NET Core - uses: actions/setup-dotnet@v1 - with: - dotnet-version: ${{ env.DOTNET_VERSION }} - - # Run dotnet build and publish - - name: Build - working-directory: backend/Api/ - run: | - dotnet restore - dotnet build --configuration Release - dotnet publish -c Release --property:PublishDir='./build' - - # Deploy to Azure Web apps - - name: Deploy to App Service (NO) - uses: azure/webapps-deploy@v2 - with: - app-name: vibes-backend-norway-prod - publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_BACKEND_NO }} # Define secret variable in repository settings as per action documentation - package: 'backend/Api/build' - - # Deploy to Azure Web apps - - name: Deploy to App Service (SE) - uses: azure/webapps-deploy@v2 - with: - app-name: vibes-backend-sweden-prod - publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_BACKEND_SE }} # Define secret variable in repository settings as per action documentation - package: 'backend/Api/build' \ No newline at end of file diff --git a/.github/workflows/deploy-frontend-dev.yml b/.github/workflows/deploy-dev.yml similarity index 67% rename from .github/workflows/deploy-frontend-dev.yml rename to .github/workflows/deploy-dev.yml index 07f2fad1..9eaa9fa6 100644 --- a/.github/workflows/deploy-frontend-dev.yml +++ b/.github/workflows/deploy-dev.yml @@ -3,7 +3,7 @@ # Primary ref: https://dev.to/ckgrafico/deploying-nextjs-to-azure-web-app-with-github-actions-1o9c -name: (DEV) Deploy frontend +name: (DEV) Deploy on: push: @@ -14,7 +14,8 @@ on: workflow_dispatch: jobs: - build-and-deploy: + build-and-deploy-frontend: + name: 'Build and deploy Frontend' runs-on: ubuntu-latest environment: Development @@ -87,3 +88,42 @@ jobs: slot-name: 'Production' publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_FRONTEND_SE }} package: ./frontend/build-se/standalone + + build-and-deploy-backend: + name: 'Build and deploy Backend' + runs-on: ubuntu-latest + environment: Development + + steps: + # Checkout the repo + - uses: actions/checkout@main + + # Setup .NET Core SDK + - name: Setup .NET Core + uses: actions/setup-dotnet@v1 + with: + dotnet-version: '7.x.x' + + # Run dotnet build and publish + - name: Build + working-directory: backend/Api/ + run: | + dotnet restore + dotnet build --configuration Release + dotnet publish -c Release --property:PublishDir='./build' + + # Deploy to Azure Web apps + - name: Deploy to App Service (NO) + uses: azure/webapps-deploy@v2 + with: + app-name: vibes-backend-norway-dev + publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_BACKEND_NO }} # Define secret variable in repository settings as per action documentation + package: 'backend/Api/build' + + # Deploy to Azure Web apps + - name: Deploy to App Service (SE) + uses: azure/webapps-deploy@v2 + with: + app-name: vibes-backend-sweden-dev + publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_BACKEND_SE }} # Define secret variable in repository settings as per action documentation + package: 'backend/Api/build' diff --git a/.github/workflows/deploy-frontend-prod.yml b/.github/workflows/deploy-prod.yml similarity index 66% rename from .github/workflows/deploy-frontend-prod.yml rename to .github/workflows/deploy-prod.yml index 01eb38b8..93d4e22a 100644 --- a/.github/workflows/deploy-frontend-prod.yml +++ b/.github/workflows/deploy-prod.yml @@ -3,13 +3,14 @@ # Primary ref: https://dev.to/ckgrafico/deploying-nextjs-to-azure-web-app-with-github-actions-1o9c -name: (PROD) Deploy frontend +name: (PROD) Deploy on: workflow_dispatch: jobs: - build-and-deploy: + build-and-deploy-frontend: + name: 'Build and deploy Frontend' runs-on: ubuntu-latest environment: Production @@ -83,3 +84,42 @@ jobs: publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_FRONTEND_SE }} package: ./frontend/build-se/standalone + build-and-deploy-backend: + name: 'Build and deploy Backend' + runs-on: ubuntu-latest + environment: Production + + steps: + # Checkout the repo + - uses: actions/checkout@main + + # Setup .NET Core SDK + - name: Setup .NET Core + uses: actions/setup-dotnet@v1 + with: + dotnet-version: '7.x.x' + + # Run dotnet build and publish + - name: Build + working-directory: backend/Api/ + run: | + dotnet restore + dotnet build --configuration Release + dotnet publish -c Release --property:PublishDir='./build' + + # Deploy to Azure Web apps + - name: Deploy to App Service (NO) + uses: azure/webapps-deploy@v2 + with: + app-name: vibes-backend-norway-prod + publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_BACKEND_NO }} # Define secret variable in repository settings as per action documentation + package: 'backend/Api/build' + + # Deploy to Azure Web apps + - name: Deploy to App Service (SE) + uses: azure/webapps-deploy@v2 + with: + app-name: vibes-backend-sweden-prod + publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_BACKEND_SE }} # Define secret variable in repository settings as per action documentation + package: 'backend/Api/build' + diff --git a/.github/workflows/test-frontend.yml b/.github/workflows/test-frontend.yml index c9352287..bc5adfe3 100644 --- a/.github/workflows/test-frontend.yml +++ b/.github/workflows/test-frontend.yml @@ -1,11 +1,11 @@ -name: Playwright Tests +name: Frontend Tests on: push: branches: [ main ] pull_request: branches: [ main ] jobs: - test: + playwright: timeout-minutes: 60 runs-on: ubuntu-latest steps: @@ -28,3 +28,24 @@ jobs: name: playwright-report path: ./frontend/playwright-report/ retention-days: 30 + + formatting: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 18 + - name: Install dependencies + working-directory: ./frontend + run: yarn + - name: Build + working-directory: ./frontend + run: yarn next build + - name: Lint + working-directory: ./frontend + run: yarn next lint + - name: Check formatting + working-directory: ./frontend + run: yarn prettier:ci + \ No newline at end of file diff --git a/frontend/.prettierrc b/frontend/.prettierrc index 9e26dfee..0967ef42 100644 --- a/frontend/.prettierrc +++ b/frontend/.prettierrc @@ -1 +1 @@ -{} \ No newline at end of file +{} diff --git a/frontend/README.md b/frontend/README.md index 25021d56..8bd0ae5c 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -42,8 +42,8 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next See [project root README](../README.md). - ## Issues + This seem to be a bug in the MUI package. It is only triggered when importing styled from `@mui/material`: ```ts @@ -53,4 +53,4 @@ import { styled } from "@mui/material"; import { styled } from "@mui/material/styles"; ``` -https://github.com/vercel/next.js/issues/55663 \ No newline at end of file +https://github.com/vercel/next.js/issues/55663 diff --git a/frontend/next.config.js b/frontend/next.config.js index 0a0e151d..5c827a34 100644 --- a/frontend/next.config.js +++ b/frontend/next.config.js @@ -16,10 +16,10 @@ const nextConfig = { distDir: "build", swcMinify: true, modularizeImports: { - '@mui/icons-material': { - transform: '@mui/icons-material/{{member}}', + "@mui/icons-material": { + transform: "@mui/icons-material/{{member}}", }, - } + }, }; module.exports = nextConfig; diff --git a/frontend/package.json b/frontend/package.json index 58be589b..01f0e1de 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -7,7 +7,8 @@ "start-test": "NEXT_PUBLIC_NO_AUTH=true next dev", "build": "next build", "start": "next start", - "lint": "next lint" + "lint": "next lint", + "prettier:ci": "prettier --check . " }, "dependencies": { "@azure/msal-browser": "^3.1.0", diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js index 33ad091d..12a703d9 100644 --- a/frontend/postcss.config.js +++ b/frontend/postcss.config.js @@ -3,4 +3,4 @@ module.exports = { tailwindcss: {}, autoprefixer: {}, }, -} +}; diff --git a/frontend/src/components/ThemeRegistry/ThemeRegistry.tsx b/frontend/src/components/ThemeRegistry/ThemeRegistry.tsx index 6f21c946..8a1b9fe9 100644 --- a/frontend/src/components/ThemeRegistry/ThemeRegistry.tsx +++ b/frontend/src/components/ThemeRegistry/ThemeRegistry.tsx @@ -1,14 +1,18 @@ -import CssBaseline from '@mui/material/CssBaseline'; -import { ThemeProvider } from '@mui/material/styles'; -import * as React from 'react'; -import theme from './theme'; +import CssBaseline from "@mui/material/CssBaseline"; +import { ThemeProvider } from "@mui/material/styles"; +import * as React from "react"; +import theme from "./theme"; -export default function ThemeRegistry({ children }: { children: React.ReactNode }) { +export default function ThemeRegistry({ + children, +}: { + children: React.ReactNode; +}) { return ( - - {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} - - {children} - + + {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} + + {children} + ); } diff --git a/frontend/src/components/ThemeRegistry/theme.ts b/frontend/src/components/ThemeRegistry/theme.ts index b37973e4..58ec6b97 100644 --- a/frontend/src/components/ThemeRegistry/theme.ts +++ b/frontend/src/components/ThemeRegistry/theme.ts @@ -1,24 +1,22 @@ -import { createTheme } from '@mui/material/styles'; +import { createTheme } from "@mui/material/styles"; const theme = createTheme({ typography: { - fontFamily: [ - "Graphik-Regular", "Helvetica", "Arial" - ].join(','), + fontFamily: ["Graphik-Regular", "Helvetica", "Arial"].join(","), button: { - textTransform: "none" - } + textTransform: "none", + }, }, palette: { - mode: 'light', + mode: "light", primary: { - main: 'rgba(66, 61, 137, 1)', - contrastText: "#fff" + main: "rgba(66, 61, 137, 1)", + contrastText: "#fff", }, secondary: { - main: 'rgba(66, 61, 137, 1)', + main: "rgba(66, 61, 137, 1)", }, - } + }, }); export default theme; diff --git a/frontend/src/components/VibesNavBar.tsx b/frontend/src/components/VibesNavBar.tsx index 7299e077..e4670d14 100644 --- a/frontend/src/components/VibesNavBar.tsx +++ b/frontend/src/components/VibesNavBar.tsx @@ -4,22 +4,42 @@ import VibesNavBarTabs from "./VibesNavBarTabs"; import SignInSignOutButton from "./vibes-buttons/SignInSignOutButton"; export default function VibesAppBar() { - return ( - - - - - - - Variant logo - - - - - ) + return ( + + + + + + + Variant logo + + + + + ); } diff --git a/frontend/src/components/VibesNavBarTabs.tsx b/frontend/src/components/VibesNavBarTabs.tsx index 23774619..8053446f 100644 --- a/frontend/src/components/VibesNavBarTabs.tsx +++ b/frontend/src/components/VibesNavBarTabs.tsx @@ -2,23 +2,24 @@ import { Tabs, TabsProps } from "@mui/material"; import { styled } from "@mui/material/styles"; const VibesNavBarTabs = styled((props: VibesNavBarTabsProps) => ( - }} /> + }} + /> ))({ - '& .MuiTabs-indicator': { - display: 'flex', - justifyContent: 'center', - backgroundColor: 'transparent', - }, - '& .MuiTabs-indicatorSpan': { - width: '100%', - backgroundColor: 'rgba(104, 233, 221, 1)', - }, + "& .MuiTabs-indicator": { + display: "flex", + justifyContent: "center", + backgroundColor: "transparent", + }, + "& .MuiTabs-indicatorSpan": { + width: "100%", + backgroundColor: "rgba(104, 233, 221, 1)", + }, }); interface VibesNavBarTabsProps extends TabsProps { - children?: React.ReactNode; + children?: React.ReactNode; } -export default VibesNavBarTabs; \ No newline at end of file +export default VibesNavBarTabs; diff --git a/frontend/src/middleware.ts b/frontend/src/middleware.ts index 1187f609..f6a6dda1 100644 --- a/frontend/src/middleware.ts +++ b/frontend/src/middleware.ts @@ -1,4 +1,4 @@ -import { NextRequest, NextResponse } from 'next/server' +import { NextRequest, NextResponse } from "next/server"; // nonce CSP is currently disabled because of bug: // https://github.com/vercel/next.js/issues/55638 @@ -6,28 +6,30 @@ import { NextRequest, NextResponse } from 'next/server' export function middleware(request: NextRequest) { const cspHeader = ` default-src 'self'; - script-src 'self' 'unsafe-inline' http://localhost https: ${process.env.NODE_ENV === 'production' ? '' : `'unsafe-eval'`}; + script-src 'self' 'unsafe-inline' http://localhost https: ${ + process.env.NODE_ENV === "production" ? "" : `'unsafe-eval'` + }; style-src 'self' 'unsafe-inline'; font-src 'self' anima-uploads.s3.amazonaws.com fonts.gstatic.com; connect-src 'self' https://login.microsoftonline.com; - ` - const requestHeaders = new Headers(request.headers) + `; + const requestHeaders = new Headers(request.headers); // requestHeaders.set('x-nonce', nonce) requestHeaders.set( // 'Content-Security-Policy', - 'Content-Security-Policy-Report-Only', // This is used for now to not break + "Content-Security-Policy-Report-Only", // This is used for now to not break // Replace newline characters and spaces - cspHeader.replace(/\s{2,}/g, ' ').trim() - ) + cspHeader.replace(/\s{2,}/g, " ").trim(), + ); return NextResponse.next({ headers: requestHeaders, request: { headers: requestHeaders, }, - }) + }); } export const config = { @@ -40,11 +42,11 @@ export const config = { * - favicon.ico (favicon file) */ { - source: '/((?!api|_next/static|_next/image|favicon.ico).*)', + source: "/((?!api|_next/static|_next/image|favicon.ico).*)", missing: [ - { type: 'header', key: 'next-router-prefetch' }, - { type: 'header', key: 'purpose', value: 'prefetch' }, + { type: "header", key: "next-router-prefetch" }, + { type: "header", key: "purpose", value: "prefetch" }, ], }, ], -} \ No newline at end of file +};