Korean README 한국어 | Japanese README 日本語

About

GatsbyHub is an open-source extension for Visual Studio Code that offers an interactive GUI for Gatsby-cli.

GatsbyHub allows you to browse Gatsby plugins, starters, and themes without ever having to leave VS Code. Create a blazing fast, modern app with a single click or check out the many Gatsby starter templates available. Start a hot-reloading development environment by simply clicking the status bar icon. Configure GraphQL queries using Gatsby's built-in instance of GraphiQL. For advanced customizations, please refer to the Gatsby docs and edit your user settings.

Installation

⚠️ Warning: This is beta software, which means there may still be bugs. Please report bugs and share your feedback. Currently GatsbyHub is only compatible with npm which affects how plugins, themes, and gatsby-cli are installed.

GatsbyHub is available to install in Visual Studio Marketplace.

Features

Gatsby CLI GUI

Interact with Gatsby without ever having to use the command line interface. GatsbyHub provides buttons and options for all the most commonly used commands.

Install Gatsby - Installs the gatsby-cli npm package
Create New Site - Creates a new Gatsby site with the click of a button
Develop Server - Starts and stops a hot-reloading development environment by either clicking the button or clicking the status bar item
Build Site - Build and package your site so it's ready to deploy on Gatsby's cloud

Advanced Develop and Build options are available in the extension settings for things like setting up the host, port, toggling no-uglify, etc.

Gatsby Plugins and Themes

Find and download Gatsby plugins and themes without ever leaving VS Code.

Gatsby is known for it's active community and many plugins. You can find Gatsby's official plugins and all the documentation needed to implement them into your project. Selecting a plugin opens a webview within VS Code where you can read up on the plugin's README. Installing the plugin is as easy as clicking the download button in the sidebar.

Gatsby Starters

Use one of Gatsby's many Starter sites as a template for your site. Browse the starters and check out their READMEs. Creating a new Gatsby site is as easy as clicking a button in the sidebar and typing in a name for your site.

GraphiQL

Access Gatsby's built-in instance of GraphiQL with a single click when running a development server. Writing GraphQL queries has never been this easy.

Extension Settings

Gatsby-Cli has a lot of advanced options for generating a development server and packaging your project. GatsbyHub provides a way to toggle these options within the VS Code extension settings. That way the settings persist every time you want to develop a server or package your app. No more typing out the same commands or configuring a script everytime you start a new project.