# What is Joplin built/running in?

**URL:** <https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578>\
**Category:** Development\
**Created:** [1 February 2020 23:30 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578 "2020-02-01T23:30:29Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ThatGuyThatFlys](https://avatars.discourse-cdn.com/v4/letter/t/b3f665/32.png) [@ThatGuyThatFlys](https://discourse.joplinapp.org/u/ThatGuyThatFlys)\
**Post date:** [1 February 2020 23:30 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/1 "2020-02-01T23:30:29Z")

</div>

As someone who is learning React and Electron (separately), and I’m curious as to how and what Joplin is built on, I can see in Joplin’s source code that it runs both React-Native and Electron, does it run on anything else? How would I create a project based on both of these at the same time? Would someone be kind enough to provide sources to where I can learn about combining these 2 thing together into one project?

---

<div class="post-metadata">

**Author:** ![bedwardly-down](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bedwardly-down/32/3236_2.png) [@bedwardly-down](https://discourse.joplinapp.org/u/bedwardly-down)\
**Post date:** [2 February 2020 01:00 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/2 "2020-02-02T01:00:05Z")

</div>

Welcome to the forums. Are you currently using or wanting to contribute to Joplin? The reason I’m asking is the quickest answer i can give is to dive right in to the code. Each client has its own package.json that contains all of the information you’re requesting about libraries and whatnot. The devs may not always be available to help with all questions, but they are working towards Google Summer of Code this year and are very open to people contributing

---

<div class="post-metadata">

**Author:** ![ThatGuyThatFlys](https://avatars.discourse-cdn.com/v4/letter/t/b3f665/32.png) [@ThatGuyThatFlys](https://discourse.joplinapp.org/u/ThatGuyThatFlys)\
**Post date:** [2 February 2020 05:11 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/4 "2020-02-02T05:11:13Z")

</div>

Thanks, I’ve been using Joplin for about 2 months now, I am thinking about contributing. Looking at each of the package.json in root, and in the React and Electron Clients, I’m not understanding how they interact with each other. Is the UI being designed from the ground up in both React and Electron? How do you get the core components to interact with each other?

---

<div class="post-metadata">

**Author:** ![bedwardly-down](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bedwardly-down/32/3236_2.png) [@bedwardly-down](https://discourse.joplinapp.org/u/bedwardly-down)\
**Post date:** [2 February 2020 05:14 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/5 "2020-02-02T05:14:48Z")

</div>

All three clients share the ReactClient/lib folder and its code. That way when its core libraries are updated, each client gets them at the same time. Then the code outside of that folder is built for their respective platforms. That’s a huge part of why this is one of the few small name note taking apps out there that has support for all major platforms simultaneously. Does that make any sense?

So, to answer your question about the UI, both mobile platforms share the same overall UI, the Dekstop has one that is shared between Windows, Mac and Linux and is mostly the same across all three, and the command line client is its own beast altogether with its own ui.

---

<div class="post-metadata">

**Author:** ![ThatGuyThatFlys](https://avatars.discourse-cdn.com/v4/letter/t/b3f665/32.png) [@ThatGuyThatFlys](https://discourse.joplinapp.org/u/ThatGuyThatFlys)\
**Post date:** [2 February 2020 05:19 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/6 "2020-02-02T05:19:43Z")

</div>

That makes sense, if both programs share the same UI, does Electron or React handle that? Or do they read from the same html, css, and js files, but Electron handles the desktop and React handles mobile?

---

<div class="post-metadata">

**Author:** ![bedwardly-down](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bedwardly-down/32/3236_2.png) [@bedwardly-down](https://discourse.joplinapp.org/u/bedwardly-down)\
**Post date:** [2 February 2020 05:20 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/7 "2020-02-02T05:20:36Z")

</div>

I believe the latter is correct. And React handles Cli too

---

<div class="post-metadata">

**Author:** ![ThatGuyThatFlys](https://avatars.discourse-cdn.com/v4/letter/t/b3f665/32.png) [@ThatGuyThatFlys](https://discourse.joplinapp.org/u/ThatGuyThatFlys)\
**Post date:** [2 February 2020 05:22 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/8 "2020-02-02T05:22:39Z")

</div>

What handles the transmission of data then? (The syncing and webclipper components)

---

<div class="post-metadata">

**Author:** ![bedwardly-down](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bedwardly-down/32/3236_2.png) [@bedwardly-down](https://discourse.joplinapp.org/u/bedwardly-down)\
**Post date:** [2 February 2020 05:27 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/9 "2020-02-02T05:27:03Z")

</div>

I could be wrong, but i think that’s the Sqlite backend. Joplin uses a database system to handle most of its saving and syncing between platforms

---

<div class="post-metadata">

**Author:** ![ThatGuyThatFlys](https://avatars.discourse-cdn.com/v4/letter/t/b3f665/32.png) [@ThatGuyThatFlys](https://discourse.joplinapp.org/u/ThatGuyThatFlys)\
**Post date:** [2 February 2020 05:39 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/10 "2020-02-02T05:39:27Z")

</div>

Interesting… It seems very well-designed and thought through, I just wish there was more official documentation for it. Can you tell me more about how you get Electron and React to work with each other without any conflicts?

---

<div class="post-metadata">

**Author:** ![bedwardly-down](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bedwardly-down/32/3236_2.png) [@bedwardly-down](https://discourse.joplinapp.org/u/bedwardly-down)\
**Post date:** [2 February 2020 05:42 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/11 "2020-02-02T05:42:22Z")

</div>

That is a question for @laurent or someone else that is much better at the language. I just cracked down on React hooks and still have a ways to go.

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [2 February 2020 09:38 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/12 "2020-02-02T09:38:02Z")

</div>

> [@ThatGuyThatFlys](#):
>
> Interesting… It seems very well-designed and thought through, I just wish there was more official documentation for it. Can you tell me more about how you get Electron and React to work with each other without any conflicts?

Electron is like a web browser - it simply loads an HTML file, which in turns loads JavaScript files, CSS files, etc. Have a look here for more details about the architecture: [https://www.electronjs.org/docs/tutorial/application-architecture](https://www.electronjs.org/docs/tutorial/application-architecture)

React JSX files are compiled to JavaScript JS files, and are loaded like this.

---

<div class="post-metadata">

**Author:** ![ThatGuyThatFlys](https://avatars.discourse-cdn.com/v4/letter/t/b3f665/32.png) [@ThatGuyThatFlys](https://discourse.joplinapp.org/u/ThatGuyThatFlys)\
**Post date:** [2 February 2020 18:59 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/13 "2020-02-02T18:59:54Z")

</div>

I meant for cross-breeding React and Electron like this, but that’s ok, might there be a boilerplate for this kind of setup, so I can see how this works in a more simplified testing environment?

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [2 February 2020 19:38 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/14 "2020-02-02T19:38:02Z")

</div>

Just use create-react-app to create an application, compile it, then load the resulting html file in Electron. There’s nothing else to it. It’s React but it could be Angular, or plain html/js.

---

<div class="post-metadata">

**Author:** ![bedwardly-down](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bedwardly-down/32/3236_2.png) [@bedwardly-down](https://discourse.joplinapp.org/u/bedwardly-down)\
**Post date:** [2 February 2020 19:47 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/15 "2020-02-02T19:47:38Z")

</div>

Isn’t react just another abstraction of the core js to allow quicker implementation of specific features in js that you would need to write yourself otherwise? And electron is basically a container that allows web based content to be ran as a native application?

---

<div class="post-metadata">

**Author:** ![ThatGuyThatFlys](https://avatars.discourse-cdn.com/v4/letter/t/b3f665/32.png) [@ThatGuyThatFlys](https://discourse.joplinapp.org/u/ThatGuyThatFlys)\
**Post date:** [2 February 2020 21:35 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/16 "2020-02-02T21:35:45Z")

</div>

So Create the program,

> compile it

Just so were clear do you mean a full compile or just running npm start?

How do you get the Electron files to run off the html that React created?

---

<div class="post-metadata">

**Author:** ![bedwardly-down](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bedwardly-down/32/3236_2.png) [@bedwardly-down](https://discourse.joplinapp.org/u/bedwardly-down)\
**Post date:** [2 February 2020 21:41 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/17 "2020-02-02T21:41:37Z")

</div>

A good way to learn how electron is built and run is to follow the instructions in Building.md in the root directory of the github source.

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [2 February 2020 22:16 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/18 "2020-02-02T22:16:27Z")

</div>

> [@bedwardly-down](#):
>
> sn’t react just another abstraction of the core js to allow quicker implementation of specific features in js that you would need to write yourself otherwise? And electron is basically a container that allows web based content to be ran as a native application

Yes pretty much. React is actually an abstraction over the JS DOM.

---

<div class="post-metadata">

**Author:** ![ThatGuyThatFlys](https://avatars.discourse-cdn.com/v4/letter/t/b3f665/32.png) [@ThatGuyThatFlys](https://discourse.joplinapp.org/u/ThatGuyThatFlys)\
**Post date:** [3 February 2020 22:32 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/20 "2020-02-03T22:32:05Z")

</div>

As a test I attempted to directly clone the Joplin page and compile it for my OS (Linux Mint. Based on Ubuntu), It succeeded without any major errors however upon running the .appimage it’s an empty blank white page with the nav bar being Electrons Defaults (File, Edit, etc).

My Console Log:  
[https://pastebin.com/m0trc2Ur](https://pastebin.com/m0trc2Ur)

Could I be missing any dependencies that I didn’t catch?

---

<div class="post-metadata">

**Author:** ![bedwardly-down](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/bedwardly-down/32/3236_2.png) [@bedwardly-down](https://discourse.joplinapp.org/u/bedwardly-down)\
**Post date:** [4 February 2020 00:00 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/21 "2020-02-04T00:00:05Z")

</div>

Try running `yarn dist` in ElectronClient/app. Then run `./dist/Joplin*.AppImage`. I’m not seeing anything related to actually running the app

---

<div class="post-metadata">

**Author:** ![ThatGuyThatFlys](https://avatars.discourse-cdn.com/v4/letter/t/b3f665/32.png) [@ThatGuyThatFlys](https://discourse.joplinapp.org/u/ThatGuyThatFlys)\
**Post date:** [4 February 2020 15:39 UTC](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578/22 "2020-02-04T15:39:41Z")

</div>

`yarn dis`t appears to work fine however when I try to run the appimage via terminal it just sits there endlessly forever and never actually runs, and if I open my file manager gui and run the appimage, doesn’t run ether.

My Log:  
[https://pastebin.com/tV6vgq5d](https://pastebin.com/tV6vgq5d)  
The reason why it ends after my last command is because the terminal never responds, my only way to even get it back is to force kill it with ctrl+c.

[Next page](https://discourse.joplinapp.org/t/what-is-joplin-built-running-in/5578.md?page=2)