Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Admin GUI #623

Closed
NogsMPLS opened this issue Jan 3, 2017 · 45 comments
Closed

Admin GUI #623

NogsMPLS opened this issue Jan 3, 2017 · 45 comments
Labels
type: question or discussion Issue discussing or asking a question about Gatsby

Comments

@NogsMPLS
Copy link
Contributor

NogsMPLS commented Jan 3, 2017

Curious on thoughts for creating a Admin GUI for Gatsby sites.

My initial thought was something like what forestry.io does with Jekyll projects: https://forestry.io/

But free and open sourced. Basically, hook into a github repo, push permissions, editor in GUI and away you go.

But, I actually wonder if instead of a web based solution, if a desktop app might actually be a better fit. It would make it so a github repository isn't absolutely necessary, all files could be local and on host, nowhere else.

Could have it read a specific directory, parse what files are currently there, set up a connection to a hosting provider.

Could use any of the many markdown wsiwyg editors out there for post creation/editing.

'Preview' button would run local dev server. 'Publish' would run bundle and push to host.

Right now I'm thinking this is an Electron App.

I'd like some feedback on what people think about web vs. desktop solutions, and a little bit of guidance on what they like to see. I'd be willing to take an initial stab at making something like this if there is enough interest.

@dardub
Copy link
Contributor

dardub commented Jan 3, 2017

Yes recently I've been thinking about how to make it easier for non-devs to be able to easily edit a markdown file in the project without having to know they are using git. So I think an electron app would be a nice fit for that.

@dardub
Copy link
Contributor

dardub commented Jan 3, 2017

I haven't used this yet. But it looks like netlify is working on a similar solution. https://github.com/netlify/netlify-cms

@KyleAMathews
Copy link
Contributor

Another interesting way to do this perhaps would be to create an Atom plugin which runs a gatsby site and displays it in a side pane. Though that's perhaps not as user-friendly as what you're looking for.

But yeah — a polished app would be a huge boon. I imagine opening an app, seeing a bunch of starters w/ screenshots, clicking on one to create a new project, having live editing + preview site in the app, then one clicks to push the code to github and to deploy somewhere. That'd be a pretty amazing experience + make Gatsby accessible to a much larger group of people who aren't comfortable with command line tools but could edit markdown and jsx just fine.

http://www.kalabox.io/ and https://www.ostraining.com/blog/coding/compiling-tools/ are good examples of this sort of thing.

@pradel
Copy link

pradel commented Jan 5, 2017

Great idea was thinking about something similar oriented for blogging as an electron app for gatsby. But was blocked by the fact gatsby need to have python installed to work. Will the app work even if a user download the app and doesn't have python installed ?

@KyleAMathews
Copy link
Contributor

I might be wrong but since with Electron you "build" the app — only the developer or build system would need Python not the end user? Node.js (and Gatsby) only requires Python for building some native dependencies. It's not needed to actually run node.js apps like Gatsby.

@pradel
Copy link

pradel commented Jan 5, 2017

Okay that's perfect then thanks!

@pradel
Copy link

pradel commented Jan 5, 2017

For now I saw gatsby is only accessible as a cli but would be great to be also accessible via an api like http://www.metalsmith.io/ (or maybe it's not your goal with it) what do you think? Users will be able to create admins ui and other things.

@KyleAMathews
Copy link
Contributor

It'd be fairly straightforward to expose a programmatic API for Gatsby — would be happy to accept a PR for that. In the meantime, it's trivial for an Electron app to shell out and run Gatsby as a separate process.

@pradel
Copy link

pradel commented Jan 9, 2017

My point is to allow user to use the app even if they don't have gatsby installed, I will try to bundle gatsby in my electron app an call it as a separate process

@KyleAMathews
Copy link
Contributor

KyleAMathews commented Jan 9, 2017 via email

@pradel
Copy link

pradel commented Jan 9, 2017

Nice thanks. Is there a way to specify an absolute path for the build? like gatsby build /Users/...

@KyleAMathews
Copy link
Contributor

KyleAMathews commented Jan 9, 2017 via email

@pradel
Copy link

pradel commented Jan 10, 2017

Would you be interested in a pr for an option (-p maybe) to be able to set a custom path ?

