[RFC] Create Gatsby desktop app with focus on helping non-programmers start and develop and publish Gatsby sites

[KyleAMathews]

To use Gatsby currently you need to:

• Install Node.js
• Install gatsby-cli
• Start a new project by running gatsby new my-project-name
• Navigate in the terminal to the correct directory
• Run another command to start the gatsby develop server
• Interpret & resolve the inevitable sometimes cryptic errors Node or Webpack or Babel or Gatsby or N other subsystems will throw at you

Granted this is still far easier than configuring something akin to Gatsby by yourself but it still puts using Gatsby far out of reach for many potential users.

So I propose making a cross-platform Gatsby desktop app a first-class citizen of Gatsby.

It would bundle Node.js so there'd be no additional installation or setup work beyond installing Gatsby.

Once you start the app, you could browse and install starters.

You'd be able to see all the projects you've started in the past.

You could click on any of them to see more info about them e.g. when you started the project, a recent screenshot, the plugins you're using, etc.

You can start the development server for any of your projects.

You can trigger a build.

You can preview locally the built site.

We don't yet have this capability but we could add "deployment" plugins to Gatsby to let you easily publish the new site.

Basically it's the Gatsby CLI experience but with a GUI :-)

We'd also have the opportunity to go beyond the CLI and add the ability to search for plugins and then to click a button to install it. Go full WordPress basically :-)

Anyways, there's a lot of potential here to vastly expand the audience for using Gatsby beyond the already terminal proficient.

Would love to hear your thoughts!

[YoavRheims]

An app using Electron?

[pgegenfurtner]

I'm currently working on a componet library for building websites with gatsby; trying to get a visual editor working (example: https://github.com/ory/editor).

This combined with a theme-system (like the gatsby-manor approach) in one desktop app, would be really awesome. It would enable many non-programmers to build great and fast sites.

I can see a lot of potential.

[stevenandersonz]

Can I suggest a web app maybe? I would be great if they only need to type the URL login and press start or load project directly, this can improve accessibility and avoid the process of installation.

[sedubois]

It would be awesome to create Gatsby sites directly from the browser to lower the barrier even more 😛
Something inspired or built on top of StackBlitz, CodeSandbox or similar ideas.
With a one-click deploy button (to Netlify etc).

[varenya]

we could do something like this: http://formidable.com/blog/2017/introducing-electron-webpack-dashboard/ with bunch of options that @KyleAMathews underlined i think we can probably extend it

[pieh]

I can see tool like this could be very helpful in at least 2 cases:

• to lower barrier of entry for people that want to try/start webdeving - so they don't have to setup all the needed tools before doing any actual core webdev stuff - they will surely later on will need to get familiar with terminal and cli tools etc, but if they don't have to start with it this could be very helpful
• for content editors that could easily preview content changes (at least for smaller sites where setting up preview server by dev is not really cost efficent - things like one page websites / landing pages)

[maxlibin]

Idea is kind of like: https://alibaba.github.io/ice/#/iceworks
https://alibaba.github.io/ice/#/iceworks/start

[tsriram]

This sounds really cool. This should definitely make getting started and working with Gatsby a breeze for non-programmers (and programmers too!). Apart from adding starters directly, we could actually have a wizard where users select content source, deployment target (from the list which can grow over time) etc. and relevant plugins can be added and their options be configured automatically in the background. This could make the end-to-end process of deploying a site pretty seamless.

Things we can do once we have this limitless :)

[YoavRheims]

I think that would be awesome to have an app running automatically all the things that make Gatsby. Doing that will increase the users who are no developers, newbies or just some bloggers. I think it's a logical step toward more awareness about Gatsby as a CMS.

What about some more basic functionalities such as user accounts, backup, template types content, etc all neatly available through a GUI app.

May I dream?

[jbolda]

Putting in my vote for stackblitz, but I think regardless this will be in involved with the dependence on fs.

/cc @EricSimons

[jumpalottahigh]

I've been thinking a lot lately about the part where you are able to add plugins through a GUI. I can see a lot of potential here!

