Fixed lodash library not invoking in production build (#171)

* Added staging docker-compose file
* Use lodash-es and remove hydration option on photos page fixed the problem

Makefile

@@ -7,6 +7,9 @@ dev-update:
 dev-scale:
 	docker-compose -f ./docker/docker-compose.dev.yml up --build -V  --scale immich_server=3 --remove-orphans
 
+stage:
+	docker-compose -f ./docker/docker-compose.staging.yml up --build -V --remove-orphans
+
 test-e2e:
 	docker-compose -f ./docker/docker-compose.test.yml --env-file ./docker/.env.test up --abort-on-container-exit --exit-code-from immich_server_test
 

docker/docker-compose.staging.yml

@@ -0,0 +1,105 @@
+version: "3.8"
+
+services:
+  immich-server:
+    image: immich-server-staging:latest
+    build:
+      context: ../server
+      dockerfile: Dockerfile
+    entrypoint: ["/bin/sh", "./entrypoint.sh"]
+    expose:
+      - "3000"
+    volumes:
+      - ${UPLOAD_LOCATION}:/usr/src/app/upload
+    env_file:
+      - .env
+    environment:
+      - NODE_ENV=production
+    depends_on:
+      - redis
+      - database
+    networks:
+      - immich-network
+    restart: always
+
+  immich-microservices:
+    image: immich-microservices-staging:latest
+    build:
+      context: ../microservices
+      dockerfile: Dockerfile
+    entrypoint: ["/bin/sh", "./entrypoint.sh"]
+    expose:
+      - "3001"
+    volumes:
+      - ${UPLOAD_LOCATION}:/usr/src/app/upload
+    env_file:
+      - .env
+    environment:
+      - NODE_ENV=production
+    depends_on:
+      - database
+    networks:
+      - immich-network
+    restart: always
+
+  immich-web:
+    image: immich-web-staging:latest
+    entrypoint: ["/bin/sh", "./entrypoint.sh"]
+    build:
+      context: ../web
+      dockerfile: Dockerfile
+      target: prod
+    env_file:
+      - .env
+    ports:
+      - 2285:3000
+    networks:
+      - immich-network
+    restart: always
+
+
+  redis:
+    container_name: immich_redis
+    image: redis:6.2
+    networks:
+      - immich-network
+    restart: always
+    
+
+  database:
+    container_name: immich_postgres
+    image: postgres:14
+    env_file:
+      - .env
+    environment:
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
+      POSTGRES_USER: ${DB_USERNAME}
+      POSTGRES_DB: ${DB_DATABASE_NAME}
+      PG_DATA: /var/lib/postgresql/data
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    ports:
+      - 5432:5432
+    networks:
+      - immich-network
+
+  nginx:
+    container_name: proxy_nginx
+    image: nginx:latest
+    volumes:
+      - ./settings/nginx-conf:/etc/nginx/conf.d
+    ports:
+      - 2283:80
+      - 2284:443
+    logging:
+      driver: none
+    networks:
+      - immich-network
+    depends_on:
+      - immich-server
+    restart: always
+
+networks:
+  immich-network:
+volumes:
+  pgdata:

web/package-lock.json

@@ -10,6 +10,7 @@
 			"dependencies": {
 				"cookie": "^0.4.2",
 				"lodash": "^4.17.21",
+				"lodash-es": "^4.17.21",
 				"moment": "^2.29.3",
 				"svelte-material-icons": "^2.0.2"
 			},
@@ -20,6 +21,7 @@
 				"@types/bcrypt": "^5.0.0",
 				"@types/cookie": "^0.4.1",
 				"@types/lodash": "^4.14.182",
+				"@types/lodash-es": "^4.17.6",
 				"@typescript-eslint/eslint-plugin": "^5.10.1",
 				"@typescript-eslint/parser": "^5.10.1",
 				"autoprefixer": "^10.4.7",
@@ -256,6 +258,15 @@
 			"integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
 			"dev": true
 		},
+		"node_modules/@types/lodash-es": {
+			"version": "4.17.6",
+			"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
+			"integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+			"dev": true,
+			"dependencies": {
+				"@types/lodash": "*"
+			}
+		},
 		"node_modules/@types/node": {
 			"version": "17.0.32",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.32.tgz",
@@ -1963,6 +1974,11 @@
 			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
 			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
 		},
+		"node_modules/lodash-es": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+		},
 		"node_modules/lodash.merge": {
 			"version": "4.6.2",
 			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3287,6 +3303,15 @@
 			"integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
 			"dev": true
 		},
