Handy Gatsby commands you should use

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.

Permalink to heading 3 Basic commands 3 Basic commands

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

Permalink to heading gatsby new gatsby new

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

gatsby new my-extra-cool-project

Permalink to heading gatsby develop 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.

Permalink to heading gatsby build 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.

Permalink to heading Advanced commands Advanced commands

Permalink to heading gatsby serve 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.

Permalink to heading gatsby clean gatsby clean

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/

Permalink to heading gatsby info gatsby info

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

Permalink to heading Use Yarn 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 :)

Permalink to heading Ninja mode Ninja mode

Permalink to heading -o, –open -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.

Permalink to heading gatsby repl 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.

Permalink to heading -H, –host -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

Permalink to heading Wrap up Wrap up

Great CLI commands for the Great Gatsby.