[huntercaron]

[EDIT in 2020]
This was written a few years back when Gatsby was only an open source project & this rough wireframe was sketched up in a few minutes. If anyone wants to chat about current day Gatsby or UI ideas there please reach out on twitter :)

Thanks for making this issue @KyleAMathews ! I've been thinking about this a lot.

I'm primarily a designer and will gladly work on the design for this. I think the initially goals outlined are really strong. Probably good to focus on simplicity and stability off the bat, then maybe have some of the things in this thread as some cool stretch goals.

CodeKit might be interesting reference for some parts (adding packages, project management).

I just spent a little bit making a super rough wireframe, but trying to show how simple it could be (if not even more simple :)

It could be really strong just to hand-hold people through all the terminal stuff, and of course still allow them to go and do it the normal way whenever they'd like.

Really exciting stuff!

[chasemccoy]

In all honesty, I don't think this is a very good idea for Gatsby. Here's why:

The primary reasoning for this seems to be that a lot of people are not technically oriented enough to setup and install all the tools necessary to get a Gatsby site going. I would argue that if those things are outside of some user's comfort zones, then actually building a site with Gatsby will be as well.

The part of Gatsby that is difficult for most users isn't getting the tool setup, it's actually building useful things with it. I think time/effort would be better spent on improving documentation and education rather than making the installation process simpler.

TLDR: We should spend time/effort optimizing the biggest bottlenecks of getting started with Gatsby. The installation process is not actually the biggest bottleneck — learning how to build things with the tool is.

Thanks for letting us share our thoughts on this!

[nodox]

I and Gatsby Manor fully support this initiative!

To add onto what @pgegenfurtner mentioned we also thought about what this would look like at Gatsby Manor because it fit our mission: deliver a fast site, with instant deploys, and beautiful themes to both (technical and non-technical) users. Thus we've put it on our roadmap. However if Gatsby provided this out of the box that would be awesome!

However @chasemccoy does bring up a good point about reservations. While I'd absolutely love to have this app, it does seem like a nice-to-have feature as a opposed to a solution based on a user pain currently experienced with Gatsby. Therefore the final decision should be data driven.

The data could be based on:

• Service level objectives (SLO)
• Users are asking for this features

To be honest the decision should come from your SLOs. Why? Meeting your SLO verifies that your tool is reliable XX.X% of the time. If you don't meet your SLO per (week or month or quarter) then you know you need to work on your service so that the end user is happy. Once you are meeting your SLO then you can confidently (and safely) increase you velocity on new feature work.

Some SLOs that might be good to track would be

• gatsby new finishes in 5 seconds at 99th percentile
• gatsby develop finishes in 5 seconds at 99th
• gatsby build finishes in 5 seconds at 99th
• Bootstrap finishes in 10 seconds at 99th
• Any metric in the pipeline finishes at 0.5 seconds at 99th

There numbers timings are arbitrary but you get my idea. When you use data to guide your sprint cycle, decision become a no-brainer. Of course if your users are begging for a feature you should deliver. 😄

My apologies if the Gatsby team already does this behind the scenes or if I've presented something that is common knowledge amongst developers. I love this project and only wish Gatsby the very best.

❤️

[LekoArts]

I kinda have the same feeling like @chasemccoy that the current target audience of Gatsby is definitely people who know React and JS ecosystem at least a little bit. That's why I proposed a tutorial "Part Zero" with enough resources linked to learn JS (ecosystem) and React before using Gatsby.

If it's the goal to let non-programmers use Gatsby you probably have to go the "Wordpress way" and not just only make the installation easy but also the configuration of themes and the content editing. Yeah, not starters but themes.

Starters with a Headless CMS are kinda on the right way as the end user can use a familiar CMS Front-End.

[emilbruckner]

Going full WordPress sounds like the right vision to me.
Reducing the getting started section to one bullet is nice, but there is more to it.

TLDR

• Instead of a desktop app, make it a web-app + cloud-dev-server
• Create a Theme (Starter) Marketplace
• super easy CMS and hosting integrations

