AppFlowy-IO/AppFlowy

Fork 0

mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2026-03-24 12:56:59 +00:00

[GH-ISSUE #5920] [FR] self-hosters publish to web #2630

New issue

Closed

opened 2026-03-23 21:23:55 +00:00 by mirror · 13 comments

mirror commented

2026-03-23 21:23:55 +00:00

Owner

Originally created by @annieappflowy on GitHub (Aug 10, 2024).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/5920

Originally assigned to: @LucasXu0, @khorshuheng on GitHub.

          This is now partially available since v0.6.3

https://github.com/AppFlowy-IO/AppFlowy/releases/tag/0.6.3

There is a limitation for self-hosters, that the option is offered in AppFlowy, but breaks, due to generating false-positive URLs when being logged on to a self-hosted AppFlowy Cloud instance.

Also see:

https://github.com/AppFlowy-IO/AppFlowy-Cloud/issues/680

Originally posted by @almereyda in https://github.com/AppFlowy-IO/AppFlowy/issues/716#issuecomment-2217740844

Originally created by @annieappflowy on GitHub (Aug 10, 2024). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/5920 Originally assigned to: @LucasXu0, @khorshuheng on GitHub. This is now partially available since v0.6.3 - https://github.com/AppFlowy-IO/AppFlowy/releases/tag/0.6.3 There is a limitation for self-hosters, that the option is offered in AppFlowy, but breaks, due to generating false-positive URLs when being logged on to a self-hosted AppFlowy Cloud instance. ![grafik](https://github.com/AppFlowy-IO/AppFlowy-Cloud/assets/1645308/bbfa24b5-39d5-4b40-8815-50f79766874b) Also see: - https://github.com/AppFlowy-IO/AppFlowy-Cloud/issues/680 _Originally posted by @almereyda in https://github.com/AppFlowy-IO/AppFlowy/issues/716#issuecomment-2217740844_

mirror

2026-03-23 21:23:55 +00:00

closed this issue
added the
web

Q1 25

2025

new feature
labels

mirror commented

2026-03-23 21:23:56 +00:00

Author

Owner

@smartyhero commented on GitHub (Sep 6, 2024):

Share my successful use of the Publish to the Web feature. https://blog.k8sre.cn/05ee1554-efde-462f-a10c-b528b558a318/-----appflowy-------8d6e89fb-7e4f-4974-bbe3-b30b9c487d69

@smartyhero commented on GitHub (Sep 6, 2024): Share my successful use of the Publish to the Web feature. https://blog.k8sre.cn/05ee1554-efde-462f-a10c-b528b558a318/-----appflowy-------8d6e89fb-7e4f-4974-bbe3-b30b9c487d69

mirror commented

2026-03-23 21:23:56 +00:00

Author

Owner

@smartyhero commented on GitHub (Sep 6, 2024):

There are some small suggestions for the published page

If the content is very small, I hope the comment text box is at the bottom of the page
I hope to add content such as publishing time/modification time on the page
I hope to include a fixed-position document top/bottom button
The code library hopes to include line numbers

@smartyhero commented on GitHub (Sep 6, 2024): There are some small suggestions for the published page 1. If the content is very small, I hope the comment text box is at the bottom of the page 2. I hope to add content such as publishing time/modification time on the page 3. I hope to include a fixed-position document top/bottom button 4. The code library hopes to include line numbers

mirror commented

2026-03-23 21:23:56 +00:00

Author

Owner

@ghost commented on GitHub (Sep 6, 2024):

hey @smartyhero , is this available in self hosted version? how did u got the custom url?

@ghost commented on GitHub (Sep 6, 2024): hey @smartyhero , is this available in self hosted version? how did u got the custom url?

mirror commented

2026-03-23 21:23:56 +00:00

Author

Owner

@annieappflowy commented on GitHub (Sep 6, 2024):

There are some small suggestions for the published page

If the content is very small, I hope the comment text box is at the bottom of the page

I hope to add content such as publishing time/modification time on the page

I hope to include a fixed-position document top/bottom button

The code library hopes to include line numbers

@smartyhero , Can you explain 3. a fixed-position document top/bottom button? How it would work?
Thank you for your suggestions!

@annieappflowy commented on GitHub (Sep 6, 2024): > There are some small suggestions for the published page > > 1. If the content is very small, I hope the comment text box is at the bottom of the page > 2. I hope to add content such as publishing time/modification time on the page > 3. I hope to include a fixed-position document top/bottom button > 4. The code library hopes to include line numbers @smartyhero , Can you explain 3. a fixed-position document top/bottom button? How it would work? Thank you for your suggestions!

mirror commented

2026-03-23 21:23:56 +00:00

Author

Owner

@smartyhero commented on GitHub (Sep 7, 2024):

Provide a button to jump to the top or bottom of the page with one click

@smartyhero commented on GitHub (Sep 7, 2024): Provide a button to jump to the top or bottom of the page with one click

mirror commented

2026-03-23 21:23:56 +00:00

Author

Owner

@smartyhero commented on GitHub (Sep 7, 2024):

hey @smartyhero , is this available in self hosted version? how did u got the custom url?

You can open the URL I provided, which contains the operation process I recorded, but it is in Chinese, so you may need to translate it.

I configured a domain name for the published page, but the domain name cannot be customized in appflowy at present, so you need to manually replace the URL provided by appflowy with your own domain name before accessing it.

@smartyhero commented on GitHub (Sep 7, 2024): > hey @smartyhero , is this available in self hosted version? how did u got the custom url? You can open the URL I provided, which contains the operation process I recorded, but it is in Chinese, so you may need to translate it. I configured a domain name for the published page, but the domain name cannot be customized in appflowy at present, so you need to manually replace the URL provided by appflowy with your own domain name before accessing it.

mirror commented

2026-03-23 21:23:57 +00:00

Author

Owner

@Hazegard commented on GitHub (Sep 27, 2024):

I managed to also publish pages on my self hosted environment, here is en excerpt of what ive done.

My setup is a traefik that handle the publicly exposed dockers:

The admin server (admin_appflowy) exposed at admin.example.com
The public pages (appflowy_web_app) exposed at blog.example.com

Here are the steps:

Dockerfile for appflowy_web_app

It updates the domain test.appflowy.cloud to my own domain admin.example.com

FROM alpine:latest

WORKDIR /tmp
RUN apk add git nodejs npm && npm install -g pnpm@8.5.0 && git clone https://github.com/AppFlowy-IO/AppFlowy

WORKDIR /tmp/AppFlowy/frontend/appflowy_web_app

RUN sed -i 's/test.appflowy.cloud/admin.example.com/g' /tmp/AppFlowy/frontend/appflowy_tauri/src-tauri/env.development /tmp/AppFlowy/frontend/appflowy_web_app/src/components/main/app.hooks.ts /tmp/AppFlowy/frontend/appflowy_tauri/src/appflowy_app/components/auth/auth.hooks.ts /tmp/AppFlowy/frontend/appflowy_flutter/lib/workspace/application/settings/settings_dialog_bloc.dart /tmp/AppFlowy/frontend/appflowy_tauri/src/appflowy_app/components/_shared/devtool/ManualSignInDialog.tsx /tmp/AppFlowy/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/setting_appflowy_cloud.dart /tmp/AppFlowy/frontend/appflowy_flutter/integration_test/desktop/settings/sign_in_page_settings_test.dart /tmp/AppFlowy/frontend/appflowy_flutter/integration_test/desktop/settings/sign_in_page_settings_test.dart && pnpm install && pnpm run build

ENTRYPOINT [ "pnpm", "run", "start", "--host" ]

Update the nginx configuration to add CORS headers

    server {
        listen 8080;

        # https://github.com/nginxinc/nginx-prometheus-exporter
        location = /stub_status {
            stub_status;
        }
    }

   # UPDATE HERE
    # /etc/nginx/snippets/cors_configs.conf
    # Determine if it's a valid origin and set it in the $cors variable.
    map "$http_origin" $cors {
        default '';
        "~^https://blog\.example\.com$" "$http_origin";
    }


    server {
        ssl_certificate /etc/nginx/ssl/certificate.crt;
        ssl_certificate_key /etc/nginx/ssl/private_key.key;

        listen 80;
        listen 443 ssl;
        client_max_body_size 10M;

        underscores_in_headers on;

        # GoTrue
        location /gotrue/ {
            set $gotrue gotrue;
            proxy_pass http://$gotrue:9999;
            # UPDATE HERE
            proxy_hide_header 'Access-Control-Allow-Origin';
            add_header 'Access-Control-Allow-Origin' "$cors" always; # <-- Variable $cors
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'Accept, Authorization, Cache-Control, Content-Type, DNT, If-Modified-Since, Keep-Alive, Origin, User-Agent, X-Requested-With, redirect_to' always;

            # Check if it's a preflight request and "cache" it for 20 days
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' "$cors" always; # <-- Variable $cors
                add_header 'Access-Control-Allow-Credentials' 'true' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'Accept, Authorization, Cache-Control, Content-Type, DNT, If-Modified-Since, Keep-Alive, Origin, User-Agent, X-Requested-With, redirect_to' always;

                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                add_header 'Content-Length' 0;
                return 204;
            }

            rewrite ^/gotrue(/.*)$ $1 break;

            # Allow headers like redirect_to to be handed over to the gotrue
            # for correct redirecting
            proxy_set_header Host $http_host;
            proxy_pass_request_headers on;
        }

Add the appflowy_web_app container to the stack and configure the reverse proxy

Finally, just use the publish to web feature and update the link to use your domain (blog.example.com here) .

Its the first working attempt I have, so the configuration may be improvable (mainly the nginx configuration is my first working attempt), but if you want to try yourself you can start from it :)

