Skip to content

Commit

Permalink
chore(docs): add http to localhost (#28896)
Browse files Browse the repository at this point in the history
  • Loading branch information
muescha committed Jan 6, 2021
1 parent 247b1dc commit a2d0ef8
Show file tree
Hide file tree
Showing 6 changed files with 15 additions and 15 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
}
```

The above code block creates a node called `"Test Node"` as seen from the `title` parameter. If this process is successful restarting the server will make the `allTestNode` query available at `localhost:8000/___graphql`.
The above code block creates a node called `"Test Node"` as seen from the `title` parameter. If this process is successful restarting the server will make the `allTestNode` query available at `http://localhost:8000/___graphql`.

> Libraries like [Axios](https://www.npmjs.com/package/axios) can be used to handle calls in the `gatsby-node.js` file
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@ exports.sourceNodes = async ({
// ...
```
You can read about each of the packages that are working together in [Apollo's docs](https://www.apollographql.com/docs/react/). The end result is creating a `client` that you can use to call methods like `query` to get data from the source it's configured to work with. In this case, that is `localhost:4000` where you should have the API running. If you can't configure the API to run locally, you can update the URLs for the client to use `gatsby-source-plugin-api.glitch.me` where a version of the API is deployed, instead of `localhost:4000`.
You can read about each of the packages that are working together in [Apollo's docs](https://www.apollographql.com/docs/react/). The end result is creating a `client` that you can use to call methods like `query` to get data from the source it's configured to work with. In this case, that is `http://localhost:4000` where you should have the API running. If you can't configure the API to run locally, you can update the URLs for the client to use `gatsby-source-plugin-api.glitch.me` where a version of the API is deployed, instead of `http://localhost:4000`.

#### Query data from the API

Expand Down Expand Up @@ -924,8 +924,8 @@ You can test that this is working by running the site again and updating one of
Follow these steps to test it out:
1. Open up your site at `localhost:8000` after you run `gatsby develop`
2. Open up the GraphQL playground at `localhost:4000` (if you are running the `api` folder locally) or `https://gatsby-source-plugin-api.glitch.me/` and first run a query for posts:
1. Open up your site at `http://localhost:8000` after you run `gatsby develop`
2. Open up the GraphQL playground at `http://localhost:4000` (if you are running the `api` folder locally) or `https://gatsby-source-plugin-api.glitch.me/` and first run a query for posts:

```graphql
query {
Expand Down
2 changes: 1 addition & 1 deletion docs/tutorial/using-multiple-themes-together.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ module.exports = {
gatsby develop
```

4. Checkout `localhost:8000` to see what is currently there.
4. Checkout `http://localhost:8000` to see what is currently there.

## Add content

Expand Down
10 changes: 5 additions & 5 deletions examples/creating-source-plugins/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,23 @@ _Note: if you aren't using yarn, you can navigate into each of the 3 folders and

Then you can run the api or example projects in separate terminal windows with the commands below.

For the API which runs at `localhost:4000`, use this command:
For the API which runs at `http://localhost:4000`, use this command:

```
yarn workspace api start
```

And to run the example site with `gatsby develop` at `localhost:8000`, use this command:
And to run the example site with `gatsby develop` at `http://localhost:8000`, use this command:

```
yarn workspace example-site develop
```

Running the example site also runs the plugin because it is included in the site's config. You'll see output in the console for different functionality and then can open up the browser to `localhost:8000` to see the site.
Running the example site also runs the plugin because it is included in the site's config. You'll see output in the console for different functionality and then can open up the browser to `http://localhost:8000` to see the site.

## Developing and Experimenting

You can open up `localhost:4000` with the API running, which will load a GraphQL Playground, which is a GraphQL IDE (like GraphiQL, that Gatsby runs at `localhost:8000/___graphql`) for running queries and mutations on the data from the API.
You can open up `http://localhost:4000` with the API running, which will load a GraphQL Playground, which is a GraphQL IDE (like GraphiQL, that Gatsby runs at `http://localhost:8000/___graphql`) for running queries and mutations on the data from the API.

You can test a query like this to see data returned:

Expand All @@ -53,7 +53,7 @@ query {

This query will return the IDs for all posts in the API. You can copy one of these IDs and provide it as an argument to a mutation to update information about that post.

You can run 3 different mutations from the GraphQL Playground (at `localhost:4000`): `createPost`, `updatePost`, and `deletePost`. These methods would mimic CRUD operations happening on the API of the data source like a headless CMS. An example `updatePost` mutation is outlined below.
You can run 3 different mutations from the GraphQL Playground (at `http://localhost:4000`): `createPost`, `updatePost`, and `deletePost`. These methods would mimic CRUD operations happening on the API of the data source like a headless CMS. An example `updatePost` mutation is outlined below.

When you run a mutation on a post, a subscription event is published, which lets the plugin know it should respond and update nodes. The following mutation can be copied into the left side of the GraphQL playground so long as you replace "post-id" with a value returned for an ID from a query (like the one above).

Expand Down
8 changes: 4 additions & 4 deletions packages/gatsby-admin/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Or in the `scripts` section of your `package.json`:
}
```

Once you run `gatsby develop` with the flag enabled, you can visit `localhost:8000/___admin` to view Admin for your Gatsby site!
Once you run `gatsby develop` with the flag enabled, you can visit `http://localhost:8000/___admin` to view Admin for your Gatsby site!

![Gatsby Admin homepage showing a list of installed plugins, as well as a search input to search for plugins to install](https://user-images.githubusercontent.com/7525670/95580804-36df9200-0a38-11eb-80a7-fbd847a13da1.png)

Expand Down Expand Up @@ -58,7 +58,7 @@ It also listens to the [`gatsby develop` status server](https://github.com/gatsb

To discover where they are (and whether they are already running) there is a service discovery mechanism in `gatsby-core-utils`. It stores the ports of the running Gatsby site(s) at `~/.config/gatsby/sites/<pathhash>/<servername>.json`.

Admin can then fetch `localhost:8000/___services` (where `:8000` is the well-known port of the running site), which returns a list of all the random ports used by the site:
Admin can then fetch `http://localhost:8000/___services` (where `:8000` is the well-known port of the running site), which returns a list of all the random ports used by the site:

```
$ curl http://localhost:8000/___services | jq
Expand All @@ -75,7 +75,7 @@ $ curl http://localhost:8000/___services | jq
}
```

That's how the Admin frontend knows to connect to `localhost:50400/graphql` to connect to the GraphQL server, and `localhost:60731` to connect to the develop status server.
That's how the Admin frontend knows to connect to `http://localhost:50400/graphql` to connect to the GraphQL server, and `http://localhost:60731` to connect to the develop status server.

#### Production Deployment

Expand Down Expand Up @@ -111,4 +111,4 @@ $ gatsby-dev --packages gatsby gatsby-cli gatsby-recipes gatsby-core-utils gatsb
$ GATSBY_EXPERIMENTAL_ENABLE_ADMIN=true gatsby develop
```

Then visit `localhost:8000/\_\_\_admin` and you should see Gatsby Admin for your site!
Then visit `http://localhost:8000/\_\_\_admin` and you should see Gatsby Admin for your site!
2 changes: 1 addition & 1 deletion packages/gatsby-design-tokens/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -242,4 +242,4 @@ with
const header = system
```
and you should see `Futura PT` turning into `system-ui` within a few moments on your `localhost:8000`.
and you should see `Futura PT` turning into `system-ui` within a few moments on your `http://localhost:8000`.

0 comments on commit a2d0ef8

Please sign in to comment.