---

@chasemccoy is right with his bottleneck argument.
If you want to create a proper Gatsby-Site you are already terminal proficient. Creating a site with Wordpress however can be as easy as clicking a button, creating an account and choosing a theme.

What I'd like to see

• web app + cloud dev server
• self-hosted (could be local) or hosted by Gatsby ($)
• Theme-Marketplace
  (Also, being able to monetize themes is a great incentive for creators)
• pre-integrated CMS

To go full Wordpress, Gatsby needs a WYSIWYG-editor.

In an ideal scenario one could create a Gatsby account, init a new site, choose a theme, create content and deploy it.

How it could work

Having a repo for every project, just like Heroku does it. That would allow people to use their GitHub accounts, or Gatsby hosted ones (so you don't need any third party account). You could start a cloud-dev-server or do it locally. Every GUI edit would be a commit, just like Netlify CMS does it (why not use that too?).

Deployment

I like the way Netlify manages commits and deploys. You can turn on auto-publish, preview your site at every stage and deploy that.

Themes

Themes / Starters would have to talk to the CMS to define types. If Netlify CMS were used, the theme would have a config.yml file for that. There should be some conventions there to make it easier to switch theme.

Gatsby-Web-App should have a name

[nickmccurdy]

I love this idea to make it easier for non-technical folks to get up and running with Gatsby. While there are pain points of setting up Gatsby past just installation and usage of a starter, I think those bottlenecks will become self evident. We shouldn't limit Gatsby to being a tool for "technical" users since this really is a great approach to fully replace CMSes and even other static site generators for users.

My main concern is that content editing could easily get bloated and backfire on supporting standard tools. I would disagree with including a build in text editor, unless if it's something really simpler like a Markdown editor similar to Prose or another headless CMS. There are plenty of easy to use text editors for non-programmers that work very nicely with JS and Electron including VSCode and Atom. I don't think Gatsby needs to replace that editing expereince, just make installation and setup (and maybe basic configuration) easier if it requires too much command line usage. Parts of this project could also be built into VSCode/Atom/etc. plugins for users that would rather stick to one app.

Projects to check for inspiration

• Prose (basic Markdown editor with Jekyll front matter support)
• Yeoman (command line, but interactive and does most installation and configuration for you)
• GitHub Pages automatic generator (you can pick a theme on GitHub, just write a Markdown file, and the server will set up and render the whole site for you)
• CodeKit (great GUI UX for static site generation 😄 but proprietary and paid 😢 )

[KyleAMathews]

A few replies:

@nickmccurdy nice list of tools to check out! And agreed that trying to handle content would make things a lot harder. My view in general is that content editing is a specialized job best left to other projects. Gatsby's sweet spot is being the best way to hook up content to code and develop and build and deploy the site.

@emilbruckner sounds like an ambitious list :-D I agree with you, @stevenandersonz, and @sedubois

@chasemccoy definitely agree that docs come first! Luckily we can do more than one thing at a time ;-) Gatsby is up to 648 contributors! Woah. @shannonbux is doing great work shepherding docs and is currently refactoring the tutorial + has a blog post coming up about some initiatives she's planning there. Check out the documentation project she's created. https://github.com/gatsbyjs/gatsby/projects/3

I posted this to gauge community interest + to collect ideas. It's not overly urgent but if there's people who want to start working on it, I think it'd be a really great addition to the project.

@huntercaron nice wireframe! Yeah, https://codekitapp.com/ is one I've seen before and liked. On terminal output — we've been working on moving all internal/plugin messaging to use a little internal framework instead of writing directly to the terminal. So instead of displaying terminal output directly, we could stream warnings/errors as JSON and display them in a bit more fancy/friendly way.

@nodox SLOs are great — right now we don't have a way to test those unfortunately but that's something I want to start measuring automatically as part of PRs.

[dardub]

I disagree with @chasemccoy. First of all, this could be a good tool for Content Editors to quickly make changes without having to set up any development environments. They could simply download the app, make some changes to the markdown and hit deploy.