@Hazegard commented on GitHub (Sep 27, 2024): I managed to also publish pages on my self hosted environment, here is en excerpt of what ive done. My setup is a traefik that handle the publicly exposed dockers: - The admin server (`admin_appflowy`) exposed at `admin.example.com` - The public pages (`appflowy_web_app`) exposed at `blog.example.com` Here are the steps: 1. Dockerfile for `appflowy_web_app` It updates the domain `test.appflowy.cloud` to my own domain `admin.example.com` ```Dockerfile FROM alpine:latest WORKDIR /tmp RUN apk add git nodejs npm && npm install -g pnpm@8.5.0 && git clone https://github.com/AppFlowy-IO/AppFlowy WORKDIR /tmp/AppFlowy/frontend/appflowy_web_app RUN sed -i 's/test.appflowy.cloud/admin.example.com/g' /tmp/AppFlowy/frontend/appflowy_tauri/src-tauri/env.development /tmp/AppFlowy/frontend/appflowy_web_app/src/components/main/app.hooks.ts /tmp/AppFlowy/frontend/appflowy_tauri/src/appflowy_app/components/auth/auth.hooks.ts /tmp/AppFlowy/frontend/appflowy_flutter/lib/workspace/application/settings/settings_dialog_bloc.dart /tmp/AppFlowy/frontend/appflowy_tauri/src/appflowy_app/components/_shared/devtool/ManualSignInDialog.tsx /tmp/AppFlowy/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/setting_appflowy_cloud.dart /tmp/AppFlowy/frontend/appflowy_flutter/integration_test/desktop/settings/sign_in_page_settings_test.dart /tmp/AppFlowy/frontend/appflowy_flutter/integration_test/desktop/settings/sign_in_page_settings_test.dart && pnpm install && pnpm run build ENTRYPOINT [ "pnpm", "run", "start", "--host" ] ``` 2. Update the nginx configuration to add CORS headers ``` server { listen 8080; # https://github.com/nginxinc/nginx-prometheus-exporter location = /stub_status { stub_status; } } # UPDATE HERE # /etc/nginx/snippets/cors_configs.conf # Determine if it's a valid origin and set it in the $cors variable. map "$http_origin" $cors { default ''; "~^https://blog\.example\.com$" "$http_origin"; } server { ssl_certificate /etc/nginx/ssl/certificate.crt; ssl_certificate_key /etc/nginx/ssl/private_key.key; listen 80; listen 443 ssl; client_max_body_size 10M; underscores_in_headers on; # GoTrue location /gotrue/ { set $gotrue gotrue; proxy_pass http://$gotrue:9999; # UPDATE HERE proxy_hide_header 'Access-Control-Allow-Origin'; add_header 'Access-Control-Allow-Origin' "$cors" always; # <-- Variable $cors add_header 'Access-Control-Allow-Credentials' 'true' always; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'Accept, Authorization, Cache-Control, Content-Type, DNT, If-Modified-Since, Keep-Alive, Origin, User-Agent, X-Requested-With, redirect_to' always; # Check if it's a preflight request and "cache" it for 20 days if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' "$cors" always; # <-- Variable $cors add_header 'Access-Control-Allow-Credentials' 'true' always; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'Accept, Authorization, Cache-Control, Content-Type, DNT, If-Modified-Since, Keep-Alive, Origin, User-Agent, X-Requested-With, redirect_to' always; add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain charset=UTF-8'; add_header 'Content-Length' 0; return 204; } rewrite ^/gotrue(/.*)$ $1 break; # Allow headers like redirect_to to be handed over to the gotrue # for correct redirecting proxy_set_header Host $http_host; proxy_pass_request_headers on; } ``` 3. Add the `appflowy_web_app` container to the stack and configure the reverse proxy Finally, just use the publish to web feature and update the link to use your domain (blog.example.com here) . Its the first working attempt I have, so the configuration may be improvable (mainly the nginx configuration is my first working attempt), but if you want to try yourself you can start from it :)

