Handy Gatsby commands you should use

01/22/2020

Gatsby has a fantastic quick start mode.

npx gatsby new my-gatsby-supersite

Thanks to npx you can use npm package without first installing it. So with only 1 command line you grab everything you need to start playing with Gatsby.

3 Basic commands

The 3 commands you cannot miss are gatsby new, gatsby develop and gatsby build.

gatsby new

It allows you to create a new project powered by Gatsby :

gatsby new my-extra-cool-project

gatsby develop

It allows you to code your Gatsby application with amazing features such as “hot reload” thanks to webpack (any change you make in your code is automatically populated).

That’s what I call WYSIWYC, what you see is what you code.

gatsby build

It allows you to build your app before deploying. Use it when you are done coding (for this code session :) ).

Indeed you can get those features without using Gatsby but depending on your knowledge in, let’s say “stuffs”, it might be pretty hard to setup. Gatsby just makes it soooo simple.

Advanced commands

gatsby serve

gatsby serve is used to run a server in order to test your build (localhost:9000 by default). Always a good idea to use it before deploying anything.

Get a fresh start, use gatsby clean. Some bugs/errors can be quite complicated, if you get stuck, give it a try, trust me. It’s useful to kill some GraphQL glitches or when developing your own plugins…

This command deletes the cache folder. Imho more safe than a manual :

rm -R .cache/

gatsby info

gatsby info allows you to grab all environment information. It’s really handy when reporting bugs.

Use Yarn

Indeed use yarn to run these commands. You just have to edit your package.json and look for the scripts part :

  "scripts": {
    "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
    "dev": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  }

and then you can run yarn dev instead of gatsby develop. So it’s 8 chars (spaces included) instead of 14 chars. Make the calculation for one year :)

Ninja mode

-o, –open

Add this option to your package.json ! It automagically opens your app with your default browser when running commands :

  "scripts": {
    "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
    "dev": "gatsby develop -o",
    "build": "gatsby build",
    "serve": "gatsby serve -o"
  }

so it’s still 8 chars and you don’t have to open your browser everytime XD.

gatsby repl

gatsby repl opens an interactive shell you can use to explore and test things :

gatsby > console.log(getNodes())

There are some subcommands such as getNodes() you can use.

-H, –host

yarn dev -H 0.0.0.0 is pretty useful to test your website with other devices (e.g your smartphone) connected to your local network.

Gatsby will tell you everything you need to know :

Local: http://localhost:8000/ On Your Network: http://192.168.1.111:8000/ View GraphiQL, an in-browser IDE, to explore your site’s data and schema Local: http://localhost:8000/**graphql On Your Network: http://192.168.1.111:8000/**graphql

Source

Wrap up

Great CLI commands for the Great Gatsby.

See Also