Web client: Running Joplin Mobile in a web browser with react-native-web

foto16 · 2024-06-25T00:28:31.457Z

Amazing! Thanks for the hard work.

So I can use the address Joplin for my own notes? Can I add my Dropbox to sync with my vault? The data will be stored on the PC running my web browser?

personalizedrefriger · 2024-06-25T06:14:27.728Z

foto16:

Can I add my Dropbox to sync with my vault? The data will be stored on the PC running my web browser?

The web client's data is stored locally on the computer running the web browser. (This is done with the Origin Private File System API).
Dropbox sync should work. Note, however, that I've only tested it with a small number of notes and resources. There might be synchronization bugs!

foto16:

So I can use the address Joplin for my own notes?

I would advise against this for now, mostly because the web client isn't very stable. In particular,

~~At present, having the web client open in multiple tabs at the same time could cause data corruption.~~
- ~~Currently, it's possible for multiple tabs to try to sync at the same time.~~
- Edit: This has been addressed. The web client now prevents multiple copies of itself from being open at the same time.
The web client is auto-built from this work-in-progress pull request. New changes are being made to it frequently and these could potentially introduce sync and/or startup bugs.
Web browsers can clear locally-stored data for websites when the computer is low on memory. The web client requests persistent storage, which should prevent its data from being auto-cleared. However, I haven't tested whether the web client's data is preserved when a computer is low on memory.

foto16 · 2024-06-25T13:57:28.578Z

Thanks for this important work. It's a godsend to those who use work computers that do not accepted user installed software. Looking forward to the maturing of the web client!

tobias0409 · 2024-07-04T16:27:20.010Z

Really nice work with a lot of potential in my opinion!

What if we combine Joplin Server with the Joplin Web Client? Example: you log in to Joplin Server with your credentials, and then you can jump straight into the Web Client to edit your notes directly—no app needed.

graphit0 · 2024-07-04T18:58:25.175Z

Just putting out there that Joplin audience is quite weary of SaaS features, so tight integration between web client and server might meet some backlash.
Link to open web client from JC login page should be fine though

534346346347636 · 2024-07-22T11:55:45.973Z

Great approach!
How can I connect my own notes to it? Running Joplin portable (for reasons) on all my PCs, synching to my Nextcloud

personalizedrefriger · 2024-07-22T12:21:43.334Z

534346346347636:

How can I connect my own notes to it? Running Joplin portable (for reasons) on all my PCs, synching to my Nextcloud

I haven't tested Nextcloud sync with a copy of the web client. However, getting it to work might be similar to the setup for a self-built and hosted copy of Joplin Server.

Enabling access to Joplin Server involves allowing cross-origin access to the web client's domain. Enabling cross-origin access for Nextcloud WebDAV is tracked by this GitHub issue. Owncloud seems to have merged a change that allows users to customize which domains can use its WebDAV API.

For comparison: Joplin Server setup

Joplin Server Setup

With Joplin Server, it's necessary to update the list of domains allowed to connect. In particular, this involves updating corsAllowedDomains:

github.com

