2 Set up GitHub Actions workflow

.github/workflows/preview.yaml

@@ -0,0 +1,21 @@
+name: Vercel Preview Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches-ignore:
+      - main
+jobs:
+  Deploy-Preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

.github/workflows/production.yaml

@@ -0,0 +1,21 @@
+name: Vercel Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - main
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vercel

src/.env

@@ -0,0 +1 @@
+VERCEL_URL=https://analog-fe.vercel.app

src/components/App/App.js

@@ -1,4 +1,5 @@
 import Welcome from '../Welcome/Welcome';
+import Dashboard from '../Dashboard/Dashboard';
 import { useState, useEffect } from 'react';
 import { fetchData } from '../../apiCalls';
 
@@ -8,14 +9,15 @@ function App() {
   useEffect(() => {
     fetchData()
     .then((data) => {
-      // setData(data)
+      setData(data)
       console.log(`useEffect`, data)
     })
   }, [])
 
   return (
     <>
       <Welcome/>
+      <Dashboard data={data}/>
     </>
   );
 }

src/components/Welcome/Welcome.js

@@ -1,7 +1,7 @@
 function Welcome() {
   return (
     <>
-    <h1>Welcome</h1>
+    <div className="flex justify-center">Welcome</div>
     </>
   );
 }

src/vercel.json

@@ -0,0 +1,7 @@
+{
+  "git": {
+    "deploymentEnabled": {
+      "main": false
+    }
+  }
+}

tailwind.config.js

@@ -1,6 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{html,js}"],
+  content: [
+    "./src/components/**/*.{html,js}",
+    "./public/index.html",
+  ],
   theme: {
     extend: {},
   },