+		"@types/lodash-es": {
+			"version": "4.17.6",
+			"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
+			"integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+			"dev": true,
+			"requires": {
+				"@types/lodash": "*"
+			}
+		},
 		"@types/node": {
 			"version": "17.0.32",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.32.tgz",
@@ -4408,6 +4433,11 @@
 			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
 			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
 		},
+		"lodash-es": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+		},
 		"lodash.merge": {
 			"version": "4.6.2",
 			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",

web/package.json

@@ -19,6 +19,7 @@
 		"@types/bcrypt": "^5.0.0",
 		"@types/cookie": "^0.4.1",
 		"@types/lodash": "^4.14.182",
+		"@types/lodash-es": "^4.17.6",
 		"@typescript-eslint/eslint-plugin": "^5.10.1",
 		"@typescript-eslint/parser": "^5.10.1",
 		"autoprefixer": "^10.4.7",
@@ -39,6 +40,7 @@
 	"dependencies": {
 		"cookie": "^0.4.2",
 		"lodash": "^4.17.21",
+		"lodash-es": "^4.17.21",
 		"moment": "^2.29.3",
 		"svelte-material-icons": "^2.0.2"
 	}

web/src/lib/stores/assets.ts

@@ -1,17 +1,22 @@
 import { writable, derived } from 'svelte/store';
 import { getRequest } from '$lib/api';
 import type { ImmichAsset } from '$lib/models/immich-asset'
-import * as _ from 'lodash';
+import lodash from 'lodash-es';
 import moment from 'moment';
 
 const assets = writable<ImmichAsset[]>([]);
 
 const assetsGroupByDate = derived(assets, ($assets) => {
 
-  return _.chain($assets)
+  try {
-    .groupBy((a) => moment(a.createdAt).format('ddd, MMM DD'))
+    return lodash.chain($assets)
-    .sortBy((group) => $assets.indexOf(group[0]))
+      .groupBy((a) => moment(a.createdAt).format('ddd, MMM DD'))
-    .value();
+      .sortBy((group) => $assets.indexOf(group[0]))
+      .value();
+  } catch (e) {
+    console.log("error deriving state assets", e)
+    return []
+  }
 
 })
 

web/src/routes/__layout.svelte

@@ -1,28 +1,27 @@
 <script lang="ts">
-	// import { getRequest } from '$lib/api';
+	import { getRequest } from '$lib/api';
-	// import { onDestroy } from 'svelte';
+	import { onDestroy } from 'svelte';
-	// import { fade } from 'svelte/transition';
 	import '../app.css';
-	// import { serverEndpoint } from '../lib/constants';
+	import { serverEndpoint } from '../lib/constants';
 
-	// let endpoint = serverEndpoint;
+	let endpoint = serverEndpoint;
-	// let isServerOk = true;
+	let isServerOk = true;
 
-	// const pingServerInterval = setInterval(async () => {
+	const pingServerInterval = setInterval(async () => {
-	// 	const response = await getRequest('server-info/ping', '');
+		const response = await getRequest('server-info/ping', '');
 
-	// 	if (response.res === 'pong') isServerOk = true;
+		if (response.res === 'pong') isServerOk = true;
-	// 	if (response.statusCode === 404) isServerOk = false;
+		if (response.statusCode === 404) isServerOk = false;
-	// }, 10000);
+	}, 10000);
 
-	// onDestroy(() => clearInterval(pingServerInterval));
+	onDestroy(() => clearInterval(pingServerInterval));
 </script>
 
 <main>
 	<slot />
 </main>
 
-<!-- <footer
+<footer
 	class="text-sm fixed bottom-0 h-8 flex place-items-center place-content-center bg-gray-50 w-screen font-mono gap-8 px-4 font-medium"
 >
 	<p class="">
@@ -36,4 +35,4 @@
 			<span class="text-red-500 font-bold">OFFLINE</span>
 		{/if}
 	</p>
-</footer> -->
+</footer>

web/src/routes/photos/index.svelte

@@ -1,6 +1,5 @@
 <script context="module" lang="ts">
 	export const prerender = false;
-	export const hydrate = false;
 
 	import type { Load } from '@sveltejs/kit';
 

web/svelte.config.js

@@ -3,8 +3,6 @@ import adapter from '@sveltejs/adapter-node';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://github.com/sveltejs/svelte-preprocess
-	// for more information about preprocessors
 	preprocess: preprocess(),
 
 	kit: {