laurent22/joplin/blob/85e57a3953d7788cd28a1bca61fffc5b743b0b12/packages/server/src/app.ts#L133


      
          
          	const envVariables = parseEnv(fullEnv, defaultEnvVariables[env]);
          
          	const app = new Koa();
          
          	// Note: the order of middlewares is important. For example, ownerHandler
          	// loads the user, which is then used by notificationHandler. And finally
          	// routeHandler uses data from both previous middlewares. It would be good to
          	// layout these dependencies in code but not clear how to do this.
          	const corsAllowedDomains = [
          		'https://joplinapp.org',
          	];
          
          	if (env === Env.Dev) {
          		corsAllowedDomains.push('http://localhost:8077');
          	}
          
          	function acceptOrigin(origin: string): boolean {
          		const hostname = (new URL(origin)).hostname;
          		const userContentDomain = envVariables.USER_CONTENT_BASE_URL ? (new URL(envVariables.USER_CONTENT_BASE_URL)).hostname : '';

Adding a new domain to this list should cause the server to add an Access-Control-Allow-Origin: <<origin name here>> header to responses to requests from that domain. This then allows scripts on that domain to receive the response.

534346346347636 · 2024-07-22T13:00:33.514Z

Perhaps I’m missing this step. But where can I find to get the web client work with Joplin server or whatever…

Then I will try with a copy of my data…

534346346347636 · 2024-07-24T19:32:55.273Z

How do I connect the web client to my data??

personalizedrefriger · 2024-07-24T19:55:43.189Z

Dropbox sync

Dropbox sync should work on all browsers that support the web client.

File system sync

File system sync should work on browsers that support the showDirectoryPicker API.

Joplin Server

Due to CORS restrictions, Joplin Server both requires a patch to work with the web client. See the above for details.

In the near future, this pull request should make it possible for a web client hosted with the domain api.joplincloud.com to connect to a Joplin Server instance.

Nextcloud/WebDAV

Like Joplin Server, Nextcloud and WebDAV servers need to be configured to serve extra HTTP headers. See this upstream Nextcloud issue for details and possible workarounds.

Note: I have not tested the web client with Nextcloud/WebDAV.

534346346347636 · 2024-07-24T20:10:12.015Z

Thanks. If I get that right, the client connects to my data. Thought I have to host the client own my on systems. Like Joplin Server in Docker ...
Don`t get me wrong, but I feel not very comfortable sending my data to unknown destinations...

personalizedrefriger · 2024-07-24T20:50:19.111Z

534346346347636:

Don`t get me wrong, but I feel not very comfortable sending my data to unknown destinations...

Data should be stored offline: Currently, the web client stores data locally on the machine accessing it^[1]. Sync should work mostly as it does on mobile and desktop.
- Edit: This assumes that the server & related infrastructure is secure. At present, loading the web client while connected to the internet uses the latest version of the code from GitHub pages.
Possible change — use the cached version of the web app by default: At present, a copy of the web client is stored locally^[2]. This local copy is currently only used when offline or if the server seems to be down. However, it could instead default to the offline copy and provide a GUI for installing updates.

I could see this change having a few benefits and drawbacks:
- Benefits:
  - If this is implemented, a user would get an "update available" notification (like on desktop). The user would then have the option to review the GitHub pages deployment before installing the update.
  - Users would still have access to locally installed copies of the web client, even if Joplin stops hosting it.
- Drawbacks:
  - More code to write and maintain: This would require additional logic that checks for and prompts a user to install an update.
  - Edit: As stated below, this still requires trust in the version of the app first fetched from the server.
Would it make sense to make the web app prefer an offline copy of itself?

Edit: Reformatted & added summaries.

This is done with the Origin Private File System API and @sqlite.org/sqlite-wasm. ↩︎
Relevant code. ↩︎

534346346347636 · 2024-07-24T20:55:50.595Z

Thanks for the info.
But I have to trust in the info you have given above. Can not check, where data is stored. Again, I do not have reason not to trust you guys, but...

534346346347636 · 2024-07-24T21:56:55.067Z

personalizedrefriger:

Would it make sense to make the web app prefer an offline copy of itself?

Yes definitely.
Not a developer. But wouldn`t it make sense to create a docker container? The everybody can host it on its own server.

laurent · 2024-07-24T22:14:27.636Z

Not for now. At the moment this is experimental and we don't want to go too far in terms of support and solutions we provide.

Indeed all data is stored locally on your browser. We'll try to make that clear and maybe provide a way to verify that no data is exfiltrated.

534346346347636 · 2024-07-25T14:30:43.172Z

@laurent:
Yes please provide ways to verify that no data is exfiltrated. I highly appreciate data protection spossibilities with joplin as selfhosting.

In my oppinion it should be no difference if you maintain a docker image for the webclient or maintain the hosting. But perhaps I`m wrong:)

