Refactor workspace (#421)

* refactor: moved apps into seperate folders, create a docker folder

* chore: remove reduced.to.code-workspace file and update README.md with new project structure and instructions for running the project locally using docker-compose. Also, update the list of tasks in the README.md file.

* style(README.md): remove unnecessary line break and improve formatting of a note

* style(frontend): remove unnecessary line breaks and align CSS variables in global.css
style(frontend): remove unnecessary line breaks and align extends array in .eslintrc.cjs

* style: remove unnecessary line breaks in docker-compose.yml
style(package.json): update prettier command to format all files in the project directory

---------

Co-authored-by: orig <oriorigranot@gamil.com>

README.md

@@ -99,43 +99,42 @@ List of things you need to run the project locally and how to install them.
 ### 💻 Installation
 
 1. [Fork](https://github.com/origranot/reduced.to/fork) / Clone this repository
-2. Open the repository using the `reduced.to.code-workspace` file (VSCode)
-3. Install NPM packages
+2. Install NPM packages
    ```sh
    npm install && npm run install:all
    ```
-4. Copy `backend/example.env` to `.env` and fill it properly ([see below](#backend-configuration)).
-5. Copy `frontend/example.env` to `.env` and fill it properly ([see below](#frontend-configuration)).
-6. Make sure you have a local instance of PostgreSQL running on port 5432. If not, you can run it using docker:
+3. Navigate to backend folder, copy `.example.env` to `.env` and fill it properly ([see below](#backend-configuration)).
+4. Navigate to frontend folder, copy `.example.env` to `.env` and fill it properly ([see below](#frontend-configuration)).
+5. Make sure you have a local instance of PostgreSQL running on port 5432. If not, you can run it using docker:
    ```sh
    docker run --name reduced_to_db -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=postgres -e POSTGRES_DB=reduced_to_db -p 5432:5432 -d postgres
    ```
-7. Run Prisma migration inside the backend folder:
+6. Run Prisma migration inside the backend folder:
    ```sh
    npx prisma migrate dev --name init
    ```
-8. Run the backend:
+7. Run the backend:
    ```sh
    npm run start:backend
    ```
-9. Run the frontend:
+8. Run the frontend:
    ```sh
    npm run start:frontend
    ```
 
 ### 👩‍💻 Development
 
-You will find 3 folders
+The project is structured in the following way:
 
 - 🚀 `root`
-- 🎨 `reduced.to/frontend`
-- 📦 `reduced.to/backend`
+- 🎨 `/apps/frontend`
+- 📦 `/apps/backend`
 
 ### _Running the frontend in dev mode_
 
 1. Move to the frontend folder
    ```sh
-   cd ./frontend
+   cd ./apps/frontend
    ```
 2. Run the project (it will open a new window)
    ```sh
@@ -147,7 +146,7 @@ You will find 3 folders
 
 1. Move to the backend folder
    ```sh
-   cd ./backend
+   cd ./apps/backend
    ```
 2. Run the project (be sure that you built the frontend before)
    ```sh
@@ -157,15 +156,15 @@ You will find 3 folders
 
 ### 🐳 Docker
 
-- You can easily build your application in a docker container and run it.
+- You can easily build your application using docker. Just run the following commands:
 - Build and run frontend instance
   ```sh
-  docker build frontend/ -t reduced.to-front
+  docker build apps/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 build apps/backend/ -t reduced.to-back
   docker run -p 3000:3000 reduced.to-back
   ```
 - Make sure to have a local instance of PostgreSQL running on port 5432. If not, you can run it using docker:
@@ -179,9 +178,11 @@ You will find 3 folders
 ### 🐙 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:5000/` on your browser.
+- When you run the command below, don't forget to change the .env file with the correct values.
   ```sh
-  docker compose -f docker-compose.dev.yml up
+  docker compose -f docker/local/docker-compose.yml -p reduced-to up
   ```
+  NOTE: There is a known issue with the local docker-compose deployment. Because of the way the containers are communicating with each other, the frontend container will not be able to send requests to the backend container. This is because the backend container is accessible only from within the docker network. To overcome this issue, you can run only the backend locally and the other services using docker-compose.
 
 ### 👷 Configuration
 
@@ -225,7 +226,7 @@ For the minimal configuration the following settings have to be changed in their
 
 ###### Novu
 
-- **NOVU_API_KEY**: Get it from https://novu.co/
+- **NOVU_API_KEY**: Get it from https://novu.co/ (Not required for local development)
 
 #### Frontend configuration
 
@@ -262,9 +263,8 @@ Simply copy and paste a URL into the provided area. Then click shorten URL! Your
   - [x] Animations
   - [x] Logo
   - [x] Dark/Light mode
-  - [ ] Fonts?
 - [ ] Improve front-end components
-- [ ] Backend tests
+- [x] Backend tests
 - [ ] Front-end Tests
 - [ ] Logs
 - [ ] Add a statistics page

apps/backend/src/cache/cache.module.ts

@@ -13,7 +13,8 @@ import { AppCacheService } from './cache.service';
       useFactory: async (config: AppConfigService) => {
         let store: string | RedisStore = 'memory';
 
-        if (config.getConfig().redis.enable) {
+        // Only use Redis in non-test environments and if it's enabled in the config
+        if (process.env.NODE_ENV !== 'test' && config.getConfig().redis.enable) {
           store = await redisStore({
             socket: {
               host: config.getConfig().redis.host,

apps/backend/src/config/config.module.ts

@@ -8,7 +8,6 @@ import { AppConfigService } from './config.service';
   imports: [
     ConfigModule.forRoot({
       isGlobal: true,
-      envFilePath: process.env.NODE_ENV === 'test' ? '.test.env' : '.env',
       load: [configFactory],
       cache: true,
     }),

apps/frontend/.eslintrc.cjs

@@ -5,11 +5,7 @@ module.exports = {
     es2021: true,
     node: true,
   },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:qwik/recommended',
-  ],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:qwik/recommended'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     tsconfigRootDir: __dirname,

apps/frontend/.gitignore

@@ -4,6 +4,10 @@
 /lib-types
 /server
 
+# Temp
+/temp
+/tmp
+
 # Development
 node_modules
 

apps/frontend/.prettierrc.json

@@ -4,5 +4,5 @@
   "semi": true,
   "singleQuote": true,
   "useTabs": false,
-  "printWidth": 100
+  "printWidth": 130
 }

apps/frontend/Dockerfile

@@ -0,0 +1,37 @@
+
+# Intermediate docker image to build the bundle in and install dependencies
+FROM node:19.2-alpine3.15 as build
+
+# Set the working directory to /usr/src/app
+WORKDIR /usr/src/app
+
+# Copy the package.json and package-lock.json over in the intermedate "build" image
+COPY ./package.json ./
+COPY ./package-lock.json ./
+
+# Install the dependencies
+# Clean install because we want to install the exact versions
+RUN npm ci
+
+# Copy the source code into the build image
+COPY ./ ./
+
+# Build the project
+RUN npm run build
+
+# Pull the same Node image and use it as the final (production image)
+FROM node:19.2-alpine3.15 as production
+
+# Set the working directory to /usr/src/app
+WORKDIR /usr/src/app
+
+# Only copy the results from the build over to the final image
+# We do this to keep the final image as small as possible
+COPY --from=build /usr/src/app/node_modules ./node_modules
+COPY --from=build /usr/src/app/server ./server
+COPY --from=build /usr/src/app/dist ./dist
+
+EXPOSE 5000
+
+# Start the application
+CMD [ "node", "server/entry.express"]

apps/frontend/Dockerfile.prod

@@ -1,5 +1,8 @@
 FROM node:18-alpine3.15 AS build
 
+# Set NODE_ENV environment variable
+ENV NODE_ENV production
+
 # Create app directory
 WORKDIR /app
 
@@ -14,7 +17,7 @@ ARG API_DOMAIN=${API_DOMAIN}
 ARG DOMAIN=${DOMAIN}
 
 # Install dependencies for production
-RUN npm install
+RUN npm ci
 
 # Building code for production
 RUN npm run build
@@ -22,9 +25,6 @@ RUN npm run build
 # Build static files
 RUN npm run build.server
 
-# Set NODE_ENV environment variable
-ENV NODE_ENV production
-
 # Final stage
 FROM node:18-alpine3.15 as production
 

apps/frontend/README.md

@@ -76,3 +76,13 @@ npm run ssg
 ```
 npm run ssg
 ```
+
+## Express Server
+
+This app has a minimal [Express server](https://expressjs.com/) implementation. After running a full build, you can preview the build using the command:
+
+```
+npm run serve
+```
+
+Then visit [http://localhost:8080/](http://localhost:8080/)

apps/frontend/adapters/express/vite.config.ts

@@ -1,4 +1,4 @@
-import { expressAdapter } from '@builder.io/qwik-city/adapters/express/vite';
+import { nodeServerAdapter } from '@builder.io/qwik-city/adapters/node-server/vite';
 import { extendConfig } from '@builder.io/qwik-city/vite';
 import baseConfig from '../../vite.config';
 
@@ -11,7 +11,8 @@ export default extendConfig(baseConfig, () => {
       },
     },
     plugins: [
-      expressAdapter({
+      nodeServerAdapter({
+        name: 'express',
         ssg: {
           origin: `https://${process.env.DOMAIN}`,
           include: [],

apps/frontend/package.json

@@ -9,15 +9,15 @@
     "build": "qwik build",
     "build.client": "vite build",
     "build.preview": "vite build --ssr src/entry.preview.tsx",
-    "build.server": "vite build --ssr src/entry.express.tsx",
+    "build.server": "vite build -c adapters/express/vite.config.ts",
     "build.types": "tsc --incremental --noEmit",
-    "serve": "node server/entry.express",
     "dev": "vite --mode ssr",
     "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
     "fmt": "prettier --write .",
     "fmt.check": "prettier --check .",
     "lint": "eslint \"src/**/*.ts*\"",
     "preview": "qwik build preview && vite preview --open",
+    "serve": "node server/entry.express",
     "start": "vite --open --mode ssr",
     "qwik": "qwik"
   },