# Developing solid/solid-panes

**URL:** <https://forum.solidproject.org/t/developing-solid-solid-panes/88>\
**Category:** Solid App Development FAQs\
**Created:** [October 18, 2018, 7:03am UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88 "2018-10-18T07:03:12Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![johanbove](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/johanbove/32/23_2.png) [@johanbove](https://forum.solidproject.org/u/johanbove)\
**Post date:** [October 18, 2018, 7:03am UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/1 "2018-10-18T07:03:12Z")

</div>

My post is two-fold;

1. What is the best way to test while developing the panes in solid/solid-panes actually?

2. And what is on the roadmap for the apps in panes. I read that a lot of work is done on new UI, but I haven’t found out where this work is being organized. Will the apps in “panes” be deprecated and superseded by the new generation of Solid apps?

The current suite of app panes is not super recent and I see refactoring and bug-fixing could be useful, but it would be a shame to invest a lot of time into this if the current “panes” concept will be replaced by new apps.

Ref: [https://github.com/solid/solid-panes/issues](https://github.com/solid/solid-panes/issues)

---

<div class="post-metadata">

**Author:** ![anon36056958](https://avatars.discourse-cdn.com/v4/letter/a/b38774/32.png) [@anon36056958](https://forum.solidproject.org/u/anon36056958)\
**Post date:** [October 19, 2018, 2:48am UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/2 "2018-10-19T02:48:00Z")

</div>

I too am interested in developing apps but have been wondering which direction client development will take. I’ve heard it said that you either use a framework or you end up inventing one. If that’s true then I think it will help encourage independent developers to at least discuss the general direction.

---

<div class="post-metadata">

**Author:** ![timbl](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/timbl/32/24_2.png) [@timbl](https://forum.solidproject.org/u/timbl)\
**Post date:** [October 21, 2018, 11:03pm UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/3 "2018-10-21T23:03:22Z")

</div>

You test a new version of solid-panes, one way is to git clone both solid panes and mashlib in sibling directories, and then tweak the package.json to put in a relative link to the solid-panes directory instead of the dependency to a version number. To help do this there is an example for each form which you can paste in. Run npm install and npm run build:dev to make mashlib/dist/mashlib.js

```
  "dependenciesFile": {
     "rdflib": "file://../../linkeddata/rdflib.js",
     "solid-panes": "file://../../solid/solid-panes"
  },
  "dependencies": {
     "rdflib": ">=0.19.0",
     "solid-panes": ">=1.1.18"
   },
  "dependenciesBackup": {
      "rdflib": ">=0.17.0",
      "solid-panes": ">=1.1.18"
    },

```

Switch the current dependencies to the file ones where you want to test the mashlib with a local development code. It builds a mashlib.js in the dist directory. Copy to that to where your server gets its mashlib.js from. Its easiest to debug if you use the mashlib.js rather than the minified version. Hope that makes sense.

---

<div class="post-metadata">

**Author:** ![johanbove](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/johanbove/32/23_2.png) [@johanbove](https://forum.solidproject.org/u/johanbove)\
**Post date:** [October 22, 2018, 7:49pm UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/5 "2018-10-22T19:49:29Z")

</div>

Thank you for the instructions! I had (eventually) figured out the package.json switch; that’s a new technique to me. I also didn’t know about `npm link` ([https://docs.npmjs.com/cli/link](https://docs.npmjs.com/cli/link)) either. So double-score!

---

<div class="post-metadata">

**Author:** ![camslice](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/camslice/32/732_2.png) [@camslice](https://forum.solidproject.org/u/camslice)\
**Post date:** [February 25, 2019, 1:39am UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/6 "2019-02-25T01:39:47Z")

</div>

Hi all,

firstly very excited about the opportunity to work on SOLID. Thanks for all your hardwork @timbl and @RubenVerborgh

I’m struggling to get this working… neither versions of `package.json` that I’ve got in both the v4 and v5 releases of node-solid-server have a `build` command defined.

I’m using the node-solid-server Docker image and I’ve got the node\_modules directory mounted to my local host. The mount is working, I can see changes appearing in files inside the container but I can’t for the life of me figure out how to get the node server to recompile these changes into mashlib. I’ve tried using [nodemon](https://github.com/remy/nodemon) and manually restarting but nothing seems to work.

Maybe I’m not grasping something fundamental about this workflow because there doesn’t seem to be any other documentation or conversation around developing solid panes locally using the Docker image.

Little help would really be appreciated!

Thanks

---

<div class="post-metadata">

**Author:** ![camslice](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/camslice/32/732_2.png) [@camslice](https://forum.solidproject.org/u/camslice)\
**Post date:** [February 25, 2019, 8:28am UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/8 "2019-02-25T08:28:16Z")

</div>

Thanks Ruben, thanks heaps for you reply.

I see now that Tim is referring to the `package.json` file inside the Mashlib module folder.

One other thing I’m a little unclear on, is this:

> git clone both solid panes and mashlib in sibling directories

But then the package.json technique and your `npm ln rdflib solid-panes` command technique are both referring to `rdflib` not `mashlib`. Should I clone both these repos or just the rdflib repo? Sorry if this is a silly question!

Thanks, Cam

---

<div class="post-metadata">

**Author:** ![camslice](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/camslice/32/732_2.png) [@camslice](https://forum.solidproject.org/u/camslice)\
**Post date:** [February 25, 2019, 10:23am UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/10 "2019-02-25T10:23:49Z")

</div>

Ok that’s working pretty well now thanks! `npm link` is a handy tool 🙂

So my workflow is basically:

1. Edit & save file(s) in the solid panes folder
2. Execute `npm run build:dev` from within the mashlib folder
3. Copy `./dist/mashlib.js` to where the `databrowser.html` file on the solid server is expecting it to be

Is this similar to your workflow?

One final question. I’m currently making changes to `longChatPane.js` which lives under `/solid-panes/chat/`. However in order for the mashlib build command to work, I need to do `npm install` in the `solid-panes` repo first, resulting in mashlib using the `longChatPane.js` under `solid-panes/node_modules/chat-pane/`. What’s the last piece of the puzzle here? How do I make it so that I can edit `/solid-panes/chat/longChatPane.js` and have mashlib use that version instead of the node\_modules version for its build command?

Again, really appreciate your help with this and apologies for the noobish questions!

---

<div class="post-metadata">

**Author:** ![happybeing](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/happybeing/32/59_2.png) [@happybeing](https://forum.solidproject.org/u/happybeing)\
**Post date:** [February 25, 2019, 12:10pm UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/12 "2019-02-25T12:10:08Z")

</div>

One gotcha to look out for with `npm link` is that it is reset by an `npm install` etc, so after that redo the `npm link` or it will use the one in `. /node_modules` again.

---

<div class="post-metadata">

**Author:** ![camslice](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/camslice/32/732_2.png) [@camslice](https://forum.solidproject.org/u/camslice)\
**Post date:** [February 26, 2019, 12:12am UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/13 "2019-02-26T00:12:15Z")

</div>

Thanks for pointing out the gotcha @happybeing 🙂

@RubenVerborgh The `npm link chat-pane` doesn’t seem to work… running that command from within `solid-panes` successfully creates the symlink to my global node\_modules folder, but then if I run `npm link` inside `solid-panes/chat` it doesn’t create its own symlink for `chat-panes`, it just regenerates the symlink for `solid-panes`

I tried copying the contents of `/chat` into its own sibling folder outside of `solid-panes`, ran `npm link` which couldn’t find `package.json` so I just created a dummy one, then ran `npm link` again and that successfully created a symlink from my global node\_modules/chat-pane folder to this sibling folder.

However when running the mashlib build command, it throws a `Module not found: Error: Can't resolve 'chat-pane'` error. I tried a few combinations of directory structure in this sibling folder but no love:

```auto
/chat-pane/package.json
/chat-pane/chatPane.js
/chat-pane/longChatPane.js

```

Tried to mimic the folder structure inside `solid-panes` but didn’t work either:

```auto
/chat-pane/package.json
/chat-pane/chat/chatPane.js
/chat-pane/chat/longChatPane.js

```

🤔

---

<div class="post-metadata">

**Author:** ![happybeing](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/happybeing/32/59_2.png) [@happybeing](https://forum.solidproject.org/u/happybeing)\
**Post date:** [February 26, 2019, 9:37am UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/14 "2019-02-26T09:37:24Z")

</div>

> [@camslice](#):
>
> Thanks for pointing out the gotcha

Also, I’ve started using `yarn` for new projects (and migrating others) and it doesn’t suffer from that issue. Seems nicer overall, but I’m no expert and it is early days.

---

<div class="post-metadata">

**Author:** ![camslice](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/camslice/32/732_2.png) [@camslice](https://forum.solidproject.org/u/camslice)\
**Post date:** [February 27, 2019, 3:27am UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/16 "2019-02-27T03:27:45Z")

</div>

Ah yes, I’ve used yarn on a few projects @happybeing. For now I’m going keep wrestling with npm while I figure this out properly. Once it’s happy I’ll bring yarn to the party 🙂 I’ve found that I need to delete the `package-lock.json` occasionally if it complains about `ENOENT: no such file or directory`

Hey @RubenVerborgh, made some progress, but still having issues with the resulting `mashlib.js` file… here’s what I’m doing:

1. I have the `solid-panes` repo checked out in `~/solid/solid-panes` and `cd` into that directory
2. I run `npm link chat-pane` which creates the symlink `~/solid/solid-panes/node_modules/chat-pane` to my global `chat-pane` module
3. I checkout the `chat-pane` [repo](https://github.com/solid/chat-pane) into `~/solid/chat-pane` and `cd` into that directory and do `npm install`  
(Didn’t realise I was supposed to check out this repo, because there’s a message at the top of the repo saying _“(To be) Extracted from the solid-panes monolithic repository. No code yet moved over, but an issue list for ideas.”_ which makes me think that `solid-panes` is still using the local files inside its `chat` folder. Bit confused here too because the `chat` folder contains a file called `chatPane.js` where as in the repo it’s called `shortChatPane.js`.)
4. I run `npm link` which creates the symlink from my global `chat-pane` module to `~/solid/chat-pane`

Now that all seems to work, however now when I do `npm run mashlib build:dev` (from my `~/linkeddata/mashlib` directory), and copy the resulting `mashlib.js` file to the server the chat interface won’t load properly, it only loads the data browser:

 ![15](https://europe1.discourse-cdn.com/flex017/uploads/solidproject/original/1X/e16a3a5f865306b057e944d95bb79d4b58f3430a.png)

The only way to get the chat interface to work is to use `mashlib.js` from `~/solid/solid-panes/node_modules/mashlib/dist/mashlib.js`:

 ![59](https://europe1.discourse-cdn.com/flex017/uploads/solidproject/original/1X/ebb9ea8d5bf94c15be73f87d08b118f28ebcb1a1.png)

---

<div class="post-metadata">

**Author:** ![camslice](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/camslice/32/732_2.png) [@camslice](https://forum.solidproject.org/u/camslice)\
**Post date:** [February 28, 2019, 6:56am UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/17 "2019-02-28T06:56:45Z")

</div>

Another problem I’m facing is a Docker-specific issue. If I mount a `/data` directory on my host to the `/data` directory in the container and copy `mashlib.js` into `/data/common/js/` then I get a 401 unauthorized error:

```auto
GET https://localhost:8443/common/js/mashlib.js net::ERR_ABORTED 401 (Unauthorized)

```

---

<div class="post-metadata">

**Author:** ![camslice](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/camslice/32/732_2.png) [@camslice](https://forum.solidproject.org/u/camslice)\
**Post date:** [March 1, 2019, 12:02am UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/18 "2019-03-01T00:02:35Z")

</div>

@johanbove @anon36056958 did either of you manage to successfully get a local dev environment setup to work on solid-panes?

---

<div class="post-metadata">

**Author:** ![anon36056958](https://avatars.discourse-cdn.com/v4/letter/a/b38774/32.png) [@anon36056958](https://forum.solidproject.org/u/anon36056958)\
**Post date:** [March 1, 2019, 3:07am UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/19 "2019-03-01T03:07:08Z")

</div>

Hmmmm solid-panes…

I have not worked with solid-panes, the reason being that it seemed to me too much pure javascript without being able to encapsulate css and without an ability to use templates from HTML. The idea of it is to use the mouse to build client programs, which is good, but without an ability to template things and encapsulate things it seems incomplete. Its an attempt to build a framework, when an already existing and well tested off the shelf framework could be used. I am not a javascript expert though, so mine is not a really well informed opinion. Now I am going to binge on potato chips.

---

<div class="post-metadata">

**Author:** ![camslice](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/camslice/32/732_2.png) [@camslice](https://forum.solidproject.org/u/camslice)\
**Post date:** [March 1, 2019, 3:39am UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/20 "2019-03-01T03:39:26Z")

</div>

I know what you mean about it not using an existing JS framework like React, Angular or Vue. I see the solid-panes as more of demonstration of the fundamental techniques for working with linked data, so it makes sense to use vanilla Javascript and keep the logic encapsulated in a small number of files.

For example, a chat or “discussion” app is being built here: [https://github.com/dindy/solid-discussion-app](https://github.com/dindy/solid-discussion-app) which has similar functionality to the chat-pane. However in order to glean an understanding of the fundamentals for working with linked data, it requires at minimum a decent knowledge of stateful JS frameworks. This would be a barrier to understanding for many people.

I want to get a local dev environment working for solid-panes, in particular the chat-pane, so I can experiment and explore at a low level, without too much abstraction.

---

<div class="post-metadata">

**Author:** ![johanbove](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/johanbove/32/23_2.png) [@johanbove](https://forum.solidproject.org/u/johanbove)\
**Post date:** [March 1, 2019, 1:21pm UTC](https://forum.solidproject.org/t/developing-solid-solid-panes/88/21 "2019-03-01T13:21:51Z")

</div>

I did manage to set a local dev environment up when I looked at fixing the micro blog feature, but then live happened and I haven’t looked at it again in a while. Next to the dev environment, I also had a local Solid Server running to which I deployed a new Solid Panes build.
