version name

.github/actions/playwright/action.yml

@@ -0,0 +1,20 @@
+name: Playwright Tests
+description: Playwright Tests
+
+
+runs:
+  using: 'composite'
+  steps:
+     steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+      env:
+        PLAYWRIGHT_TEST_BASE_URL: 'https://przeprogramowani-frontend-bootstrap.vercel.app/'

.github/actions/verify-test/action.yml

@@ -0,0 +1,13 @@
+name: Verify and test
+description: Verify and test project
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Lint code
+      run: npm run lint
+      shell: bash
+
+    - name: Test code
+      run: npm run test
+      shell: bash

.github/workflows/deploy-netlify.yml

@@ -15,14 +15,13 @@ jobs:
       - name: Configure node
         uses: ./.github/actions/setup-project
 
-      - name: Lint code
-        run: npm run lint
-
-      - name: Test code
-        run: npm run test
+      - name: Verify and test code
+        uses: ./.github/actions/verify-test
 
       - name: Build the app
         run: npm run build
+        env:
+          VITE_ENVIRONMENT: 'Development'
 
       - name: Deploy to Netlify
         uses: nwtgck/[email protected]

.github/workflows/deploy-vercel.yml

@@ -15,14 +15,13 @@ jobs:
       - name: Configure node
         uses: ./.github/actions/setup-project
 
-      - name: Lint code
-        run: npm run lint
-
-      - name: Test code
-        run: npm run test
+      - name: Verify and test code
+        uses: ./.github/actions/verify-test
 
       - name: Build the app
         run: npm run build
+        env:
+          VITE_ENVIRONMENT: 'Staging'
 
       - name: Deploy app to Vercel production env
         uses: ./.github/actions/deploy-vercel
@@ -32,3 +31,10 @@ jobs:
         env:
           VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
           VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    needs: deploy
+    steps:
+      - name: Run playwright test
+        uses: ./.github/actions/playwright

.github/workflows/pull_request.yml

@@ -17,14 +17,13 @@ jobs:
       - name: Configure node
         uses: ./.github/actions/setup-project
 
-      - name: Lint code
-        run: npm run lint
-
-      - name: Test code
-        run: npm run test
+      - name: Verify and test code
+        uses: ./.github/actions/verify-test
 
       - name: Build the app
         run: npm run build
+        env:
+          VITE_ENVIRONMENT: 'Preview'
 
       - name: Deploy app to Vercel preview env
         uses: ./.github/actions/deploy-vercel
@@ -34,3 +33,4 @@ jobs:
         env:
           VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
           VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+          VITE_ENVIRONMENT: 'Preview'

.gitignore

@@ -7,5 +7,6 @@ node_modules
 
 
 .env
+.env.*
 
 /dist/

src/App.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
+import { VersionApp } from './components/VersionApp';
 
 const App = () => {
   return (
-    <div>
+    <div className="relative">
       <div className="bg-white rounded-lg shadow-sm p-4 mb-4">
         <h1 className="text-xl font-bold text-center">Rick and Morty - Fan Service !!!</h1>
       </div>
       <Outlet />
+      <div className="absolute -bottom-20 right-10">
+        <VersionApp />
+      </div>
     </div>
   );
 };

src/components/VersionApp.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useConfig } from '../context/ConfigContext';
+
+export const VersionApp = () => {
+  const { appVersion } = useConfig();
+  const viteEnv = import.meta.env.VITE_ENVIRONMENT;
+
+  console.log(import.meta.env);
+
+  return (
+    <div>
+      ENV: {viteEnv} VER: {appVersion}
+    </div>
+  );
+};

src/types/vite-env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly APP_VERSION: string;
+  readonly VITE_ENVIRONMENT: string;
 }
 
 interface ImportMeta {

vite.config.ts

@@ -2,7 +2,7 @@ import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite';
 import react from '@vitejs/plugin-react';
 import packageJson from './package.json';
 
-const env = loadEnv('', process.cwd(), 'XYZ');
+const env = loadEnv('', process.cwd(), 'VITE_ENVIRONMENT');
 
 console.log(env);