Deploy app via Github Action (#44)

.github/workflows/pages.yml

@@ -4,7 +4,8 @@ name: Deploy static content to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches:
+      - main
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -21,22 +22,39 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  # Single deploy job since we're just deploying
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+
+  build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+
+      - name: Setup Node.js environment
+        uses: actions/[email protected]
+
+      - name: Install packages with NPM
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
       - name: Setup Pages
         uses: actions/configure-pages@v1
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          # Upload entire repository
-          path: '.'
+          path: './build'
+
+  deploy:
+    # Add a dependency to the build job
+    needs: build
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    steps:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@main

package.json

@@ -6,8 +6,8 @@
         "game",
         "tetris"
     ],
-    "homepage": "https://github.com/ivyraine/wordtris",
-    "bugs": "https://github.com/ivyraine/wordtris/issues",
+    "homepage": "https://khivy.github.io/wordtris/",
+    "bugs": "https://github.com/khivy/wordtris/issues",
     "license": "MIT",
     "contributors": [
         {
@@ -20,12 +20,13 @@
     ],
     "type": "module",
     "browser": "src/index.tsx",
-    "repository": "github:ivyraine/wordtris",
+    "repository": "github:khivy/wordtris",
     "dependencies": {
         "a-set-of-english-words": "^1.0.0",
         "react": "^18.2.0",
+        "react-app-polyfill": "^3.0.0",
         "react-dom": "^18.2.0",
-        "styled-components": "^5.3.5",
+        "react-scripts": "^5.0.1",
         "web-vitals": "^2.1.4",
         "xstate": "^4.32.1"
     },
@@ -38,7 +39,19 @@
         "react-refresh": "0.10.0",
         "typescript": "latest",
         "@types/react": "^18.0.15",
-        "@types/react-dom": "^18.0.6",
-        "@types/styled-components": "^5.1.25"
+        "@types/react-dom": "^18.0.6"
+    },
+    "browserslist": {
+        "production": [
+            "defaults and supports es6-module"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "scripts": {
+        "build": "TSC_COMPILE_ON_ERROR=true react-scripts build"
     }
 }

src/index.tsx

@@ -1,3 +1,4 @@
+import 'react-app-polyfill/stable';
 import * as React from "react";
 import { Suspense } from "react";
 import * as ReactDOM from "react-dom/client";