mirror commented

2026-03-23 21:23:57 +00:00

Author

Owner

@luxio commented on GitHub (Sep 30, 2024):

@Hazegard Thank you very much.

Add the appflowy_web_app container to the stack and configure the reverse proxy

How did you add the container to the stack?

@luxio commented on GitHub (Sep 30, 2024): @Hazegard Thank you very much. > Add the appflowy_web_app container to the stack and configure the reverse proxy How did you add the container to the stack?

mirror commented

2026-03-23 21:23:57 +00:00

Author

Owner

@almereyda commented on GitHub (Sep 30, 2024):

@luxio While I cannot comment on the preposters journey, please feel invited to also take inspiration from this comment in the tracking issue over at the backend side of things.

The Dockerfile above helped me to extend my https://github.com/AppFlowy-IO/AppFlowy-Cloud/issues/622 experiment quite easily with a custom static frontend alongside my AppFlowy-Cloud instance. Next step could be to reintegrate the modifications into the application container, in so it serves a frontend adapted to its endpoints. The suggestion is to 1st patch the deployment images and 2nd to modify this web app here to allow runtime configuration of the affected settings.

The comment also mentions perceived regressions in the UX of the display, which makes a lot of effort to draw people to register to the instance.

@almereyda commented on GitHub (Sep 30, 2024): @luxio While I cannot comment on the preposters journey, please feel invited to also take inspiration from [this comment in the tracking issue](https://github.com/AppFlowy-IO/AppFlowy-Cloud/issues/680#issuecomment-2380387584) over at the backend side of things. The Dockerfile above helped me to extend my https://github.com/AppFlowy-IO/AppFlowy-Cloud/issues/622 experiment quite easily with a custom static frontend alongside my AppFlowy-Cloud instance. Next step could be to reintegrate the modifications into the application container, in so it serves a frontend adapted to its endpoints. The suggestion is to 1st patch the deployment images and 2nd to modify this web app here to allow runtime configuration of the affected settings. The comment also mentions perceived regressions in the UX of the display, which makes a lot of effort to draw people to register to the instance.

mirror commented

2026-03-23 21:23:57 +00:00

Author

Owner

@almereyda commented on GitHub (Oct 13, 2024):

We now have four highly related tracking issues for two tightly related features in the two frontend and backend projects now:

Feature	AppFlowy	AppFlowy Cloud
Share to web	<this one>	https://github.com/AppFlowy-IO/AppFlowy-Cloud/issues/680
Collaborate on web	https://github.com/AppFlowy-IO/AppFlowy/issues/6539	https://github.com/AppFlowy-IO/AppFlowy-Cloud/issues/873

Edit:

The comment https://github.com/AppFlowy-IO/AppFlowy-Cloud/issues/680#issuecomment-2380387584 better fits here:

Which gives us the published document and three AppFlowy icons in all corners but the lower-right. In addition, we are also offered to "Start with this template" and a three-dot menu, where we are suggested to "Sign up or log in". For a static export and esp. for a self-hosted environment, all these are too much self-promotion and nudging towards registration with the platform and potentially distract a recipient from the content that was tried to convey with the link.

When being finished reading, at the bottom there is another Comments area, which when engaged with also tries to have us register. Again.

The first visible regression is that "Image load failed" is displayed instead of an image, because its file_storage URL returns:
{"code":1017,"message":"Can't find the user uuid from the request: No Authorization header"}

@almereyda commented on GitHub (Oct 13, 2024): We now have four highly related tracking issues for two tightly related features in the two frontend and backend projects now: Feature | AppFlowy | AppFlowy Cloud --- | --- | --- Share to web | \<this one\> | https://github.com/AppFlowy-IO/AppFlowy-Cloud/issues/680 Collaborate on web | https://github.com/AppFlowy-IO/AppFlowy/issues/6539 | https://github.com/AppFlowy-IO/AppFlowy-Cloud/issues/873 *Edit:* The comment https://github.com/AppFlowy-IO/AppFlowy-Cloud/issues/680#issuecomment-2380387584 better fits here: > Which gives us the published document and three AppFlowy icons in all corners but the lower-right. In addition, we are also offered to "Start with this template" and a three-dot menu, where we are suggested to "Sign up or log in". For a static export and esp. for a self-hosted environment, all these are too much self-promotion and nudging towards registration with the platform and potentially distract a recipient from the content that was tried to convey with the link. > > When being finished reading, at the bottom there is another Comments area, which when engaged with also tries to have us register. Again. > > ![Screenshot 2024-09-28 at 05-50-09 Sandkasten AppFlowy](https://github.com/user-attachments/assets/8fda9f31-dfe1-41b9-ac8b-3e84498df5da) > > The first visible regression is that "Image load failed" is displayed instead of an image, because its file_storage URL returns: > > ```json > {"code":1017,"message":"Can't find the user uuid from the request: No Authorization header"} > ```

mirror commented

2026-03-23 21:23:57 +00:00

Author

Owner

@almereyda commented on GitHub (Nov 8, 2024):

There has been some movement in this area around the release of v0.7.3 with #6614.

@almereyda commented on GitHub (Nov 8, 2024): There has been some movement in this area around the release of v0.7.3 with #6614.

mirror commented

2026-03-23 21:23:57 +00:00

Author

Owner

@smartyhero commented on GitHub (Nov 13, 2024):

I use version 0.7.3 and it doesn't work here

@smartyhero commented on GitHub (Nov 13, 2024): I use version 0.7.3 and it doesn't work here ![image](https://github.com/user-attachments/assets/067af1dc-9ef4-452f-a958-588a6373796c)

mirror commented

2026-03-23 21:23:58 +00:00

Author

Owner

@annieappflowy commented on GitHub (Jan 31, 2025):

Supported

@annieappflowy commented on GitHub (Jan 31, 2025): Supported