[FR] Self-hosted : bundle web app in Cloud distribution

[almereyda]

Describe the bug

The release of v0.7.1 has seen the ascent of a feature to collaborate on the web. With the frontend in the apps and for a local build needing to adapt to a self-hosted AppFlowy-Cloud instance at runtime AppFlowy-IO/AppFlowy#6539 comes also the need, that the web app is bundled with the Cloud distribution.

Right now for #680 it is possible to work around the present limitations in the client AppFlowy-IO/AppFlowy#5920 with building a heavily monkey-patched app that is able to show the static content of a published page.

Ideally the manual build-time modifications aren't necessary and AppFlowy-Cloud comes with a web app (build pipeline), that allows to adapt to the URL of the AppFlowy instance it is published with.

To Reproduce
Steps to reproduce the behavior:

1. Open the AppFlowy App
2. Click on Invite to collaborate and copy the link.
3. Paste the link into the browser's address bar and replace appflowy.com with your custom URL of the web frontend
4. Click on one of the enabled authentication providers and be redirected into the app.

Expected behavior

AppFlowy opens in the browser and it is possible to edit the document.

Desktop (please complete the following information):

• OS: Flatpak
• Browser Firefox
• Version v0.7.1

Additional Context

We have four highly related tracking issues for two features in two projects now:

Feature	AppFlowy	AppFlowy Cloud
Share to web	AppFlowy-IO/AppFlowy#5920	#680
Collaborate on web	AppFlowy-IO/AppFlowy#6539	<this one>

[khorshuheng]

Yes, this is indeed a popular request. For the first step, i will need to setup the github action to build and publish the docker image for appflowy web. After that i will add the additional service to docker compose.

Changes to AppFlowy Flutter app to provide a setting for custom appflowy web url will come later, though, as that will require additional effort.

[almereyda]

There are more aspects, which can be considered for dynamic configuration of the Flutter app:

• [FR] Allow to disable (Open)AI integration and provide context about the Appflowy (Open)AI dependency #565
  There are several places where AI functionalities are offered for self-hosted setups, even if they were not started and no OpenAI API Key is given.

Also I would like to continue to encourage a less "inviting" ("nudging") stance for published pages, providing less/no sign up or log in links. AppFlowy-IO/AppFlowy#5920 (comment)

Following on with

• [FR] Support for other authentication methods from gotrue (supabase/auth), e.g. for GitLab login #621

it appears useful to consider

• [FR] AppFlowy Flutter app: Only offer available authentication methods of a self-hosted instance AppFlowy#5534

as well. The Flutter app could adapt to the available authentication options when using a self-hosted AppFlowy-Cloud instance with custom authentication configuration.

[almereyda]

With the recent web related commits in this repository, a separate AppFlowy-Web repository has emerged. It contains a Dockerfile for a container which is not yet published to Docker Hub (nor the GitHub Container Registry at ghcr.io). The instructions for the image do not yet give any indication, if or how the custom domain name of a self-hosted instance is to be made recognised by the web app. Eventually it just works?

We'd need to run it and reproduce, whether the found artefacts and build instructions help to replace the earlier manual build of a patched web frontend #680 (comment).

References

• AppFlowy-IO/AppFlowy-Web: Bring projects, wikis, and teams together with AI. AppFlowy is the AI collaborative workspace where you achieve more without losing control of your data. The leading open source Notion alternative.
• AppFlowy-Web/deploy/Dockerfile at main · AppFlowy-IO/AppFlowy-Web
• Docker | AppFlowy
• appflowyinc's Profile | Docker Hub

[khorshuheng]

As the endpoint for AppFlowy Cloud is determined during the time the image is built (via .env), as opposed to run time variable, we are not able to create a Appflowy Web docker image that can fit every deployment. So currently, the recommended approach is to set your Appflowy cloud URL in the .env file for AppFlowy Web repo, then use the makefile to build an image, which you can then deploy.

That being said, we are also planning to release an official image for Appflowy web, that is configured to work with Appflowy cloud deployed on localhost (which can be set up via docker compose up), so that it's easier for user to evaluate AppFlowy Web via a reproducible set up.

Another alternative would be to use a platform like Vercel to deploy AppFlowy Web, though that certainly has some limitations (Eg. Only works with Appflowy cloud endpoint exposed publicly)

[wx-11]

https://appflowy.com/docs/self-host-appflowy-web-install-docker The tutorial has been released, but this issue hasn't been closed yet. Are there any unfinished tasks? Can I deploy it through the web as described in the tutorial?

[khorshuheng]

There are improvements needed, such as ability of building the image without pnpm being installed on host machine, simplifying the installation process, and better documentation. But yes , it is possible to deploy the web app as described.

[bdruth]

@wx-11 I am clearly missing something, but if I pull main, the Makefile has no target to make image

❯ git pull
Already up to date.
❯ make image
make: *** No rule to make target 'image'.  Stop.
❯ git remote -v
origin  https://github.com/AppFlowy-IO/AppFlowy-Cloud (fetch)
origin  https://github.com/AppFlowy-IO/AppFlowy-Cloud (push)

[luxio]

@wx-11 I am clearly missing something, but if I pull main, the Makefile has no target to make image

I think the you should run make image within the AppFlowy-Web repository.

[bdruth]

@luxio - ty! Didn't realize there was another repo, much obliged.