@KyleAMathews
Copy link
Contributor

@pradel not particularly — had a discussion on this a few months ago — if you have an interesting counter-argument, would be happy to hear it! #562

@pradel
Copy link

pradel commented Jan 10, 2017

I wasn't meaning an out dir folder but an in dir path for the global command.
I make it work with importing ./node_modules/gatsby/dist/utils/build and pass a directory options as parameter.

@KyleAMathews
Copy link
Contributor

Ah gotcha — yeah, 1.0 will be much more flexible where you get data from — #420

@pradel
Copy link

pradel commented Jan 23, 2017

1.0 looks amazing can't wait to try it out. Thanks for your hard work.

@noahlange
Copy link
Contributor

@KyleAMathews - after seeing that you'd forked it, I remembered that NetlifyCMS (repo) was a thing — I imagine it would be worth a look to see what it'd take to integrate it with Gatsby?

@fabien0102
Copy link
Contributor

fabien0102 commented Apr 12, 2017

Another idea based on an old personal POC: use trello as a database for blogging (just need to find how build on each change (zapier or something else)).

In short we have used:

  • card description as a post
  • due date as post date (with a functionality to publish post on this due date)
  • attachments card for any pictures hosting
  • labels draft management and any metadatas
  • lists for post directory/category
  • member assignment for post author

For all details: (sorry I never take the time to translate the example blog in english)
https://github.com/fabien0102/trelloblog

In my mind it's will be a gatsby-source-trello and you need to had in gatsby-config.js something like:

plugins: [
  {
    resolve: `gatsby-source-trello`,
    options: {
      name: `posts`,
      boardId: `c94SaRKm`,
      apiKey: `5af287a3734f0af280d09c2d3d0e3914`,
      draftLabel: `draft`,
      listName: `done`
    },
  }
]

Voilà! It's just an another idea, tell me if you find this cool or useless 😉

@KyleAMathews
Copy link
Contributor

@fabien0102 not the slightest bit crazy!! #408 (comment)

Trello is such a beautiful UI and data structure. There are so many ways you could use it to build sites. Would love to see a really nice Gatsby plugin for it.

This is totally doable now. And I have another refactor I'm working through (mentally right now, soon in practice) that'll make external source plugins super easy.

@hsribei
Copy link
Contributor

hsribei commented May 9, 2017

Love @fabien0102's trelloblog idea! It could make for a great "headless CMS".

@chiedo
Copy link

chiedo commented Jun 27, 2017

Started working on this. Currently just put together a blog post writer :)

https://github.com/chiedo/gatsby-editor

May or may not add more editing tools in the future but this has been helpful for the non-technical folks on my team.

In the future, with enough motivation, I could build on this to start creating an admin panel. But that would be some work.

Very young and currently just made for my use-case but could easily be modified to be more dynamic.

@KyleAMathews
Copy link
Contributor

@chiedo nice! Yeah, making something for a specific use case is better before trying to make something generic.

@derekperkins
Copy link

@tannerlinsley

@erlend-sh
Copy link

In the future, with enough motivation, I could build on this to start creating an admin panel. But that would be some work.

Wouldn't https://github.com/netlify/netlify-cms be the ideal foundation for that? Would certainly save you a lot of work.

@chiedo
Copy link

chiedo commented Jul 8, 2017

First time hearing about it @erlend-sh

Thanks!

@erlend-sh
Copy link

Oh! It was already mentioned once in this issue, so I was afraid I might be coming off as a nag 😅

It's a very exciting project with several paid contributors behind it, so it's very likely to stick around. They're also working to make it completely independent of Netlify: decaporg/decap-cms#465

It should work with gatsby nearly out of the box, but it'd be nice to have a starter template like for Jekyll:

https://github.com/netlify-templates/jekyll-netlify-cms

@tortilaman
Copy link

@erlend-sh I've finished making netlify-cms independent of the netlify hosting ecosystem, and I'm looking to create a netlify-template for gatsby. I've seen a couple of people have done it, but haven't shared their code, so that's rather unfortunate, but I'll make sure to update people when I've finished up.

@kalinchernev
Copy link
Contributor

