Testing gh actions

.dockerignore

@@ -0,0 +1 @@
+node_modules

.env.prod

@@ -0,0 +1,2 @@
+SKIP_PREFLIGHT_CHECK=true
+REACT_APP_API_URL=https://minesweeper.makecodes.dev

.github/workflows/main.yml

@@ -0,0 +1,26 @@
+name: Creates a docker image for production
+
+on:
+  push:
+    branches: [master]
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+        with:
+          fetch-depth: 1
+      - name: Docker Build & Push to GitHub Package
+        uses: opspresso/action-docker@master
+        with:
+          args: --docker
+        env:
+          USERNAME: imakecodes
+          PASSWORD: ${{ secrets.GH_TOKEN }}
+          REGISTRY: 'docker.pkg.github.com'
+          DOCKERFILE: 'Dockerfile'
+          IMAGE_NAME: 'minesweeper-frontend'
+          TAG_NAME: 'main'
+          LATEST: 'true'

.github/workflows/stage.yml

@@ -0,0 +1,26 @@
+name: Deploy to stage
+
+on:
+  push:
+    branches: [hotfix/*, release/*]
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+        with:
+          fetch-depth: 1
+      - name: Docker Build & Push to GitHub Package
+        uses: opspresso/action-docker@master
+        with:
+          args: --docker
+        env:
+          USERNAME: imakecodes
+          PASSWORD: ${{ secrets.GH_TOKEN }}
+          REGISTRY: 'docker.pkg.github.com'
+          DOCKERFILE: 'Dockerfile'
+          IMAGE_NAME: 'minesweeper-frontend'
+          TAG_NAME: 'stage'
+          LATEST: 'true'

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:12 as build-stage
+
+WORKDIR /app
+
+COPY package*.json /app/
+
+RUN npm install
+
+COPY ./ /app/
+
+RUN npm run build
+
+FROM nginx:1.15
+COPY --from=build-stage /app/build/ /usr/share/nginx/html
+COPY --from=build-stage /app/nginx.conf /etc/nginx/conf.d/default.conf

src/components/Header/Header.js

@@ -18,33 +18,33 @@ const Header = ({
     <div className="header">
       <div className="settings">
         <div className="form-control">
-          <label for="rows">Rows:</label>
+          <label htmlFor="rows">Rows:</label>
           <input
             className="box"
+            id="rows"
             onChange={event => setRows(parseInt(event.target.value))}
             type="number"
             value={rows}
-            id="rows"
           />
         </div>
         <div className="form-control">
-          <label for="cols">Columns:</label>
+          <label htmlFor="cols">Columns:</label>
           <input
             className="box"
+            id="cols"
             onChange={event => setCols(parseInt(event.target.value))}
             type="number"
             value={cols}
-            id="cols"
           />
         </div>
         <div className="form-control">
-          <label for="mines">Mines:</label>
+          <label htmlFor="mines">Mines:</label>
           <input
             className="box"
+            id="mines"
             onChange={event => handleSetMines(event)}
             type="number"
             value={mines}
-            id="mines"
           />
         </div>
         <div className="form-control">