gatsby-cli

What is gatsby-cli?

The gatsby-cli npm package is a command-line interface tool for creating, developing, and managing Gatsby sites. It provides a range of commands to streamline the development process, from setting up new projects to deploying them.

What are gatsby-cli's main functionalities?

Create a new Gatsby site

This command initializes a new Gatsby site in a directory called 'my-gatsby-site'. It sets up the necessary files and dependencies to get started with a Gatsby project.

gatsby new my-gatsby-site

Develop a Gatsby site

This command starts a local development server and watches for changes in your Gatsby site. It provides hot-reloading and a GraphQL data layer for building and testing your site locally.

gatsby develop

Build a Gatsby site

This command generates a production-ready static site. It compiles your site into static files that can be deployed to any web server.

gatsby build

Serve a Gatsby site

This command starts a local server to serve the production build of your site. It is useful for testing the final output before deploying it.

gatsby serve

Clean Gatsby cache

This command deletes the .cache and public directories. It is useful for troubleshooting and ensuring a clean build environment.

gatsby clean

Other packages similar to gatsby-cli

create-react-app

Create React App is a command-line tool to set up a new React project with a single command. It provides a similar experience to gatsby-cli but is focused on React applications rather than static site generation.

next

Next.js is a React framework that provides a CLI for creating and managing projects. It offers server-side rendering and static site generation, making it a versatile alternative to Gatsby for building modern web applications.

vue-cli

Vue CLI is a command-line tool for scaffolding Vue.js projects. It offers a similar set of features to gatsby-cli but is tailored for Vue.js applications, including project creation, development server, and build commands.

README

gatsby-cli

The Gatsby command line interface (CLI) is the main tool you use to initialize, build and develop Gatsby sites.

How to use gatsby-cli

To use the Gatsby CLI you must either:

• Install it globally with npm install -g gatsby-cli, where you execute commands with the syntax gatsby new, or
• Run commands directly with npx, where you execute commands with the syntax npx gatsby new

Useful Gatsby CLI commands are also pre-defined in starters as run scripts.

CLI Commands

All the following documentation is available in the tool by running gatsby --help.

Available commands are:

• new
• develop
• build
• serve
• clean
• info
• repl

new

Runs an interactive shell with a prompt that helps you set up a CMS, styling system and plugins if you wish.

To create a new site with the prompt, execute:

gatsby new

You can also skip the prompt and clone a starter directly from GitHub. For example, to clone a new gatsby-starter-blog, execute:

gatsby new my-new-blog https://github.com/gatsbyjs/gatsby-starter-blog

The first argument (e.g. my-new-blog) is the name of your site, and the second argument is the GitHub URL of the starter you want to clone.

Note: The site name should only consist of letters and numbers. If you specify a ., ./ or a <space> in the name, gatsby new will throw an error.

develop

Compiles and serves a development build of your site that reflects your source code changes in the browser in real time. Should be run from the root of your project.

gatsby develop

Options include:

Option	Description
-H, --host	Set host. Defaults to localhost
-p, --port	Set port. Defaults to env.PORT or 8000
-o, --open	Open the site in your (default) browser for you
-S, --https	Use HTTPS
--inspect	Opens a port for debugging

To set up HTTPS, follow the Local HTTPS guide.

To include a URL you can access from other devices on the same network, execute:

gatsby develop -H 0.0.0.0

You will see this output:

You can now view gatsbyjs.com in the browser.
⠀
  Local:            http://0.0.0.0:8000/
  On Your Network:  http://192.168.0.212:8000/ // highlight-line

You can use the "On Your Network" URL to access your site within your network.

build

Compiles your site for production so it can be deployed. Should be run from the root of your project.

gatsby build

Options include:

Option	Description
--prefix-paths	Build site with link paths prefixed (set pathPrefix in your config)
--no-uglify	Build site without uglifying JS bundles (for debugging)
--profile	Build site with react profiling. See Profiling Site Performance with React Profiler
--open-tracing-config-file	Tracer configuration file (OpenTracing compatible). See Performance Tracing
--graphql-tracing	Trace (see above) every graphql resolver, may have performance implications.
--no-color, --no-colors	Disables colored terminal output

In addition to these build options, there are some optional build environment variables for more advanced configurations that can adjust how a build runs. For example, setting CI=true as an environment variable will tailor output for dumb terminals.

serve

Serves the production build of your site for testing prior to deployment. Should be run from the root of your project.

gatsby serve

Options include:

Option	Description
-H, --host	Set host. Defaults to localhost
-p, --port	Set port. Defaults to 9000
-o, --open	Open the site in your default browser for you
--prefix-paths	Serve site with link paths prefixed (if built with pathPrefix in your gatsby-config file).

info

Show helpful environment information which is required in bug reports. Should be run from the root of your project.

gatsby info

Options include:

Option	Description
-C, --clipboard	Copy environment information to your clipboard

clean

Delete the .cache and public directories. Should be run from the root of your project.

gatsby clean

This is useful as a last resort when your local project seems to have issues or content does not seem to be refreshing. Issues this may fix commonly include:

• Stale data, e.g. this file/resource/etc. isn't appearing
• GraphQL error, e.g. this GraphQL resource should be present but is not
• Dependency issues, e.g. invalid version, cryptic errors in console, etc.
• Plugin issues, e.g. developing a local plugin and changes don't seem to be taking effect

repl

Open a Node.js REPL (interactive shell) with context of your Gatsby environment. Should be run from the root of your project.

gatsby repl

Gatsby will prompt you to type in commands and explore. When it shows this: gatsby >, you can type in one of these commands to see their values in real time:

• babelrc
• components
• dataPaths
• getNodes()
• nodes
• pages
• schema
• siteConfig
• staticQueries

To exit the REPL:

• Press Ctrl+C or Ctrl+D twice, or
• Type .exit and press Enter

When combined with the GraphQL explorer, these REPL commands could be very helpful for understanding your Gatsby site's data.