fix: docker files (#287)

.frontend.example.env

@@ -0,0 +1 @@
+API_DOMAIN="http://localhost:3000"

.github/workflows/deploy.yml

@@ -88,7 +88,7 @@ jobs:
         uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
         with:
           context: ./frontend
-          file: ./frontend/Dockerfile.prod
+          file: ./frontend/Dockerfile
           platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}

README.md

@@ -129,7 +129,7 @@ You will find 3 folders
    cd ./frontend
    ```
 2. Run the project (it will open a new window)
-    ```sh
+   ```sh
    npm run dev
    ```
 3. Vite will be now listening for changes in the code and reloading the solution
@@ -151,19 +151,21 @@ You will find 3 folders
 - You can easily build your application in a docker container and run it.
 - Build and run frontend instance
   ```sh
-  docker build frontend/. -t reduced.to-front
+  docker build frontend/ -t reduced.to-front
   docker run -p 5000:5000 reduced.to-front
   ```
- - Build and run backend instance
-  ```sh
-  docker build backend/. -t reduced.to-back
-  docker run -p 3000:3000 reduced.to-back
-  ```
-- Simply go to your favourite browser and visit `http://localhost:3000/` to see your application.
+- Build and run backend instance
+
+```sh
+docker build backend/ -t reduced.to-back
+docker run -p 3000:3000 reduced.to-back
+```
+
+- Simply go to your favourite browser and visit `http://localhost:5000/` to see your application.
 
 ### 🐙 Docker compose
 
-- In case you have docker installed, you can _single-click_ deploy and test your changes by running the following and going to `http://localhost:3000/` on your browser.
+- In case you have docker installed, you can _single-click_ deploy and test your changes by running the following and going to `http://localhost:5000/` on your browser.
   ```sh
   docker compose -f docker-compose.dev.yml up
   ```
@@ -173,9 +175,11 @@ You will find 3 folders
 For the minimal configuration the following settings have to be changed in their `.env` file:
 
 #### Backend configuration
-- 
+
+-
 
 #### Frontend configuration
+
 - **API_DOMAIN**: The domain of your backend instance
 
 Happy Hacking !

docker-compose.dev.yml

@@ -9,8 +9,7 @@ services:
     restart: always
     ports:
       - '5000:5000'
-    env_file:
-      - ./frontend/.env
+    env_file: ./frontend/.env
     volumes:
       - '/app'
 
@@ -25,5 +24,4 @@ services:
       - /svr/app/node_modules
     ports:
       - '3000:3000'
-    env_file:
-      - ./backend/.env
+    env_file: ./backend/.env

docker-compose.prod.yml

@@ -4,22 +4,23 @@ services:
   backend:
     image: ghcr.io/origranot/reduced.to/backend:master
     container_name: backend
-    networks:
-      - local-network
+    restart: always
+    env_file: backend.env
+    ports:
+      - '3000:3000'
 
   frontend:
     image: ghcr.io/origranot/reduced.to/frontend:master
     container_name: frontend
-    networks:
-      - local-network
+    restart: always
+    env_file: frontend.env
+    ports:
+      - '5000:5000'
 
   watchtower:
     image: containrrr/watchtower
     container_name: watchtower
+    restart: always
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
     command: --interval 30 backend frontend
-
-networks:
-  local-network:
-    driver: bridge

frontend/Dockerfile

@@ -12,9 +12,6 @@ COPY . .
 # Install dependencies for production
 RUN npm install
 
-# Set Env variables
-ENV API_DOMAIN=localhost:3000
-
 # Building code for production
 RUN npm run build
 

frontend/Dockerfile.prod

@@ -1,37 +0,0 @@
-FROM node:18-alpine3.15 AS build
-
-# Create app directory
-WORKDIR /app
-
-# Install app dependencies
-COPY *.json ./
-
-# Copy all files to build stage
-COPY . .
-
-# Install dependencies for production
-RUN npm install
-
-# Set Env variables
-ENV API_DOMAIN=https://reduced.to
-
-# Building code for production
-RUN npm run build
-
-# Build static files
-RUN npm run build.server
-
-# Final stage
-FROM node:18-alpine3.15 as production
-
-# Create app directory
-WORKDIR /app
-
-# Copy build
-COPY --from=build /app/node_modules/ ./node_modules/
-COPY --from=build /app/dist/ ./dist/
-COPY --from=build /app/server/ ./server/
-
-EXPOSE 5000
-
-CMD [ "node", "server/entry.express.js" ]

frontend/src/routes/[...urlId]/index.tsx

@@ -1,23 +1,17 @@
-import { component$, useClientEffect$, useServerMount$, useStore } from '@builder.io/qwik';
+import { component$, useClientEffect$ } from '@builder.io/qwik';
 import { useLocation } from '@builder.io/qwik-city';
 
 export default component$(() => {
-  const store = useStore({
-    urlRedirect: '',
-  });
-
   const location = useLocation();
 
-  useServerMount$(async () => {
+  useClientEffect$(async () => {
+    console.log(process.env.API_DOMAIN);
+
     const urlId = location.params.urlId.replace(/\//g, '');
     const res = await fetch(`${process.env.API_DOMAIN}/api/v1/shortener/${urlId}`);
     const url = await res.text();
 
-    store.urlRedirect = url;
-  });
-
-  useClientEffect$(async () => {
-    window.location.replace(store.urlRedirect.length ? store.urlRedirect : '/unknown');
+    window.location.replace(url || '/unknown');
   });
 
   return <div />;