Developing solid/solid-panes

Build a Solid App Solid App Development FAQs
1

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

2 Likes
2

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.

3

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.

4 Likes
5

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) either. So double-score!

6

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

8

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

10

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

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!

12

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.

13

Thanks for pointing out the gotcha @happybeing :slight_smile:

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

/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:

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

:thinking:

14

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.

16

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 :slight_smile: 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 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
151076×822 33.6 KB

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
591124×916 19.8 KB

1 Like
17

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:

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

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

19

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.

20

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 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.

21

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.