Sometimes having a CMS can get in the way. Being able to see edits to a markdown or yaml file change the preview in real time I feel is very powerful.

Even though Gatsby is a framework, I see it as a low level framework. Building a suite of plugins and helper functions on top of Gatsby will aid in making it easier for non technical people or beginners.

I've run into many people who are able to make changes to wordpress templates without really knowing php. As long as they have a starting place they can make small changes and learn from there. It's all about making things simple and consistent. Having patterns that people can follow.

Installing development tools is easy for us. But to newcomers it's not that straightforward. We take for granted all the utilities we already have installed on our own machine.

I would like to see us start simple and continue to build on top of it. Start with the bare minimum as Kyle mentioned in the initial post.

• Create a new project from a starter
• Edit templates
• Add media
• Edit markdown and yaml
• Live Preview
• Commits / Pushes to git repo

All without having to install node, git, homebrew, vscode, etc...

If we want to be an alternative to wordpress, we'll need to offer the entire process from downloading or signing into the app to deploying live.

[jlengstorf]

I tend to agree with @dardub on this — if the goal is to make Gatsby a drop-in replacement for WordPress, we have to consider how easy WP makes it for inexperienced, non-technical users to start building websites with it.

If we could provide a plugin that created a web app (which we could then wrap with Electron to provide a desktop app, if that's an in-demand offering) to allow things like browsing, installing, and configuring plugins + themes, that would get us most of the way there.

There's already a lot of work being done to make the plugins discoverable in a UI interface (#3906), so if we come up with some standard meta info and a way to define/discover it (e.g. required package.json fields, a gatsby-info.json), the UI plugin could theoretically be a pretty lightweight microapp to read and store theme and plugin metadata.

[dardub]

Could even do something like Rekit. https://medium.freecodecamp.org/introducing-rekit-studio-a-real-ide-for-react-and-redux-development-baf0c99cb542

Rekit projects follow specific organization patterns so it can infer more about your project.

Based on the pattern, Rekit Studio knows which files are components, which are actions, where routing rules are defined, and so on. Then the project explorer can show the project structure in a meaningful way...

[YoavRheims]

I 100% agree with @jlengstorf @dardub.

Take Publii for example: they did exactly that. Publii is a desktop app which runs on Electron (as suggested by @jlengstorf and myself in the first reply of this issue) and let you generate your blog with full GUI access.

And you know what? Publii is freaking awesome: now you have non-developers people who are able to generate static blog instantly then host on Netlify for free...

Now, take the powers of Gatsby, do the same and Gatsby will grow in popularity by the thousand.

Simple logic...

@chasemccoy - I disagree. Why prevent more non-developers (or whatever) people using an open-source software? Why not make sure there is an easier path for them? Isn't the ultimate goal of Gatsby (and @KyleAMathews) to give the WEB world more secure and faster alternatives to the likes of WordPress to all levels of knowledge?

[Jaikant]

Yes publii is pretty nice. I have used it and liked the simple way to create sites. Gatsby is much more powerful and to realize such a power using a desktop app could take some effort. Possibly something simpler version to start with.

[YoavRheims]

@Jaikant - Agree.

What if you got to work with some builders such as the lot of Webflow or Elegant's Divi on WordPress?

[shannonbux]

@YoavRheims I really like what I've seen of Divi and think it would be great to build with. I'm not a developer (well, now I know html and CSS and starting JS...), and I've built stuff on Wordpress,com, Squarespace, Wix, Weebly, maybe more I can't remember. Divi is WAY cooler than any of the things I've tried. I actually gave up on Squarespace, weirdly enough. I can't remember exactly why--something about how editing things was not intuitive.

[dardub]

@KyleAMathews Apologies if my post diverted the topic off the initial intention. I was going off what I feel are the needs to be able to make Gatsby useful to a wider audience.

I'm not very clear on what the long-term goals are for Gatsby. I think if we had a better understanding of that, then we could be more focused on what features we want to deliver.

Selfishly I would like Gatsby to be an option where I could easily sell it to a client without them thinking they are losing features by not using Wordpress. Because right now it's an uphill battle trying to convince people that Wordpress is not the best solution!

I'd really like to hear your thoughts on this. I'd be interested in helping out with this in one form or another.

Thanks!

[helmutgranda]

After all the comments, it is May 1st and I was wondering if anyone already started working on this project.

[Khaledgarbaya]

Hey I am kinda late to the party here, I was wondering why not help me to add Gatsby support for code sandbox?
codesandbox/codesandbox-client#608

[helmutgranda]

@Khaledgarbaya, how is CodeSandbox different from something like Stackblitz? https://stackblitz.com/

[akosyakov]

Hi there 👋 We've launched Gitpod this week. It's a VS Code-powered IDE and a cloud-based Linux container configured specifically for the project at hand. For example, you can provide a Docker image with Node and Gatsby already installed, and configure startup commands to install dependencies and launch the dev server.

Here, how it works with gatsby-starter-default:

The repository configuration is here. You can start by prefixing any GitHub URL with gitpod.io#: https://gitpod.io#https://github.com/gatsbyjs/gatsby-starter-default

We will be glad to hear what is missing to make it work for this case, plese file issues here. For example, it is already possible to fork a cloned repo from Gitpod, but for starter repos will it make more sense to create a completely new one?

[gatsbot]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[Ziinc]

It's still difficult to get end users on board onto SSGs because of how scary markdown and yaml frontmatter is for non-technical ppl, especially when a full blown headless CMS service is overkill for a few pages.

Publii sort of gets it right when it comes to the user interface and end user ux, but is very rigid in the templating system for dev customization.

My dream would be something like this hn comment, something super simple for end users, without complexity.

Another core thing that i dislike about publii is the way it handles file storage (they only have a dropbox example, which isn't git powered, isn't plain text (like .md or .json), and makes it hard for multiple end users to work together

[shannonbux]

Thanks for the comment @Ziinc and especially suggestions of what you do/don't like about other platforms. I think something like this is further down the road, so I'm bookmarking this for future ideas!

[YoavRheims]

My dream would be something like this hn comment, something super simple for end users, without complexity.

Yup! Exactly my last year thoughts :)

[frinyvonnick]

Is this something we could start working on a proof of concept ?

[erlend-sh]

I recommend taking a look at the newly released Tauri: https://github.com/tauri-apps/tauri

It has a working demo using Vue.js/Quasar.

[CanRau]

I recommend taking a look at the newly released Tauri: https://github.com/tauri-apps/tauri

It has a working demo using Vue.js/Quasar.

Looks super interesting and promising, thanks for sharing 🙏

Sapper Studio might provide some inspiration as well, it's a WIP for Svelte's SSG Sapper

[nothingismagick]

I'm from the Tauri project, and at this very moment we are preparing our smoke-tests repo, where a select few projects are used as baselines to guarantee that our build piplelines are working for the CI.

I'd love to talk to you more about this and setting you up with a POC.

[nothingismagick]

One of the things that I could envision is to make a binary builder as a desktop binary. It's on our long list of things we'd like to offer...

[CanRau]

Maybe Git-backed TinaCMS could be of interest for Gatsby Desktop

[YoavRheims]

And Stackbit Live.

…

On Wed, 6 Nov 2019, 19:21 Can Rau, ***@***.***> wrote: Maybe Git-backed TinaCMS <https://tinacms.org/> could be of interest for Gatsby Desktop — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4201?email_source=notifications&email_token=ABBMXMW6AIQGIOQD4VZOAXTQSL4JTA5CNFSM4ESB6GM2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDHKCDI#issuecomment-550412557>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABBMXMR2HA7VNBXWU5J6L6DQSL4JTANCNFSM4ESB6GMQ> .

[erlend-sh]

Courtesy of @jbolda Tauri now has a working Gatsby example. 🎉

[lucis]

https://github.com/gatsbyjs/desktop

[wardpeet]

Going to close this one, we'll open a new one with the latest thinking & design. For now you can try out our new alpha https://github.com/gatsbyjs/desktop