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.
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.
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/
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
Wrap up
Great CLI commands for the Great Gatsby.