Docker react app loading.

Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
James Ketr 2023-01-15 19:50:40 -08:00
parent 7c7bf51415
commit 67808d83fe
10 changed files with 46 additions and 80 deletions

View File

@ -10,33 +10,20 @@ This photo manager performs the following:
# To use the Docker # To use the Docker
Create a symbolic link from 'photos' to where your photos Edit the environment file '.env' and set PICTURES to the correct
are stored, and from 'db' to where you want the DB files: location of pictures.
```bash Also change the PORT to the port that will be nginx redirected to from
ln -s /multimedia/Pictures photos your main nginx server -- this allows you to run multiple instances
ln -s /multimedia/PicturesDB db of the photo application on different paths, with different image sets.
```
Then build and spin up the container:
```bash ```bash
docker build . -t photos docker build . -t photos
docker-compose up -d 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 NEF processing uses darktable

9
client/.env Normal file
View File

@ -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/

View File

@ -2,6 +2,7 @@
"name": "ketr-photos", "name": "ketr-photos",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"port": 3000,
"dependencies": { "dependencies": {
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
@ -12,10 +13,10 @@
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "export $(cat .env | xargs) ; react-scripts start",
"build": "react-scripts build", "build": "export $(cat .env | xargs) ; react-scripts build",
"test": "react-scripts test", "test": "export $(cat .env | xargs) ; react-scripts test",
"eject": "react-scripts eject" "eject": "export $(cat .env | xargs) ; react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [

View File

@ -1,38 +1,32 @@
div {
box-sizing: border-box;
}
.App { .App {
text-align: center; text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
} }
.App-logo { .Worksheet {
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;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: center; justify-self: stretch;
justify-content: center; align-self: stretch;
font-size: calc(10px + 2vmin); height: 100%;
color: white;
} }
.App-link { .Identities {
color: #61dafb; display: flex;
flex-grow: 1;
border: 1px solid green;
} }
@keyframes App-logo-spin { .Cluster {
from { display: flex;
transform: rotate(0deg); flex-grow: 1;
} border: 1px solid red;
to {
transform: rotate(360deg);
}
} }

View File

@ -1,25 +0,0 @@
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;

View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import './index.css'; import './index.css';
import App from './App'; import App from './App.tsx';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -28,4 +28,5 @@ services:
# - ${PWD}:/website # - ${PWD}:/website
- ${PWD}/ketrface:/website/ketrface - ${PWD}/ketrface:/website/ketrface
- ${PWD}/frontend:/website/frontend - ${PWD}/frontend:/website/frontend
- ${PWD}/client:/website/client
- ${PWD}/server:/website/server - ${PWD}/server:/website/server

View File

@ -10,5 +10,5 @@ location /identities {
proxy_http_version 1.1; proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade; proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade"; proxy_set_header Connection "upgrade";
proxy_pass https://localhost:3000/; proxy_pass https://localhost:3000;
} }

View File

@ -1,6 +1,6 @@
# PRODUCTION -- pre-built source # PRODUCTION -- pre-built source
location /identities { location /identities {
try_files $uri $uri/ =404; try_files $uri $uri/ =404;
alias /website/client/build/; alias /website/client/build;
index index.html; index index.html;
} }