laurent · 2024-07-25T18:09:27.008Z

534346346347636:

Yes please provide ways to verify that no data is exfiltrated

Can't really promise anything here though, we'll see. But also there's nothing different about this web app or the desktop or mobile apps. We could be exfiltrating data with any of these, but of course we don't and that can be independently verified by anybody. For the web client too - you can monitor the requests and see that we don't upload any data, other than what you ask the app to do (eg. there will be sync requests if you sync).

wirre-Drohne · 2024-10-18T13:43:06.122Z

TL;DR: I want to work with the web client despite its beta/demo status because I can’t install the Joplin Desktop app on my work laptop. I wonder whether I would just open https://app.joplincloud.com/ and start inserting (pasting) my notes.

Hello! I've been using Joplin (mostly Desktop, sometimes Android app) for a few years now, for some private use cases. I'd love to use it for work as well. Local storage on my work laptop would be fine, I wouldn't mind exporting a JEX archive every night to save everything and to take precaution for the fact that it’s beta/demo. So the web client is exactly what I need.

I would start with fifteen or twenty notes from another application (markdown format), so I could set everything up by pasting each note into a new note in the web client. In the mornings, I'd just open https://app.joplincloud.com/ again, and if for some reason my browser (Firefox) has messed up the permanent storage of my notes, I could import the JEX archive from the previous night. Right?

The fact that I open the same address as anyone else who tries the beta/demo version (https://app.joplincloud.com/) doesn’t mean that anyone can access or overwrite what I have written – since the address opens only the client, which then pulls the notes from the local storage of my browser, except when I open it on a new machine for the first time and it shows the five standard welcome notes. Correct? Thanks everyone!!

personalizedrefriger · 2024-10-18T15:58:46.680Z

wirre-Drohne:

TL;DR: I want to work with the web client despite its beta/demo status because I can’t install the Joplin Desktop app on my work laptop. I wonder whether I would just open https://app.joplincloud.com/ and start inserting (pasting) my notes.

That should be fine, but I would suggest creating regular backups.

Notes:

I've been using the web app regularly for the last few months. The most significant issue I've experienced is likely this (now fixed) sync issue: automatic attachment download was temporarily broken.
If you want to avoid issues related to changes to app.joplincloud.com, you can:
- Disconnect the computer from the internet before loading app.joplincloud.com. This loads a locally saved copy of app.joplincloud.com instead of fetching it from the internet.
- Self-host a copy of the web app. This is the GitHub actions script used to deploy the web app.

wirre-Drohne:

if for some reason my browser (Firefox) has messed up the permanent storage of my notes, I could import the JEX archive from the previous night. Right?

Yes, that should be true (though I've only tested import with small JEX archives). It should also be possible to import the JEX archives from the Joplin desktop app.

Note: I would suggest using Chrome or Safari instead of Firefox (database access in Firefox is very slow).

wirre-Drohne:

The fact that I open the same address as anyone else who tries the beta/demo version (https://app.joplincloud.com/) doesn’t mean that anyone can access or overwrite what I have written – since the address opens only the client, which then pulls the notes from the local storage of my browser, except when I open it on a new machine for the first time and it shows the five standard welcome notes. Correct?

From "Where is my data stored?" in the web app FAQ:

Like Joplin Mobile, Joplin Web is local-first. Notes and attachments are stored locally on your computer, but can optionally be synced with one of the supported sync targets. As a result, Joplin Web can be used offline.

wirre-Drohne · 2024-10-21T07:31:10.876Z

Thank you so much! I really appreciate your fast and helpful reply. This has really helped me to get started.

So far, the only issue (if it even warrants that label) is the fact that the Rich Markdown plug-in doesn’t seem to work entirely right on mobile. I think I remember seeing a thread about this here a few months ago, but couldn't find it just now. My issue is that “Align wrapped list items to the indent level” is not working, at least not for me.

But I realize that this is an issue with Rich Markdown and the mobile app, and nothing specifically about the web client.