Merge pull request #24 from Nummenpojat/configuration-for-deployment

Configuration for deployment

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+.idea
+build

Dockerfile

@@ -0,0 +1,32 @@
+# Use Node.js 18 as the base image
+FROM node:18 as build
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json files to the container
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code to the container
+COPY . .
+
+# Build the React app
+RUN npm run build
+
+# Use a lightweight Nginx image as the base image
+FROM nginx:1.21
+
+# Copy the React build files to the Nginx default public folder
+COPY --from=build /app/build /usr/share/nginx/html
+
+# Copy the Nginx configuration file to the container
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose the port used by Nginx
+EXPOSE 80
+
+# Start Nginx
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,17 @@
+server {
+  listen 80;
+  server_name localhost;
+
+  location /api {
+    proxy_pass http://core:3001/;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+  }
+
+  location / {
+    root /usr/share/nginx/html;
+    index index.html;
+    try_files $uri $uri/ /index.html;
+  }
+}

src/App.tsx

@@ -7,9 +7,22 @@ import MessageWrapper from "./pages/message";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
 import Login from "./pages/login";
 import {onAuthStateChanged, User} from "firebase/auth";
-import {auth, verifyClaim} from "./firebaseConfig";
+import {auth, getAppCheckTokenForApiCall, getIdTokenForApiCall, verifyClaim} from "./firebaseConfig";
 import Error from "./pages/error";
 import Main from "./pages/main";
+import axios from "axios";
+
+export const core = axios.create({
+  baseURL: process.env.BASE_URL
+});
+
+core.interceptors.request.use(async config => {
+  config.headers = {
+    "X-Firebase-IdToken": await getIdTokenForApiCall(),
+    "X-Firebase-AppCheck": await getAppCheckTokenForApiCall()
+  }
+  return config;
+});
 
 function App() {
   useEffect(() => {

src/components/navbar/navElement.tsx

@@ -1,4 +1,4 @@
-import React, {ReactElement, ReactNode} from "react";
+import React, {ReactElement} from "react";
 
 export default function NavElement(props: { children?: ReactElement[], text: string, linksTo: string}) {
   return (

src/config/firebase.json

@@ -0,0 +1,8 @@
+{
+  "apiKey": "AIzaSyBWcwH_q5vnqSRhtiIZShtNray1aYzRRtI",
+  "authDomain": "suppis-382f9.firebaseapp.com",
+  "projectId": "suppis-382f9",
+  "storageBucket": "suppis-382f9.appspot.com",
+  "messagingSenderId": "847554464937",
+  "appId": "1:847554464937:web:2afeb9e429ff128bd12db8"
+}

src/firebaseConfig.ts

@@ -15,14 +15,7 @@ import { initializeAppCheck, ReCaptchaV3Provider, getToken } from "firebase/app-
 // https://firebase.google.com/docs/web/setup#available-libraries
 
 // Your web app's Firebase configuration
-const firebaseConfig = {
-  apiKey: "AIzaSyBWcwH_q5vnqSRhtiIZShtNray1aYzRRtI",
-  authDomain: "suppis-382f9.firebaseapp.com",
-  projectId: "suppis-382f9",
-  storageBucket: "suppis-382f9.appspot.com",
-  messagingSenderId: "847554464937",
-  appId: "1:847554464937:web:2afeb9e429ff128bd12db8"
-};
+const firebaseConfig = require("./config/firebase.json")
 
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
@@ -66,7 +59,8 @@ export const getIdTokenForApiCall = async () => {
 // Async function which gets AppCheck token for making request to the api
 export const getAppCheckTokenForApiCall = async () => {
   try {
-    return await getToken(appCheck, false)
+    const result = await getToken(appCheck, false)
+    return result.token
   } catch (error) {
     throw error
   }

src/pages/message.tsx

@@ -1,7 +1,6 @@
-import React, {useEffect, useState} from "react";
-import {auth, getAppCheckTokenForApiCall, getIdTokenForApiCall} from "../firebaseConfig";
-import axios, {AxiosResponse} from "axios";
-import {onAuthStateChanged} from "firebase/auth";
+import React, {useState} from "react";
+import {AxiosResponse} from "axios";
+import {core} from "../App";
 
 const Papa = require("papaparse")
 
@@ -31,6 +30,12 @@ export default function MessageWrapper() {
       setShowQr(true)
       return
     }
+
+    if (error.response.status == 409) {
+      core.get("/api/whatsapp/status")
+        .catch(reason => handleMessageApiCallResponse(reason))
+    }
+
     alert(error.response.data)
   }
 
@@ -59,19 +64,9 @@ export default function MessageWrapper() {
     event.preventDefault()
     if (!toList) {
       try {
-
-        // Getting tokens from Firebase to send along the API request, so backend can ensure that user has correct access rights
-        const idToken = await getIdTokenForApiCall()
-        const appCheckToken = await getAppCheckTokenForApiCall()
-
-        const result: AxiosResponse = await axios.post("http://localhost:3001/whatsapp/send/one", {
+        const result: AxiosResponse = await core.post("/api/whatsapp/send/one", {
           number: phoneNumber,
           message: message
-        }, {
-          headers: {
-            "X-Firebase-IdToken": idToken,
-            "X-Firebase-AppCheck": appCheckToken.token
-          }
         })
 
         alert(result.data)
@@ -82,20 +77,11 @@ export default function MessageWrapper() {
     }
     if (toList) {
       try {
-
-        // Getting tokens from Firebase to send along the API request, so backend can ensure that user has correct access rights
         const phoneNumbers = await handleCsvToJson()
-        const idToken = await getIdTokenForApiCall()
-        const appCheckToken = await getAppCheckTokenForApiCall()
 
-        const result: AxiosResponse = await axios.post("http://localhost:3001/whatsapp/send/list", {
+        const result: AxiosResponse = await core.post("/api/whatsapp/send/list", {
           numbers: phoneNumbers,
           message: message
-        }, {
-          headers: {
-            "X-Firebase-IdToken": idToken,
-            "X-Firebase-AppCheck": appCheckToken.token
-          }
         })
 
         alert(result.data)