Merge branch 'main' into downgrade-react-markdown

open-source-uom · Sep 10, 2024 · 3ab5fa3 · 3ab5fa3
2 parents c32af8a + baa0d4c
commit 3ab5fa3
Show file tree

Hide file tree

Showing 10 changed files with 515 additions and 232 deletions.
diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml
@@ -0,0 +1,40 @@
+name: Deploy to Production with FTP
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'  # Use the Node.js version you need
+
+      - name: Install dependencies
+        run: |
+          npm install --legacy-peer-deps  # Added option to handle peer dependency issues
+
+      - name: Build
+        run: |
+          CI=false npm run build
+
+      - name: Upload to FTP server
+        uses: SamKirkland/[email protected]
+        with:
+          local-dir: build/
+          server: ${{ secrets.FTP_SERVER }}
+          username: ${{ secrets.FTP_USERNAME_PROD }}
+          password: ${{ secrets.FTP_PASSWORD_PROD }}
+          port: ${{ secrets.FTP_PORT }}  
+          exclude: |
+            **/docs/**
+            **/nginx/**
+            **/.github/**
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,5 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea/
diff --git a/docs/en/deployment-en.md b/docs/en/deployment-en.md
@@ -0,0 +1,137 @@
+# MyUoM Deployment Documentation
+
+## Deployment Options
+
+There are 2 main methods for deploying the MyUoM application to a web server:
+
+1. **Manually via FTP**
+2. **Automated with GitHub Actions**
+
+---
+
+## 1. Manual Deployment via FTP (Deprecated - Not used anymore)
+
+To manually deploy MyUoM via cPanel, follow these steps:
+
+1. **Log in to cPanel**:
+   - Access cPanel with your account credentials.
+
+2. **Select File Manager**:
+   - In cPanel, locate the Files section and select "File Manager." \
+     ![cPanel File Manager](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbV9Ir31txIZubJkKdW65MU380OBFJooGEAg&s)
+
+3. **Choose the Folder**:
+   - Navigate to the server folder where files should be uploaded. Typically, files should go into the `public_html` folder (as done in our production). \
+     ![](https://support.getspace.ie/img/filemanager-sidebar.gif)
+
+4. **Update the `.htaccess` File**:
+   - Open the `.htaccess` file and replace its contents with the following code to handle URL redirection and PHP settings:
+
+     ```apache
+     <IfModule mod_rewrite.c>
+       RewriteEngine On
+
+       # Don't rewrite requests to index.html
+       RewriteRule ^index\.html$ - [L]
+
+       # Rewrite all other non-existent file or directory requests to index.html
+       RewriteCond %{REQUEST_FILENAME} !-f
+       RewriteCond %{REQUEST_FILENAME} !-d
+       RewriteRule . /index.html [L]
+     </IfModule>
+
+     # php -- BEGIN cPanel-generated handler, do not edit
+     # Set the “ea-php81” package as the default “PHP” programming language.
+     <IfModule mime_module>
+       AddHandler application/x-httpd-ea-php81 .php .php8 .phtml
+     </IfModule>
+     # php -- END cPanel-generated handler, do not edit
+     ```
+
+5. **Prepare Build Files**:
+   - Navigate to the MyUoM application folder on your computer.
+
+   - Run `npm run build` to create the application's build.
+
+   - A `build` folder will be created containing the static version of the application with files to be uploaded to the server.
+
+6. **Upload Files**:
+   - Go back to the File Manager in cPanel, navigate to the desired folder (`public_html`), and select the Upload button. \
+     ![](https://support.getspace.ie/img/upload-icon-filemanager.gif)
+
+   - On the next page, you can drag and drop the application files. \
+     ![](https://i.ytimg.com/vi/eEpaOaj-ewg/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLAhwyGQYCVi2NJHW5S8lZpr1VeVjA)
+
+7. **Upload Files**:
+   - Upload all contents of the `build` folder from your computer to the server (using the file manager from the previous step).
+
+8. **Reconfigure `.htaccess` Settings**:
+   - After uploading, ensure the `.htaccess` file is present. If not, repeat step 4.
+
+9. **Complete Deployment**:
+   - Wait a few moments for the changes to take effect.
+   - Verify the deployment was successful by visiting your website.
+
+---
+
+## 2. Automated Upload with GitHub Actions (Currently in Use)
+
+To automate the above process, we use GitHub Actions. Here’s what needs to be done:
+
+1. **`.github/workflows/deploy-prod.yml` File**:
+   - The `deploy-prod.yml` file defines a job that runs on every push to the `main` branch of the repository. This job handles building the application and uploading it to the [production server](https://my.uom.gr) via FTP.
+
+2. **Key Steps of the Workflow**:
+   - **Checkout Code**: The process starts by retrieving the latest code from the repository using `actions/checkout@v3`.
+   - **Set Up Node.js**: The required Node.js version is installed for building the application using `actions/setup-node@v3`.
+   - **Install Dependencies**: Project dependencies are installed with the command `npm install --legacy-peer-deps`.
+   - **Build**: The application is built with the command `CI=false npm run build`.
+   - **Upload to FTP Server**: The contents of the `build` folder are uploaded via FTP using [SamKirkland/[email protected]](https://www.github.com/SamKirkland/FTP-Deploy-Action).
+
+3. **Using the Workflow**:
+   - **Code Updates**: Each time changes are pushed to the `main` branch, the workflow automatically handles building and uploading the application (the process uses hashing and checks if changes affect files to be uploaded. If a current build is identical to the content on the server, files are not uploaded).
+   - **Monitoring**: You can monitor the deployment progress and any errors via the [Actions](https://github.com/open-source-uom/myuom/actions) tab.
+
+5. **Example `deploy.yml`**
+```yaml
+name: Deploy to Production with FTP
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'  # Use the Node.js version you need
+
+      - name: Install dependencies
+        run: |
+          npm install --legacy-peer-deps  # Added option to handle peer dependency issues
+
+      - name: Build
+        run: |
+          CI=false npm run build
+
+      - name: Upload to FTP server
+        uses: SamKirkland/[email protected]
+        with:
+          local-dir: build/
+          server: ${{ secrets.FTP_SERVER }}
+          username: ${{ secrets.FTP_USERNAME_PROD }}
+          password: ${{ secrets.FTP_PASSWORD_PROD }}
+          port: ${{ secrets.FTP_PORT }}  
+          exclude: |
+            docs/
+            nginx/
+            .github/
+```
diff --git a/docs/gr/deployment.md b/docs/gr/deployment.md
@@ -1,42 +1,139 @@
-**How to Deploy MyUoM to cPanel**
+# MyUoM Τεκμηρίωση Deployment
 
-1. Access cPanel and log in with your credentials.
+## Επιλογές για Deployment
 
-2. Navigate to File Manager and then to public_html.
+Υπάρχουν 2 βασικοί τρόποι ώστε να κάνουμε deploy την εφαρμογή myUoM σε έναν Web Server:
 
-3. Open the `.htaccess` file and copy the provided code (which redirects the static website to `index.html`):
+1. **Χειροκίνητα με FTP**
+2. **Αυτοματοποιημένα με Github Actions**
 
-   ```apache
-   <IfModule mod_rewrite.c>
-     RewriteEngine On
+---
 
-     # Don't rewrite requests to index.html
-     RewriteRule ^index\.html$ - [L]
+## 1. Χειροκίνητα με FTP (Deprecated - Δεν το κάνουμε ετσι πλέον)
 
-     # Rewrite all other non-existent file or directory requests to index.html
-     RewriteCond %{REQUEST_FILENAME} !-f
-     RewriteCond %{REQUEST_FILENAME} !-d
-     RewriteRule . /index.html [L]
-   </IfModule>
+Για να κάνετε deploy το myUoM χειροκίνητα από το cPanel ακολουθήστε τα παρακάτω βήματα:
 
-   # php -- BEGIN cPanel-generated handler, do not edit
-   # Set the “ea-php81” package as the default “PHP” programming language.
-   <IfModule mime_module>
-     AddHandler application/x-httpd-ea-php81 .php .php8 .phtml
-   </IfModule>
-   # php -- END cPanel-generated handler, do not edit
-   ```
+1. **Σύνδεση στο cPanel**:
+   - Συνδεθείτε στο cPanel με τα credentials του λογιαριασμού σας.
 
-4. Delete all existing content in the `.htaccess` file, including the default content.
+2. **Επιλογή Διαχείρισης Αρχείων (File Manager)**:
+   - Στο cPanel βρες την περιοχή Files, και επιλέξε την "Διαχείριση Αρχείων" (File Manager). \
+     ![cPanel File Manager](https://www.pointer.gr/assets/images/img900x335-1.webp)
 
-5. Navigate to the MyUoM repository.
+3. **Επιλογή Φακέλου**
+   - Στην συνέχεια, θα πλοηγηθείς στον φάκελο του server που πρέπει να ανέβουν τα αρχεία. Συνήθως τα αρχεία πρέπει να μπούν στον φάκελο `public_html` (αυτό γίνεται και στο δικό μας production) \
+     ![](https://www.pointer.gr/assets/images/img900x580-2.webp)
 
-6. Run `npm run build` and copy the contents of the build folder.
+4. **Ενημέρωση του αρχείου `.htaccess`**:
+   - Ανοίξτε το αρχείο `.htaccess` και αντικαταστήστε το περιεχόμενο με τον παρακάτω κώδικα για να διαχειριστείτε την επανακατεύθυνση URL και τη ρύθμιση της PHP:
 
-7. Paste the copied files into the appropriate directories within the File Manager. Note: You may need to manually create folders and upload files according to cPanel's structure. Please refer to cPanel documentation for assistance.
+     ```apache
+     <IfModule mod_rewrite.c>
+       RewriteEngine On
 
-8. Once all files are imported, create a new `.htaccess` file (if not already present) and paste the previously copied code.
+       # Don't rewrite requests to index.html
+       RewriteRule ^index\.html$ - [L]
 
-9. Allow some time for the changes to take effect.
+       # Rewrite all other non-existent file or directory requests to index.html
+       RewriteCond %{REQUEST_FILENAME} !-f
+       RewriteCond %{REQUEST_FILENAME} !-d
+       RewriteRule . /index.html [L]
+     </IfModule>
 
-10. Your deployment should now be complete and ready to use.
+     # php -- BEGIN cPanel-generated handler, do not edit
+     # Set the “ea-php81” package as the default “PHP” programming language.
+     <IfModule mime_module>
+       AddHandler application/x-httpd-ea-php81 .php .php8 .phtml
+     </IfModule>
+     # php -- END cPanel-generated handler, do not edit
+     ```
+5. **Προετοιμασία Αρχείων Build**:
+   - Πλοηγηθείτε στον φάκελο της εφαρμογής MyUoM στον υπολογιστή σας.
+
+   - Εκτελέστε `npm run build` για να δημιουργήσετε το build της εφαρμογής.
+
+   - Θα δημιουργηθεί ένας φάκελος `build` που περιέχει την στατική έκδοση της εφαρμογής με τα αρχεία που πρέπει να ανέβουν στον server.
+
+6. **Επιλογή Αποστολής Αρχείων**
+   - Επιστρέφουμε στον File Manager του cPanel και αφου παμε στον επιθυμητό φάκελο (`public_html`), επιλέγουμε το πλήκτρο Αποστολή (Upload).
+     ![](https://www.pointer.gr/assets/images/img900x380-3.webp)
+
+   - Στην επόμενη σελίδα, μπορούμε να μεταφέρουμε τα αρχεία της εφαρμογής,
+     ![](https://www.pointer.gr/assets/images/img900x395-4.webp)
+
+7. **Ανέβασμα Files**:
+   - Ανεβάστε όλα τα περιεχόμενα του φακέλου `build` από τον υπολογιστή σας στον server (δηλ. με τον file manager του προηγουμενου βηματος)
+
+8. **Επαναφορά Ρυθμίσεων `.htaccess`**:
+   - Μετά την ανάρτηση, βεβαιωθείτε ότι υπάρχει το αρχείο `.htaccess` και αν δεν υπάρχει επαναλάβετε το βήμα 4.
+
+9. **Ολοκλήρωση Ανάπτυξης**:
+   - Περιμένετε λίγη ώρα για να ισχύσουν οι αλλαγές.
+   - Επαληθεύστε ότι η ανάπτυξη ήταν επιτυχής επισκεπτόμενοι τον ιστότοπό σας.
+
+
+---
+
+## 2. Αυτόματο Upload με GitHub Actions (Αυτό κάνουμε στην πραγματικότητα)
+
+Για την αυτοματοποίηση της παραπάνω διαδικασίας χρησιμοποιούμε GitHub Actions. Πρακτικά πρέπει να γίνουν τα εξής:
+
+1. **Αρχείο `.github/workflows/deploy-prod.yml`**:
+   - Το αρχείο `deploy-prod.yml` ορίζει μια εργασία που εκτελείται σε κάθε push στο branch `main` του αποθετηρίου. Η εργασία αυτή αναλαμβάνει το build της εφαρμογής και το ανέβασμα στον [production server](https://my.uom.gr) μέσω FTP.
+
+2. **Βασικά Βήματα του Workflow**:
+   - **Checkout Κώδικα**: Η διαδικασία ξεκινά με τη λήψη του τελευταίου κώδικα από το αποθετήριο χρησιμοποιώντας το `actions/checkout@v3`.
+   - **Ρύθμιση Node.js**: Εγκαθίσταται η απαραίτητη έκδοση του Node.js για την κατασκευή της εφαρμογής με το `actions/setup-node@v3`.
+   - **Εγκατάσταση Εξαρτήσεων**: Εγκαθίστανται οι εξαρτήσεις (depedencies) του έργου με την εντολή `npm install --legacy-peer-deps`.
+   - **Δημιουργία Build**: Δημιουργείται το build της εφαρμογής με την εντολή `CI=false npm run build`.
+   - **Ανέβασμα σε FTP Διακομιστή**: Τα περιεχόμενα του φακέλου `build` ανεβαίνουν μέσω FTP στον server χρησιμοποιώντας το [SamKirkland/[email protected]](https://www.github.com/SamKirkland/FTP-Deploy-Action).
+
+3. **Χρήση του Workflow**:
+   - **Αναβάθμιση Κώδικα**: Κάθε φορά που κάνουμε push με αλλαγές στο `main` branch, το workflow αναλαμβάνει αυτόματα το build και ανέβασμα της εφαρμογής (η διαδικασία αυτή αυτόματα χρησιμοποιεί hashing και ελέγχει αν όντως έχουν γίνει αλλαγές που αλλάζουν τα αρχεία που πρέπει να ανέβουν στον server. Αν για παράδειγμα ένα build που έγινε τώρα είναι ίδιο με τα περιεχόμενα που υπάρχουν στον server τότε δεν ανεβαίνουν τα αρχεία)
+   - **Παρακολούθηση**: Μπορείτε να παρακολουθήσετε την πρόοδο της ανάπτυξης και τυχόν σφάλματα μέσω της καρτέλας [Actions](https://github.com/open-source-uom/myuom/actions).
+
+5. **Ενδεικτικό `deploy.yml`**
+```yaml
+name: Deploy to Production with FTP
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'  # Use the Node.js version you need
+
+      - name: Install dependencies
+        run: |
+          npm install --legacy-peer-deps  # Added option to handle peer dependency issues
+
+      - name: Build
+        run: |
+          CI=false npm run build
+
+      - name: Upload to FTP server
+        uses: SamKirkland/[email protected]
+        with:
+          local-dir: build/
+          server: ${{ secrets.FTP_SERVER }}
+          username: ${{ secrets.FTP_USERNAME_PROD }}
+          password: ${{ secrets.FTP_PASSWORD_PROD }}
+          port: ${{ secrets.FTP_PORT }}  
+          exclude: |
+            docs/
+            nginx/
+            .github/
+```
+
+---