Hi all, I'm also on path to use NetlifyCMS as a back-end with the advanced starter I found on community pages today. I have previously used the quick start guide with no problems with hugo and honestly, with netlify.com as a building service, all works pretty well.

NetlifyCMS is supposed to be placed in static folder, which I did with the advanced example mentioned above. Firstly, it broke with this error log:

0 info it worked if it ends with ok
1 verbose cli [ '/home/kalin/.nvm/versions/node/v8.1.4/bin/node',
1 verbose cli   '/home/kalin/.nvm/versions/node/v8.1.4/bin/npm',
1 verbose cli   'run',
1 verbose cli   'develop' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predevelop', 'develop', 'postdevelop' ]
5 info lifecycle [email protected]~predevelop: [email protected]
6 info lifecycle [email protected]~develop: [email protected]
7 verbose lifecycle [email protected]~develop: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~develop: PATH: /home/kalin/.nvm/versions/node/v8.1.4/lib/node_modules/npm/bin/node-gyp-bin:/home/kalin/projects/p-blog/node_modules/.bin:/home/kalin/projects/p-blog/node_modules/.bin:/home/kalin/.config/yarn/link/node_modules/.bin:/home/kalin/projects/p-blog/node_modules/.bin:/home/kalin/.config/yarn/link/node_modules/.bin:/home/kalin/.nvm/versions/node/v8.1.4/lib/node_modules/npm/bin/node-gyp-bin:/home/kalin/.nvm/versions/node/v8.1.4/bin/node_modules/npm/bin/node-gyp-bin:/home/kalin/.nvm/versions/node/v8.1.4/bin:/usr/local/virtuoso-opensource/bin:/home/kalin/.config/composer/vendor/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/home/kalin/opt/gradle/bin:/home/kalin/Android/Sdk/tools:/home/kalin/Android/Sdk/platform-tools
9 verbose lifecycle [email protected]~develop: CWD: /home/kalin/projects/p-blog
10 silly lifecycle [email protected]~develop: Args: [ '-c', 'gatsby develop' ]
11 silly lifecycle [email protected]~develop: Returned: code: 139  signal: null
12 info lifecycle [email protected]~develop: Failed to exec develop script
13 verbose stack Error: [email protected] develop: `gatsby develop`
13 verbose stack Exit status 139
13 verbose stack     at EventEmitter.<anonymous> (/home/kalin/.nvm/versions/node/v8.1.4/lib/node_modules/npm/lib/utils/lifecycle.js:289:16)
13 verbose stack     at emitTwo (events.js:125:13)
13 verbose stack     at EventEmitter.emit (events.js:213:7)
13 verbose stack     at ChildProcess.<anonymous> (/home/kalin/.nvm/versions/node/v8.1.4/lib/node_modules/npm/lib/utils/spawn.js:40:14)
13 verbose stack     at emitTwo (events.js:125:13)
13 verbose stack     at ChildProcess.emit (events.js:213:7)
13 verbose stack     at maybeClose (internal/child_process.js:897:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:208:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/kalin/projects/p-blog
16 verbose Linux 4.8.0-53-generic
17 verbose argv "/home/kalin/.nvm/versions/node/v8.1.4/bin/node" "/home/kalin/.nvm/versions/node/v8.1.4/bin/npm" "run" "develop"
18 verbose node v8.1.4
19 verbose npm  v5.3.0
20 error code ELIFECYCLE
21 error errno 139
22 error [email protected] develop: `gatsby develop`
22 error Exit status 139
23 error Failed at the [email protected] develop script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 139, true ]

Secondly, it runs ok, but /admin cannot be reached. Neither is /admin/index.html. I will be digging a big further into this static assets question in gatsby, but honestly, I don't think it will be a big problem.

Another editor a colleague shared with me recently is this one: https://github.com/ory/editor
I haven't tried it yet, since if I achieve a connection between netlifycms and netlify as jam stack service, I will be happy enough.

@KyleAMathews
Copy link
Contributor

Not sure about other resources but the development server (currently) won't try to load html from the static folder. I think this should be changed but for now, if you want to use the admin console, run "gatsby serve".

@kalinchernev
Copy link
Contributor

kalinchernev commented Aug 13, 2017

@KyleAMathews you're right - my fundamental mistake was not thinking in react way.
For the moment, I managed to make the setup work like this:

Then, when deployed to netlify.com, the authorized client of netlifycms can post on my behalf.

I still haven't gone too deep into configurations so that the files get parsed again normally through gatsby, but this simple step was good enough for me before go to sleep today :)

@kalinchernev
Copy link
Contributor

Hi all, as @tortilaman mentioned that it's possible but nobody has shared, here is my short note. If you're more into the configurations, here they are. This is the advanced starterkit with configurations in both systems to point and work with one and the same folder for content + flattening the file structure of the md files.

@dardub
Copy link
Contributor

dardub commented Sep 19, 2017

I've noticed that Netlify CMS quick start instructions now contain a helpful note about Gatsby.

https://www.netlifycms.org/docs/quick-start/

@tech4him1
Copy link

@KyleAMathews ⬆️ Are you planning on changing the development server to serve static files, or would you like someone else to step up for that?

@KyleAMathews
Copy link
Contributor

@tech4him1
Copy link

@KyleAMathews Thanks you! I'm sorry I misunderstood, here is my bug report: #2352.

@Necmttn
Copy link
Contributor

Necmttn commented Oct 19, 2017

Hi all!
I would like step forward for Gatsby Desktop on my free times. (I have some experience in building and maintaining electron project) but I would need other contributors as well for faster progress.
All PR are welcome.
Cheers.

@calcsam
Copy link
Contributor

calcsam commented Nov 27, 2017

@Necmttn -- thanks for taking the initiative on this. We really appreciate this -- huge priority for making Gatsby accessible & easy to use for more people, especially folks who are experiences website developers but less used to the Gatsby toolchain.

Could you post updates on this (screenshots, new features) on this thread as you make progress?

@rakeen
Copy link

rakeen commented Dec 6, 2017

Not related to Admin GUI,

but running gatsby on clientside(maybe a startup script that bootstraps the building process on client side | this doesn't seem like a trivial task) would be pretty cool.

People could then just fire up a fork of it in sites like https://codesandbox.io, https://stackblitz.com, https://codepen.io

@jtrein
Copy link

jtrein commented Dec 8, 2017

With Netlify CMS, one can only deploy to Netlify's own CDN, currently. You'd have to hook into their deploy process somehow to change that? A Gatsby editor would be desirable IMO, which at the very least could deploy to a battle-tested GitHub Pages.

@tortilaman
Copy link

@jtrein Netlify CMS can deploy to any host you want, I implemented that a few months ago. I added documentation on it as well, but it might have been removed since then, I haven't been keeping up on it.

@jtrein
Copy link

jtrein commented Dec 14, 2017

@tortilaman Cheers. Good to know. Maybe a good interim solution is simply adding better Gatsby support to Netlify CMS, as you mentioned earlier in your comment. Apologies, I missed it when you said you added host support :-)

@kalinchernev
Copy link
Contributor

The process is still the same for Gatsby, and it's pretty simple - a page component loading the assets of the CMS. I also opened a pull already in for this, the only new thing in time was that Netlify moved their auth workflows to a separate service. For Gatsby, all works the same.

@kalinchernev
Copy link
Contributor

kalinchernev commented Dec 16, 2017

Just spent few minutes to try the new NetlifyCMS 1.0. The UI is greatly improved and there is a new separate identity management which worths trying.

Turns out @AustinGreen has prepared a well-appreciated starter which includes preview pane tweaks.

Getting started with Gatsby and NetlifyCMS hasn't been easier, just spin NetlifyCMS starter which includes the Gatsby starter :)

The only detail you might need to take care at this stage is await the first successful deployment before accepting the invite from Netlify Identity. At my case, it actually didn't come and I had to reset the pass manually, but it's really a small thing which will surely be smoothed with time.

@Chuloo Chuloo added type: question or discussion Issue discussing or asking a question about Gatsby 🏷 type: feature labels Aug 3, 2018
@KyleAMathews
Copy link
Contributor

This is still a great idea but let's close this to clean up our issues. If you'd like to make a serious go at working on a Gatsby desktop, please file a new issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: question or discussion Issue discussing or asking a question about Gatsby
Projects
None yet
Development

No branches or pull requests