[FR] self-hosters publish to web

[annieappflowy]

          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:

• [Bug] Self-hosted : Publish to web : not supported AppFlowy-Cloud#680

Originally posted by @almereyda in #716 (comment)

[smartyhero]

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]

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

[codingwizardx]

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

[annieappflowy]

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!

[smartyhero]

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

[smartyhero]

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.

[Hazegard]

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

FROM alpine:latest

WORKDIR /tmp
RUN apk add git nodejs npm && npm install -g [email protected] && 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 :)

[luxio]

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

[almereyda]

@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 AppFlowy-IO/AppFlowy-Cloud#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]

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>	AppFlowy-IO/AppFlowy-Cloud#680
Collaborate on web	#6539	AppFlowy-IO/AppFlowy-Cloud#873

Edit:

The comment AppFlowy-IO/AppFlowy-Cloud#680 (comment) 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]

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

[smartyhero]

I use version 0.7.3 and it doesn't work here