Publish advanced graphiql to jsdelivr

[tlvenn]

Hi,

Great work on improving on top of GraphiQL !

I was wondering if you could publish your advanced version of GraphiQL to cdnjs (similarly to how the original GraphiQL app is published there already) so that other projects could easily embed and serve it ?

Thanks a lot in advance.

[OlegIlyenko]

Thanks for kind words! I was definitely thinking about extracting the generic GraphiQL functionality to it's own npm module (should be doable, I think). I guess I just haven't got time to do it :)

One concern that I have is that it will have pretty heavy dependency on twitter's bootstrap (and react-bootstrap). But I guess it's ok, since these additions add more value to a base GraphiQL functionality. Would it be ok in your case?

While I was working on it, I discovered some issues: graphql/graphiql#152. Some of them are already addressed. But still there are some css mismatches between GraphiQL and bootstrap (e.g. box-sizing) that need to be fixed in the final application. This kind of concerns me as well, but I guess I will add css in this npm module anyways, so it shouldn't be a big problem.

[tlvenn]

Yes, this will be totally fine. Moving the GraphiQL part to its own repo could be interesting to foster some collaboration around it and an npm module would probably help the JS community to integrate it.

For all the other languages, being able to fetch the app as a single minified css and js files is enough and I believe something you could do with sbt-web plugins and then push those 2 files in some public location for general consumption (github page or maybe even something like http://rawgit.com/ would be enough).

[tlvenn]

Well actually (silly me..) you are already serving minified assets so ultimately it would resolve to version and host them.

[tlvenn]

I should have mentioned https://www.jsdelivr.com/ given its the current source we are using to fetch graphiql at the moment: https://github.com/jsdelivr/jsdelivr/blob/master/CONTRIBUTING.md

Graphiql example: https://github.com/jsdelivr/jsdelivr/tree/master/files/graphiql

[tlvenn]

Hi @OlegIlyenko, I was wondering if you had time to think on how we could best proceed. I am happy to help but I need a direction on how you would like to do it ;)

Thanks in advance !

[OlegIlyenko]

@tlvenn Sorry for the late reply. It's a bit busy time for me at the moment... a lot of things at the same time :)

I think the long term solution would be to package it as an NPM module. It will have versioning which means that we can also add normal and minified JS/CSS in release notes and let jsdelivr sync them. This will ensure proper dev process, availability though CDN and versioning around this functionality.

At the moment files are there, but they are not available though the CDN and there is no proper versioning around it... maybe as a short term solution you could add them to jsdelivr yourself. You probably need just these 2 files:

http://toolbox.sangria-graphql.org/assets/graphiql.css
http://toolbox.sangria-graphql.org/assets/graphiql.js

These are bundles generated by webpack. If this is not enough or you would like tho generate these bundles a bit differently, I would suggest to change webpack config a bit and upload modified bundled files.

Again, sorry for my unresponsiveness, hopefully in a few weeks I can get back to it :)

[tlvenn]

Hi @OlegIlyenko ,

No worry and thanks for following up on this.

I can definitely take care of publishing those 2 files to jsdelivr but I would need a name for the project ? Do you have any suggestion ?

[tlvenn]

I guess i could be started with graphql-toolbox and will move forward with this unless told otherwise. I will have to specifiy a version as well, so will do a 1.0.0.

Will submit a PR to jsdelivr pretty soon

[OlegIlyenko]

👍 I think we can start with this

[tlvenn]

And so it's live: https://www.jsdelivr.com/projects/graphql-toolbox

[OlegIlyenko]

awesome! 🏆

[geocine]

I want to use a standalone graphiql . I am expecting something like putting that js and css file on my html file and what other configuration do I need "I do not React" so please enlighten me.

[tlvenn]

Hi @geocine, have a look at this file, it should help you figure out the missing parts:

https://github.com/absinthe-graphql/absinthe_plug/blob/master/lib/absinthe/plug/graphql_toolbox.html.eex

[geocine]

@tlvenn Very nice thank you!

[bali182]

@OlegIlyenko @tlvenn Thank you guys for the awesome work! This saved me an incredible amount of work and headache.

[bali182]

Just leaving it here if anyone needs it: https://www.npmjs.com/package/express-graphiql-toolbox

It's an express middleware or route (whatever you want to do with it) to statically serve the toolbox version of GraphiQL. Many thanks again :)

[OlegIlyenko]

I finally got some time, so I extracted "enhanced graphiql" functionality in an NPM package:

https://github.com/OlegIlyenko/graphiql-workspace

I would appreciate if you can review it and check whether it's usable in other projects (I already use it in graphql-toolbox). I haven't spent too much time minimizing the deps or making the project "pretty", it's pretty bare-bones. So PRs are very welcome! ;)

Does anybody already have ideas how this can be distributed via CDN? (and whether it makes sense to do so)

[tlvenn]

Great @OlegIlyenko, if it's published in npm, it's trivial to add it to jsdelivr and their bot will automatically publish any new version that is pushed on npm.

[jimaek]

The new backend is live. It pulls files directly from npm and github https://github.com/jsdelivr/jsdelivr#usage

Example https://cdn.jsdelivr.net/npm/jquery@3.1.1
Example directory listing https://cdn.jsdelivr.net/npm/jquery@3.1.1/

[OlegIlyenko]

@jimaek This is really nice, thanks for sharing! Since I already added all bundles in the npm package previously, it works like a out-or-the-box:

<link rel="stylesheet" media="screen" href="//cdn.jsdelivr.net/npm/graphiql-workspace@1.0.4/graphiql-workspace.css">
<script src="//cdn.jsdelivr.net/npm/graphiql-workspace@1.0.4/graphiql-workspace.js"></script>

[jimaek]

You can also add .min to minify them automatically

http://cdn.jsdelivr.net/npm/graphiql-workspace@1.0.4/graphiql-workspace.min.css

Let me know what you think and if you have any feedback

[OlegIlyenko]

@jimaek I find this feature quite awesome! 👍 It is very convenient to use artifacts from an NPM package, no extra setup is necessary. Also integrates nice in simple publishing workflow.