Admin GUI

[NogsMPLS]

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]

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]

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

[KyleAMathews]

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]

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]

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]

Okay that's perfect then thanks!

[pradel]

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]

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]

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]

Yeah just add Gatsby as a dependency to your electron app. The global install isn't necessary.

On Mon, Jan 9, 2017, 1:39 PM Léo Pradel notifications@github.com wrote:

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

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/623#issuecomment-271415912, or mute the thread https://github.com/notifications/unsubscribe-auth/AAEVhyPFr-B6koWGKKyLkjQZQxTyELV4ks5rQqkbgaJpZM4LZsHL .

[pradel]

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

[KyleAMathews]

No

On Mon, Jan 9, 2017, 2:17 PM Léo Pradel notifications@github.com wrote:

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

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/gatsbyjs/gatsby/issues/623#issuecomment-271425580, or mute the thread https://github.com/notifications/unsubscribe-auth/AAEVhwrOX657sIXDKYDQ-701zOWpfiC2ks5rQrIUgaJpZM4LZsHL .

[pradel]

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

[KyleAMathews]

@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! https://github.com/gatsbyjs/gatsby/issues/562

[pradel]

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]

Ah gotcha — yeah, 1.0 will be much more flexible where you get data from — https://github.com/gatsbyjs/gatsby/issues/420

[pradel]

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

[noahlange]

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

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]

@fabien0102 not the slightest bit crazy!! https://github.com/gatsbyjs/gatsby/issues/408#issuecomment-250377413

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]

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

[chiedo]

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]

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

[derekperkins]

@tannerlinsley

[erlend-sh]

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]

First time hearing about it @erlend-sh

Thanks!

[erlend-sh]

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: https://github.com/netlify/netlify-cms/issues/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]

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

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 npm@5.3.0
3 info using node@v8.1.4
4 verbose run-script [ 'predevelop', 'develop', 'postdevelop' ]
5 info lifecycle gatsby-starter-advanced@1.1.0~predevelop: gatsby-starter-advanced@1.1.0
6 info lifecycle gatsby-starter-advanced@1.1.0~develop: gatsby-starter-advanced@1.1.0
7 verbose lifecycle gatsby-starter-advanced@1.1.0~develop: unsafe-perm in lifecycle true
8 verbose lifecycle gatsby-starter-advanced@1.1.0~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 gatsby-starter-advanced@1.1.0~develop: CWD: /home/kalin/projects/p-blog
10 silly lifecycle gatsby-starter-advanced@1.1.0~develop: Args: [ '-c', 'gatsby develop' ]
11 silly lifecycle gatsby-starter-advanced@1.1.0~develop: Returned: code: 139  signal: null
12 info lifecycle gatsby-starter-advanced@1.1.0~develop: Failed to exec develop script
13 verbose stack Error: gatsby-starter-advanced@1.1.0 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 gatsby-starter-advanced@1.1.0
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 gatsby-starter-advanced@1.1.0 develop: `gatsby develop`
22 error Exit status 139
23 error Failed at the gatsby-starter-advanced@1.1.0 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]

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]

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

• admin page (I am sure it could be done better)
• config file

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]

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]

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

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

[tech4him1]

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

@tech4him1 this is supported already https://www.gatsbyjs.org/docs/adding-images-fonts-files/#using-the-static-folder

[tech4him1]

@KyleAMathews Thanks you! I'm sorry I misunderstood, here is my bug report: https://github.com/gatsbyjs/gatsby/issues/2352.

[Necmttn]

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]

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

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]

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]

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

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

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]

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.

[KyleAMathews]

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.