Setting up local lemmy-ui instance with remote backend?

[alectrocute]

Hi all!

I'd like to work on contributing to the lemmy-ui project. As a mere frontend dev, I'd like to setup a local lemmy-ui instance and use a remote backend server on latest macOS. Can you please link me a guide or write up quick steps to make this possible?

I tried:

• Setting up the lemmy-ui repo locally, with submodules init'd. yarn start launched the frontend server successfully but couldn't connect to ds9.lemmy.ml as exported in my LEMMY_UI_LEMMY_INTERNAL_HOST , LEMMY_UI_LEMMY_WS_HOST env variables. I also tried setting LEMMY_UI_DISABLE_CSP to true. I feel this is the closest I got.
• Using docker-compose for both the frontend and backend locally, resulting in error:

➜  docker git:(main) docker-compose up -d        
WARNING: Compose V1 is no longer supported and will be removed from Docker Desktop in an upcoming release. See https://docs.docker.com/go/compose-v1-eol/
Creating network "docker_lemmyinternal" with driver "bridge"
Creating network "docker_lemmyexternalproxy" with the default driver
Building lemmy
[+] Building 31.3s (7/13)                                                                     [+] Building 150.8s (11/13)                                                                   
 => [internal] load build definition from Dockerfile                                     0.0ss
 => => transferring dockerfile: 1.05kB                                                   0.0ss
 => [internal] load .dockerignore                                                        0.0ss
 => => transferring context: 159B                                                        0.0ss
 => [internal] load metadata for docker.io/library/alpine:3                              2.0ss
 => [internal] load metadata for docker.io/clux/muslrust:1.67.0                          2.1ss
 => [builder 1/5] FROM docker.io/clux/muslrust:1.67.0@sha256:c92ad5296e87681efa161fdb7  90.4ss
 => => resolve docker.io/clux/muslrust:1.67.0@sha256:c92ad5296e87681efa161fdb7421bb136b  0.0ss
 => => sha256:c92ad5296e87681efa161fdb7421bb136ba5df399441a40638c40d017 2.63kB / 2.63kB  0.0ss
 => => sha256:d6f3e144d2803bee2d077a3df724c1520fe955643b268a1ba1f36e1ea 9.35kB / 9.35kB  0.0ss
 => => sha256:677076032cca0a2362d25cf3660072e738d1b96fe860409a33ce90 29.53MB / 29.53MB  14.4ss
 => => sha256:5a29a0b17d46b7b1d04f1d546a963ccfe081a450e2052c04fa8b 144.87MB / 144.87MB  63.2ss
 => => sha256:c7ef976a78f92529b797cad48392238452b8c1dd2672ee9b3dcb 242.70MB / 242.70MB  85.5ss
 => => extracting sha256:677076032cca0a2362d25cf3660072e738d1b96fe860409a33ce901d695d7e  0.5ss
 => => sha256:1e828fad7190aae6eec504d9476280438b183f6348d7d5d8bf5b26a0964e72 93B / 93B  14.7ss
 => => sha256:d4a038b3b0a22ad9b1037f48fa03f0dc418eae3027379944e5f8a0033a84 323B / 323B  14.8ss
 => => sha256:1b51050bd60fa556db640e0ce9b0b314954051c6fd93253d830c7b 96.70kB / 96.70kB  15.1ss
 => => sha256:7a95cb992bf8a55f85816b91f77a4d7372998d969c8a3927cae0e612 5.82MB / 5.82MB  20.4ss
 => => sha256:fd096cec950947b901ccbf75a6b112e2db82ec14f3c1471b0a2eb24d 2.71MB / 2.71MB  23.0ss
 => => sha256:021b9a3178ead0f121951343256594cf9f7dea58f296c2b7e4357d 30.34MB / 30.34MB  45.6ss
 => => sha256:788cead171c881c1f2b1c3a340e69f989370cd0b1859b3596a8cdda1 1.56MB / 1.56MB  47.3ss
 => => sha256:6eaf35cb08c399776199bc9062d2e6ed17cc4f1b0f368613205fa5033ffc61 95B / 95B  47.5ss
 => => extracting sha256:5a29a0b17d46b7b1d04f1d546a963ccfe081a450e2052c04fa8ba2f381fcbb  2.1ss
 => => extracting sha256:c7ef976a78f92529b797cad48392238452b8c1dd2672ee9b3dcb9664596cef  3.0ss
 => => extracting sha256:1e828fad7190aae6eec504d9476280438b183f6348d7d5d8bf5b26a0964e72  0.0ss
 => => extracting sha256:d4a038b3b0a22ad9b1037f48fa03f0dc418eae3027379944e5f8a0033a8466  0.0ss
 => => extracting sha256:1b51050bd60fa556db640e0ce9b0b314954051c6fd93253d830c7b1309234e  0.0ss
 => => extracting sha256:7a95cb992bf8a55f85816b91f77a4d7372998d969c8a3927cae0e61294d18f  0.3ss
 => => extracting sha256:fd096cec950947b901ccbf75a6b112e2db82ec14f3c1471b0a2eb24defb403  0.1s
 => => extracting sha256:021b9a3178ead0f121951343256594cf9f7dea58f296c2b7e4357dae1a525f  0.7s
 => => extracting sha256:788cead171c881c1f2b1c3a340e69f989370cd0b1859b3596a8cdda1deef85  0.0s
 => => extracting sha256:6eaf35cb08c399776199bc9062d2e6ed17cc4f1b0f368613205fa5033ffc61  0.0s
 => [lemmy 1/3] FROM docker.io/library/alpine:3@sha256:02bb6f428431fbc2809c5d1b41eab5a6  0.1s
 => => resolve docker.io/library/alpine:3@sha256:02bb6f428431fbc2809c5d1b41eab5a6835019  0.0s
 => => sha256:44dd6f2230041eede4ee5e792728313e43921b3e46c1809399391535c 1.49kB / 1.49kB  0.0s
 => => sha256:02bb6f428431fbc2809c5d1b41eab5a68350194fb508869a33cb1af44 1.64kB / 1.64kB  0.0s
 => => sha256:30e6d35703c578ee703230b9dc87ada2ba958c1928615ac8a674fcbbcbb0f 528B / 528B  0.0s
 => [internal] load build context                                                        0.3s
 => => transferring context: 23.29MB                                                     0.3s
 => [lemmy 2/3] RUN apk add libpq                                                        2.5s
 => [builder 2/5] WORKDIR /app                                                           1.4s
 => [builder 3/5] COPY . .                                                               0.1s
 => ERROR [builder 4/5] RUN --mount=type=cache,target=/app/target     if [ "debug" = "  56.8s
------                                                                                        
 > [builder 4/5] RUN --mount=type=cache,target=/app/target     if [ "debug" = "debug" ] ; then       echo "pub const VERSION: &str = "$(git describe --tag)";" > "crates/utils/src/version.rs"       && cargo build --target x86_64-unknown-linux-musl       && cp ./target/x86_64-unknown-linux-musl/debug/lemmy_server /app/lemmy_server;     fi:
#0 3.208     Updating crates.io index
#0 56.77 Killed
------
Dockerfile:13
--------------------
  12 |     # Debug mode build
  13 | >>> RUN --mount=type=cache,target=/app/target \
  14 | >>>     if [ "$RUST_RELEASE_MODE" = "debug" ] ; then \
  15 | >>>       echo "pub const VERSION: &str = \"$(git describe --tag)\";" > "crates/utils/src/version.rs" \
  16 | >>>       && cargo build --target ${CARGO_BUILD_TARGET} \
  17 | >>>       && cp ./target/$CARGO_BUILD_TARGET/$RUST_RELEASE_MODE/lemmy_server /app/lemmy_server; \
  18 | >>>     fi
  19 |     
--------------------
ERROR: failed to solve: process "/bin/sh -c if [ \"$RUST_RELEASE_MODE\" = \"debug\" ] ; then       echo \"pub const VERSION: &str = \\\"$(git describe --tag)\\\";\" > \"crates/utils/src/version.rs\"       && cargo build --target ${CARGO_BUILD_TARGET}       && cp ./target/$CARGO_BUILD_TARGET/$RUST_RELEASE_MODE/lemmy_server /app/lemmy_server;     fi" did not complete successfully: exit code: 137

If I can get this setup, I'd love to spend a lot of free time contributing to this project. This is my main hurdle currently and it's been a bit of a headache to get up and running.

Thanks so much.

[robertnabbe]

Same boat!

[nomizzz]

Same here, been spelunking a little bit to find out how these environment variables are connected, I'm assuming others could just outline exactly what ENVs need to be set to develop lemmy-ui locally with a remote backend?

[ctsrc]

Hi guys. If you want you can make an account on my Lemmy instance https://zapad.nstr.no/ and then we can look at how we can connect your locally running lemmy-ui to the backend of my Lemmy instance.

Ping me here after you've created an account.

[dankxiaobong]

@alectrocute were you able to do some progress on this?
@jsit I noticed you were able to populate your local instance with content in this screenshot #1395 (comment), did you populate this manually or were you able to connect to another backend?

[DomenicRoti]

I'm in the same boat, going to follow along and I'll post if I make any progress.

[rosenjcb]

I've tried setting up a local .env file with all sorts of variations REACT_APP_LEMMY_UI_HOST INFERNO_APP_LEMMY_UI_HOST and by passing the env vars through the --env flag on the webpack level. E.g. webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=development --env LEMMY_UI_HOST=lemmy.world and no luck. I'm scratching my head at this point.

[rosenjcb]

So I actually found a way to inject env vars via the cross-env utility. E.g. cross-env LEMMY_UI_LEMMY_INTERNAL_HOST=lemmy.world LEMMY_UI_HTTPS=true LEMMY_UI_DISABLE_CSP=true yarn dev

However, more errors will occur down the road such as 404: FetchError: invalid json response body at http://lemmy.world/api/v3/site?.

[harrismcc]

As far as I can tell this is error is being thrown here

lemmy-ui/src/server/handlers/catch-all-handler.tsx

Line 49 in 322a44b

let try_site = await client.getSite(getSiteForm);

I'm pretty sure it has to do with SSL, and this is backed up by the fact that running curl http://lemmy.world/api/v3/site\?
returns:

<html>
<head><title>301 Moved Permanently</title></head>
<body>
<center><h1>301 Moved Permanently</h1></center>
<hr><center>nginx/1.18.0 (Ubuntu)</center>
</body>
</html>

So I think if you were able to find a lemmy instance that didn't use/enforce HTTPS then you could get this working...

[harrismcc]

So for this type of dev environment config issue I've been really liking devcontainers, so I figured I'd give it a go for this repo and I was able to get it working.

You can simply launch vscode and the database, backend, and everything else will automatically run in docker. It'll all network together, and default configuration can be saved to the repo (so no fiddling with lemmy.hjson).

Demo: https://github.com/LemmyNet/lemmy-ui/assets/740503/c085daf5-431c-4be1-9348-74285cb05a46

The only downside of this is that devcontainers are really oriented around vscode, and other editors have limited (if any) support for them. Still, I don't think it can hurt to have another option for folks that makes it easier to contribute!

[harrismcc]

I have a heavily work in progress branch for this, if anyone is interested https://github.com/harrismcc/lemmy-ui/tree/devcontainer

[rosenjcb]

I've also had a lot of luck using the docker compose setup and just killing the lemmy-ui container it spawns whenever I want to do frontend dev work.

[iatenine]

adding onto @rosenjcb's comment since I found it helpful 6 months later:
You don't really need to kill the ui container as a local build of lemmy-ui listens on port 1234 rather than 1236 but can connect to the same Docker BE, in fact I found it a useful way to compare changes side-by-side

[TabithaES]

Anyone figured this out yet? I'm dead end with:

Error!

There was an error on the server. Try refreshing your browser. If that doesn't work, come back at a later time. If the problem persists, you can seek help in the Lemmy support community or Lemmy Matrix room.

and there's no useful information in terminal or network tab, no guidance on how to proceed.

[dessalines]

Post the docker logs if you would.

[TabithaES]

not using docker, only attempting to work on the front-end.

https://gist.github.com/TabithaES/4bb88263d60dc0cd0bc1326e811b3131

could be an env variable issue, but there's no output with a specific error message to hint at which of these could be wrong for remote development:

LEMMY_UI_HOST=localhost:12345
LEMMY_UI_LEMMY_INTERNAL_HOST=hexbear.net
LEMMY_UI_LEMMY_EXTERNAL_HOST=hexbear.net
LEMMY_UI_HTTPS=true
LEMMY_UI_DEBUG=true
LEMMY_UI_DISABLE_CSP=true

[dessalines]

I'm not sure what this one's about, I develop lemmy remotely, and I believe all the instructions here are correct: https://join-lemmy.org/docs/contributors/02-local-development.html