From 67808d83feb4c96b44dcd1b2ed7478f27728bcb3 Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Sun, 15 Jan 2023 19:50:40 -0800 Subject: [PATCH] Docker react app loading. Signed-off-by: James Ketrenos --- README.md | 25 +++++-------------- client/.env | 9 +++++++ client/package.json | 9 ++++--- client/src/App.css | 50 ++++++++++++++++--------------------- client/src/App.js | 25 ------------------- client/src/index.js | 2 +- client/src/logo.svg | 1 - docker-compose.yml | 1 + server/development.location | 2 +- server/production.location | 2 +- 10 files changed, 46 insertions(+), 80 deletions(-) create mode 100644 client/.env delete mode 100644 client/src/App.js delete mode 100644 client/src/logo.svg diff --git a/README.md b/README.md index 840a66d..b31df20 100644 --- a/README.md +++ b/README.md @@ -10,33 +10,20 @@ This photo manager performs the following: # To use the Docker -Create a symbolic link from 'photos' to where your photos -are stored, and from 'db' to where you want the DB files: +Edit the environment file '.env' and set PICTURES to the correct +location of pictures. -```bash -ln -s /multimedia/Pictures photos -ln -s /multimedia/PicturesDB db -``` - -Then build and spin up the container: +Also change the PORT to the port that will be nginx redirected to from +your main nginx server -- this allows you to run multiple instances +of the photo application on different paths, with different image sets. ```bash docker build . -t photos docker-compose up -d ``` -At this point, port 8123 will be supporting the photo app. +At this point, .env's PORT (default 8123) will be supporting the photo app. -#### Upgrade Node - -```bash -wget -qO- https://deb.nodesource.com/setup_10.x | sudo bash - -sudo apt-get install --yes nodejs -``` - -```bash -sudo npm install --global npm@latest -``` ### NEF processing uses darktable diff --git a/client/.env b/client/.env new file mode 100644 index 0000000..bc1cd84 --- /dev/null +++ b/client/.env @@ -0,0 +1,9 @@ +PORT=3000 +HOST=localhost +HTTPS=true +DANGEROUSLY_DISABLE_HOST_CHECK='true' +WDS_SOCKET_PATH=/identities/ws +WDS_SOCKET_PORT=0 +WDS_SOCKET_HOST=ketrenos.com +PUBLIC_URL=/identities/ + diff --git a/client/package.json b/client/package.json index 9771921..4a2a10d 100644 --- a/client/package.json +++ b/client/package.json @@ -2,6 +2,7 @@ "name": "ketr-photos", "version": "0.1.0", "private": true, + "port": 3000, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", @@ -12,10 +13,10 @@ "web-vitals": "^2.1.4" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "start": "export $(cat .env | xargs) ; react-scripts start", + "build": "export $(cat .env | xargs) ; react-scripts build", + "test": "export $(cat .env | xargs) ; react-scripts test", + "eject": "export $(cat .env | xargs) ; react-scripts eject" }, "eslintConfig": { "extends": [ diff --git a/client/src/App.css b/client/src/App.css index 74b5e05..e129486 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -1,38 +1,32 @@ +div { + box-sizing: border-box; +} + .App { text-align: center; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; } -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; +.Worksheet { display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; + flex-direction: row; + justify-self: stretch; + align-self: stretch; + height: 100%; } -.App-link { - color: #61dafb; +.Identities { + display: flex; + flex-grow: 1; + border: 1px solid green; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.Cluster { + display: flex; + flex-grow: 1; + border: 1px solid red; } diff --git a/client/src/App.js b/client/src/App.js deleted file mode 100644 index 3784575..0000000 --- a/client/src/App.js +++ /dev/null @@ -1,25 +0,0 @@ -import logo from './logo.svg'; -import './App.css'; - -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); -} - -export default App; diff --git a/client/src/index.js b/client/src/index.js index d563c0f..fc8b7e9 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import App from './App'; +import App from './App.tsx'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); diff --git a/client/src/logo.svg b/client/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/client/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index 812e5ee..c111d0c 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -28,4 +28,5 @@ services: # - ${PWD}:/website - ${PWD}/ketrface:/website/ketrface - ${PWD}/frontend:/website/frontend + - ${PWD}/client:/website/client - ${PWD}/server:/website/server diff --git a/server/development.location b/server/development.location index 95acfbc..cd32d73 100644 --- a/server/development.location +++ b/server/development.location @@ -10,5 +10,5 @@ location /identities { proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; - proxy_pass https://localhost:3000/; + proxy_pass https://localhost:3000; } \ No newline at end of file diff --git a/server/production.location b/server/production.location index aa35c62..a19a9b5 100644 --- a/server/production.location +++ b/server/production.location @@ -1,6 +1,6 @@ # PRODUCTION -- pre-built source location /identities { try_files $uri $uri/ =404; - alias /website/client/build/; + alias /website/client/build; index index.html; } \ No newline at end of file