Merge pull request #6 from sebasruii/develop

feat: Add docker deploy

Author: sebasruii

.github/workflows/docker-image.yml

@@ -0,0 +1,38 @@
+name: Docker Image CI/CD
+
+# Trigger the workflow when a tag is pushed
+on:
+  push:
+    tags:
+      - "v*" # Matches any version tag that starts with "v" (e.g., v1.0.0)
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Step 1: Checkout the repository
+      - name: Checkout the code
+        uses: actions/checkout@v3
+
+      # Step 2: Build the Docker image
+      - name: Build the Docker image
+        run: docker build . --file Dockerfile --tag frabenrui/flamapy-ide:${{ github.ref_name }}
+
+      # Step 3: Login to DockerHub
+      - name: Log in to DockerHub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_API_TOKEN }}
+
+      # Step 4: Push the Docker image to DockerHub
+      - name: Push the Docker image
+        run: docker push frabenrui/flamapy-ide:${{ github.ref_name }}
+
+      # Optional: Step 5: Push the "latest" tag (for production deployments)
+      - name: Tag as latest
+        if: startsWith(github.ref, 'refs/tags/')
+        run: |
+          docker tag frabenrui/flamapy-ide:${{ github.ref_name }} frabenrui/flamapy-ide:latest
+          docker push frabenrui/flamapy-ide:latest

.gitignore

@@ -22,6 +22,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-
-
-public/pyodide/*.whl

Dockerfile

@@ -0,0 +1,53 @@
+# Stage 1: Base Image
+FROM node:18 AS base
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json for installation
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the app
+COPY . .
+
+# Stage 2: Development
+FROM base AS dev
+
+# Set environment to development
+ENV NODE_ENV=development
+
+# Expose Vite default port
+EXPOSE 5173
+
+# Start the Vite development server
+CMD ["npm", "run", "dev", "--", "--host"]
+
+# Stage 3: Production Build
+FROM base AS build
+
+# Set environment to production
+ENV NODE_ENV=production
+
+# Build the app
+RUN npm run build
+
+# Stage 4: Production - Nginx for serving static files
+FROM nginx:alpine AS prod
+
+# Set environment to production
+ENV NODE_ENV=production
+
+# Copy built files from the build stage
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Copy custom Nginx configuration, if needed (optional)
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Expose port 80 for the Nginx server
+EXPOSE 80
+
+# Start Nginx
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -17,23 +17,75 @@ FlamapyIDE is Francisco Benítez's (@sebasruii) Final Degree Project. It consist
 - Different export options, including Glencoe, FeatureIDE, AFM or SPLOT
 - Import feature models defined in different formats into UVL, including Glencoe, FeatureIDE or AFM
 
-## Getting started
+# Deploying the Project locally
 
-To run FlamapyIDE locally, you must have NodeJS (>=18.5) installed. Clone this repository and follow these steps:
+## Prerequisites
 
-### 1. Install dependencies
+- To run FlamapyIDE locally, you must have NodeJS (>=18.5) installed.
+- Your browser must support WASM.
 
-Navigate to the project root and run:
-`npm install`
+1. **Clone the repository** (if you haven't already):
 
-### 2. Run pyodide setup script
+   ```bash
+   git clone https://github.com/sebasruii/flamapy-ide.git
+   cd flamapy-ide
 
-Run:
-`node setup.mjs`
-This script will download all pyodide packages needed to install the provided Flamapy packages.
+   ```
 
-### 3. Run FlamapyIDE
+2. **Install dependencies**
+
+Run `npm install` and wait until all packages have been downloaded.
+
+3. **Run FlamapyIDE**
 
 Once packages have been downloaded, you can run:
 `npm run dev`
 and this will deploy FlamapyIDE on localhost.
+
+# Deploying the Project Using Docker
+
+## Prerequisites
+
+Ensure you have Docker installed on your machine. You can install it from [Docker's official site](https://docs.docker.com/get-docker/).
+
+---
+
+## Building the Docker Image
+
+1. **Clone the repository** (if you haven't already):
+
+   ```bash
+   git clone https://github.com/sebasruii/flamapy-ide.git
+   cd flamapy-ide
+
+   ```
+
+1. **Build the Docker image**
+
+- For production:
+  ```
+  docker build -t flamapy-ide:prod --target prod .
+  ```
+- For development:
+  ```
+  docker build -t flamapy-ide:dev --target dev .
+  ```
+
+## Running the Docker Container
+
+### Run the container using the production image:
+
+```bash
+docker run -p 80:80 flamapy-ide:prod
+```
+
+This starts the app on port 80 using Nginx. You can access the app at http://localhost.
+
+Running in Development
+Run the container with the development image:
+
+```bash
+docker run -p 5173:5173 -v $(pwd):/app -v /app/node_modules flamapy-ide:dev
+```
+
+This starts the Vite development server with hot-reloading on port 5173. Access it at http://localhost:5173.

index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>FlamapyIDE</title>
   </head>
   <body>
     <div id="root"></div>

nginx.conf

@@ -0,0 +1,35 @@
+# /etc/nginx/nginx.conf
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    sendfile        on;
+    keepalive_timeout  65;
+
+    # Define the server block
+    server {
+        listen 80;
+        server_name localhost;
+
+        # Root directory where the static files are served
+        root /usr/share/nginx/html;
+
+        # Index file for the root
+        index index.html;
+
+        # Handle requests for static assets
+        location / {
+            try_files $uri /index.html;  # This serves index.html for any route
+        }
+
+        # Optional: Gzip compression for better performance
+        gzip on;
+        gzip_types text/css application/javascript application/json image/svg+xml;
+        gzip_min_length 1000;
+    }
+}