www.gatsbyjs.com
Open in
urlscan Pro
2a04:4e42:4d::534
Public Scan
URL:
https://www.gatsbyjs.com/docs/reference/gatsby-cli/
Submission: On November 21 via manual from SE — Scanned from DE
Submission: On November 21 via manual from SE — Scanned from DE
Form analysis
3 forms found in the DOM<form novalidate="" class="css-poyawq" __bizdiag="96619420" __biza="W___"><label for="email" class="css-1o60176">Subscribe to our newsletter</label><input type="email" name="email" required="" placeholder="you@example.xyz" value=""
class="css-1cmx75u"><button type="submit" class="css-ol3l68"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
</svg> <span class="css-7v2lmy">Subscribe</span></button></form>
<form id="mktoForm_1139" __bizdiag="196352648" __biza="W___" novalidate="novalidate" class="mktoForm mktoHasWidth mktoLayoutLeft" data-styles-ready="true">
<style type="text/css">
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
color: #fff;
border: 1px solid #75ae4c;
padding: 0.4em 1em;
font-size: 1em;
background-color: #99c47c;
background-image: -webkit-gradient(linear, left top, left bottom, from(#99c47c), to(#75ae4c));
background-image: -webkit-linear-gradient(top, #99c47c, #75ae4c);
background-image: -moz-linear-gradient(top, #99c47c, #75ae4c);
background-image: linear-gradient(to bottom, #99c47c, #75ae4c);
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover {
border: 1px solid #447f19;
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:focus {
outline: none;
border: 1px solid #447f19;
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:active {
background-color: #75ae4c;
background-image: -webkit-gradient(linear, left top, left bottom, from(#75ae4c), to(#99c47c));
background-image: -webkit-linear-gradient(top, #75ae4c, #99c47c);
background-image: -moz-linear-gradient(top, #75ae4c, #99c47c);
background-image: linear-gradient(to bottom, #75ae4c, #99c47c);
}
</style>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol">
<div class="mktoOffset"></div>
<div class="mktoFieldWrap mktoRequiredField"><label for="Email" id="LblEmail" class="mktoLabel mktoHasWidth">
<div class="mktoAsterix">*</div>Business Email:
</label>
<div class="mktoGutter mktoHasWidth"></div><input id="Email" name="Email" maxlength="255" aria-labelledby="LblEmail InstructEmail" type="email" class="mktoField mktoEmailField mktoHasWidth mktoRequired" aria-required="true"><span
id="InstructEmail" tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoButtonRow"><span class="mktoButtonWrap mktoSimple"><button type="submit" class="mktoButton">Submit</button></span></div><input type="hidden" name="formid" class="mktoField mktoFieldDescriptor" value="1139"><input type="hidden"
name="munchkinId" class="mktoField mktoFieldDescriptor" value="032-XEH-502">
</form>
<form __bizdiag="894586961" __biza="W___" novalidate="novalidate" class="mktoForm mktoHasWidth mktoLayoutLeft"
style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; color: rgb(51, 51, 51); visibility: hidden; position: absolute; top: -500px; left: -1000px; width: 1600px;"></form>
Text Content
Skip to content Migrate to Netlify Today Netlify announces the next evolution of Gatsby Cloud. Learn more SupportLog In Open Source Learn Menu DOCUMENTATION TutorialsHow-To GuidesReferenceConcepts v5 -------------------------------------------------------------------------------- v4 Docsv3 Docsv2 Docsv1 Docs SearchSign Up DocumentationReference GuidesLocal Development Docs COMMANDS (GATSBY CLI) TABLE OF CONTENTS * How to use gatsby-cli * API commands * new * develop * build * serve * info * clean * repl * Disabling colored output * How to change your default package manager for your next project? * Using options command from CLI * Editing the config file 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. API COMMANDS All the following documentation is available in the tool by running gatsby --help. 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: Copycopy code to clipboard 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: Copycopy code to clipboard 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. Copycopy code to clipboard gatsby develop Options include: OptionDescription-H, --hostSet host. Defaults to localhost-p, --portSet port. Defaults to env.PORT or 8000-o, --openOpen the site in your (default) browser for you-S, --httpsUse HTTPS--inspectOpens a port for debugging--verboseTurn on verbose output To set up HTTPS, follow the Local HTTPS guide. To include a URL you can access from other devices on the same network, execute: Copycopy code to clipboard gatsby develop -H 0.0.0.0 You will see this output: Copycopy code to clipboard 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/ 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. Copycopy code to clipboard gatsby build Options include: OptionDescription--prefix-pathsBuild site with link paths prefixed (set pathPrefix in your config)--no-uglifyBuild site without uglifying JS bundles (for debugging)--profileBuild site with react profiling. See Profiling Site Performance with React Profiler--open-tracing-config-fileTracer configuration file (OpenTracing compatible). See Performance Tracing--graphql-tracingTrace (see above) every graphql resolver, may have performance implications.--no-color, --no-colorsDisables colored terminal output--verboseTurn on verbose 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. Copycopy code to clipboard gatsby serve Options include: OptionDescription-H, --hostSet host. Defaults to localhost-p, --portSet port. Defaults to 9000-o, --openOpen the site in your default browser for you--prefix-pathsServe 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. Copycopy code to clipboard gatsby info Options include: OptionDescription-C, --clipboardCopy environment information to your clipboard CLEAN Delete the .cache and public directories. Should be run from the root of your project. Copycopy code to clipboard 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. Copycopy code to clipboard 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. DISABLING COLORED OUTPUT In addition to the explicit --no-color option, the CLI respects the presence of the NO_COLOR environment variable (see no-color.org). HOW TO CHANGE YOUR DEFAULT PACKAGE MANAGER FOR YOUR NEXT PROJECT? When you use gatsby new for the first time to create a new project, you are asked to choose your default package manager between yarn and npm. Copycopy code to clipboard Which package manager would you like to use ? › - Use arrow-keys. Return to submit. ❯ yarn npm Once you’ve made your choice, the CLI won’t ask for your preference again for any subsequent project. If you want to change the preference, there are two ways to change the default package manager for your next project: 1. Using options command from CLI 2. Editing the config file USING OPTIONS COMMAND FROM CLI You can use the gatsby options command to change the default package manager. Copycopy code to clipboard gatsby options set [<key> <value>] ArgumentDescriptionkeySet the package manager gatsby new is using. choices: pm, package-managervalueSet the package manager as npm or yarn. To set the default package manager as yarn you’d run: Copycopy code to clipboard gatsby options set package-manager yarn EDITING THE CONFIG FILE You can also manually change the default package manager by editing the config file created automatically by the CLI. This file is available on your system at: ~/.config/gatsby/config.json In it you’re going to see something like this. config.json Copyconfig.json: copy code to clipboard { "cli": { "packageManager": "yarn" } } Edit your packageManager value, save and you’re good to go for your next project using gatsby new. Start building today on Netlify! Edit this page on GitHub Was this doc helpful to you? Docs * Reference Guides * Overview * Cloud 13 * Local Development 3 * Gatsby Project Structure * Gatsby CLI commands * Fast Refresh * Built-in React Components 5 * Gatsby Link API * Gatsby Script API * Gatsby Head API * Gatsby Image plugin API * Gatsby Slice API * Routing 2 * Creating Routes * File System Route API * Config Files 2 * Overview * Gatsby Config APIs * Gatsby Node APIs * Additional Guides 6 * Functions 3 * Overview * Getting Started * Routing * Middleware & Helpers * GraphQL Data Layer 4 * Overview * GraphQL Query API * GraphQL Query Options Reference * Customizing the GraphQL Schema * GraphQL Fragments * Additional Guides 2 * Rendering Options 2 * Overview * Deferred Static Generation (DSG) * Server-Side Rendering (SSR) * Release Notes 15 Gatsby is powered by the amazing Gatsby community and Gatsby, the company. * Gatsby Github * Gatsby Youtube Subscribe to our newsletter Subscribe * Business Email: Submit * OPEN SOURCE * Documentation * Quick Start * Tutorials * How-To Guides * Reference Guides * Conceptual Guides * Gatsby CLI * Github * FEATURES * Comparison * Plugins * Themes * Recipes * Starters * Use Cases * COMMUNITY * Contributing * Swag Store * Code of Conduct * Style Guide * Live Streams * EVENTS * Webinars * GatsbyConf 2022 © 2023 Gatsby, Inc. Accessibility StatementBrand Guidelines Terms of UsePrivacy Policy