[docs][web-app]: rewrite web-app hosting guide

docs/docs/self-hosting/guides/web-app.md

@@ -1,7 +1,7 @@
 ---
-title: Hosting the web app
+title: Hosting the web apps
 description:
-    Building and hosting Ente's web app, connecting it to your self-hosted
+    Building and hosting Ente's web apps, connecting it to your self-hosted
     server
 ---
 
@@ -17,47 +17,207 @@ yarn install
 NEXT_PUBLIC_ENTE_ENDPOINT=http://localhost:8080 yarn dev:photos
 ```
 
-This is fine for trying this out and verifying that your self-hosted server is
-working correctly etc. But if you would like to use the web app for a longer
-term, then it is recommended that you use a production build.
+This is fine for trying the web app and verifying that your self-hosted server is 
+working as expected etc. But if you would like to use the web app for a longer term, 
+then it is recommended to follow the Docker approach. 
 
-To create a production build, you can run the same process, but instead do a
-`yarn build` (which is an alias for `yarn build:photos`). For example,
+## With Docker/Docker Compose (Recommended)
+
+> [!IMPORTANT]
+>
+> This docker image is still in testing stage and it might show up with some
+> variables in different scenarios. But this image has been tested on a production 
+> ente site. 
+> 
+> Recurring changes might be made by the team or from community if more
+> improvements can be made.  
+
+```dockerfile
+FROM node:20-bookworm-slim as builder
+
+WORKDIR ./ente
+
+COPY . .
+COPY apps/ .
+
+# Will help default to yarn versoin 1.22.22
+RUN corepack enable
+
+RUN yarn cache clean
+RUN yarn install --network-timeout 1000000000
+RUN yarn build:photos && yarn build:auth && yarn build:accounts && yarn build:cast
+
+FROM node:20-bookworm-slim
+
+WORKDIR /app
+
+COPY --from=builder /ente/apps/photos/out /app/photos
+COPY --from=builder /ente/apps/accounts/out /app/accounts
+COPY --from=builder /ente/apps/auth/out /app/auth
+COPY --from=builder /ente/apps/cast/out /app/cast
+
+RUN npm install -g serve
+
+ENV PHOTOS=3000
+EXPOSE ${PHOTOS}
+
+ENV ACCOUNTS=3001
+EXPOSE ${ACCOUNTS}
+
+ENV AUTH=3002
+EXPOSE ${AUTH}
+
+ENV CAST=3003
+EXPOSE ${CAST}
+
+CMD ["sh", "-c", "serve /app/photos -l tcp://0.0.0.0:${PHOTOS} & serve tcp://0.0.0.0:${ACCOUNTS} -l /app/accounts & server tcp://0.0.0.0:${AUTH} -l /app/auth & server -l tcp://0.0.0.0:${CAST} & serve /app/cast]
+```
+
+The above is a multi-stage Dockerfile which creates a production ready static output
+of the 4 apps (Photos, Accounts, Auth and Cast) and serves the static content with 
+Caddy. 
+
+Looking at 2 different node base-images doing different tasks in the same Dockerfile 
+would not make sense, but the Dockerfile is divided into two just to improve the build 
+efficiency as building this Dockerfile will arguably take more time.
+
+Lets build a Docker image from the above Dockerfile. Copy and paste the above Dockerfile 
+contents in the root of your web directory which is inside `ente/web`. Execute the 
+below command to create an image from this Dockerfile.
+
+You can always edit the Dockerfile and remove the steps for apps which you do not 
+intend to install on your system (like auth or cast) and opt out of it. 
+
+```sh
+# Build the image
+docker build -t <image-name>:<tag> --no-cache --progress plain . 
+```
+
+## compose.yaml
+
+Moving ahead, we need to paste the below contents into the compose.yaml inside
+`ente/server/compose.yaml` under the services section. 
+
+```yaml
+  ente-web:
+    image: <image-name> # name of the image you used while building
+    ports:
+      - 3000:3000
+      - 3001:3001
+      - 3002:3002
+      - 3003:3003
+    environment:
+      - NODE_ENV=development
+    restart: always
+```
+
+Now, we're good to go. All we are left to do is start the containers. 
+
+```sh 
+docker compose up -d # --build 
+
+# Accessing the logs
+docker compose logs <container-name>
+```
+
+Next part is to configure a [web server](#web-server-configuration).
+
+## Without Docker / Docker compose
+
+One way to run all the apps together without Docker is by using [PM2](https://pm2.keymetrics.io/) 
+in this setup. The configuration and usage is very simple and just needs one 
+configuration file for it. You can run the apps both in dev server mode as 
+well as static files. 
+
+The below configuration will run the apps in dev server mode.
+
+### Install PM2
+
+```sh 
+npm install pm2@latest 
+```
+
+Copy the below contents to a file called `ecosystem.config.js` inside the `ente/web`
+directory. 
+
+```js 
+module.exports = {
+  apps: [
+    {
+      name: "photos",
+      script: "yarn workspace photos next dev",
+      env: {
+        NODE_ENV: "development",
+        PORT: "3000"
+      }
+    },
+    {
+      name: "accounts",
+      script: "yarn workspace accounts next dev",
+      env: {
+        NODE_ENV: "development",
+        PORT: "3001"
+      },
+    {
+      name: "auth",
+      script: "yarn workspace auth next dev",
+      env: {
+        NODE_ENV: "development",
+        PORT: "3002"
+      }
+    },
+    {
+      name: "cast",
+      script: "yarn workspace cast next dev",
+      env: {
+        NODE_ENV: "development",
+        PORT: "3003"
+      }
+    }
+  ]
+};
+
+```
+
+Finally, start pm2. 
+
+```sh 
+pm2 start 
+
+# for logs
+pm2 logs all
+```
+
+# Web server configuration 
+
+The last step ahead is configuring reverse_proxy for the ports on which the 
+apps are being served (you will have to make changes, if you have cusotmized the ports).
+The web server of choice in this guide is [Caddy](https://caddyserver.com) because
+with caddy you don't have to manually configure/setup SSL ceritifcates as caddy 
+will take care of that.
 
 ```sh
-NEXT_PUBLIC_ENTE_ENDPOINT=http://localhost:8080 yarn build:photos
-```
-
-This creates a production build, which is a static site consisting of a folder
-of HTML/CSS/JS files that can then be deployed on any standard web server.
-
-Nginx is a common choice for a web server, and you can then put the generated
-static site (from the `web/apps/photos/out` folder) to where nginx would serve
-them. Note that there is nothing specific to nginx here - you can use any web
-server - the basic gist is that yarn build will produce a web/apps/photos/out
-folder that you can then serve with any web server of your choice.
-
-If you're new to web development, you might find the [web app's README], and
-some of the documentation it its source code -
-[docs/new.md](https://github.com/ente-io/ente/blob/main/web/docs/new.md),
-[docs/dev.md](https://github.com/ente-io/ente/blob/main/web/docs/dev.md) -
-useful. We've also documented the process we use for our own production
-deploypments in
-[docs/deploy.md](https://github.com/ente-io/ente/blob/main/web/docs/deploy.md),
-though be aware that that is probably overkill for simple cases.
-
-## Using Docker
-
-We currently don't offer pre-built Docker images for the web app, however it is
-quite easy to build and deploy the web app in a Docker container without
-installing anything extra on your machine. For example, you can use the
-dockerfile from this
-[discussion](https://github.com/ente-io/ente/discussions/1183), or use the
-Dockerfile mentioned in the
-[notes](https://help.ente.io/self-hosting/guides/external-s3) created by a
-community member.
-
-## Public sharing
-
-If you'd also like to enable public sharing on the web app you're running,
-please follow the [step here](https://help.ente.io/self-hosting/faq/sharing).
+photos.yourdomain.com {
+	reverse_proxy http://localhost:3001
+}
+
+auth.yourdomain.com {
+    reverse_proxy http://localhost:3002
+}
+# and so on ...
+```
+
+Next, start the caddy server :). 
+
+```sh 
+# If caddy service is not enabled
+sudo systemctl enable caddy
+
+sudo systemctl daemon-reload 
+sudo systemctl start caddy
+```
+
+## Contributing 
+
+Please start a discussion on the Github Repo if you have any suggestions for the Dockerfile,
+You can also share your setups on Github Discussions.