wesbos/master-gatsby

slick slices eh

Master Gatsby

A Premium JavaScript + CSS Training Course from Wes Bos. You can grab the course at MasterGatsby.com.

This repo includes the starter files, stepped solutions and sample data for doing the course.

FAQ

Q: How can I set a custom Emmet expand keyboard shortcut?

A: In VS Code, you can go to File -> Preferences -> Keyboard Shortcuts (Windows, Linux) or Code -> Preferences -> Keyboard Shortcuts (Mac). Search for Emmet Expand Abbreviation and you should see the current keyboard shortcut there. Double-click on the current key-bind to set a new keyboard shortcut. I have mine set to Ctrl + E which I really like but you can pick any combo you like!

Q: Where do I find the nice Pizza images that are used in the course?

A: The Pizza images can be found in the Sanity sample-data folder in the starter files.

Q: My data was showing perfectly fine in Gatsby a few days ago and now it isn't.

A: Many common issues such as stale data or corrupt data can be fixed by running gatsby clean in the terminal - make sure you are in the Gatsby folder in the terminal. Gatsby uses an aggressive cache that can corrupt at times so you can try to fix it by cleaning the cache out.

Q: I'm getting a npm ERR! Cannot read property 'matches' of undefined message when installing the gatsby-cli globally.

A: Node 15.x isn't yet supported and will cause that error, it's better to stick with Node 14.x for the course at the moment.

Q: I'm getting an error when starting Gatsby that says it's not finding a gatsby-source-sanity/src/gatsby-node.ts file.

A: This error appears if you have a typo in your options that you pass to the gatsby-source-sanity plugin in the gatsby-config.js file. You can compare your code against the stepped solution for that file. Check that you have the same capitilization of the options (projectId, dataset, watchMode) as it is a common cause of the issue.

Q: I'm getting a import dotenv from 'dotenv'; SyntaxError: Unexpected identifier error when starting the Gatsby server.

A: Please use the provided npm scripts to start the Gatsby server (such as npm run develop or yarn develop). Don't use the global gatsby develop command as Gatsby doesn't support using ESM imports yet. The provided npm scripts uses an esm npm package to add support for the newer import syntax.

Q: I'm getting a Error: GraphQL API not deployed error when starting the Gatsby server.

A: You need to make sure you deployed the Sanity dataset to the GraphQL API by running the sanity graphql deploy production command in your terminal before it can be used by Gatsby. Make sure that you are in the Sanity folder in your terminal when you run that command.

Q: I made a change to my Sanity content and it's not showing in Gatsby in real-time?

A: Please make sure you have the 2 options watchMode and token configured in the gatsby-source-sanity plugin. If the changes you are making to the content is unpublished and you'd like to preview that in real-time you would need to add the overlayDrafts option to your Gatsby plugin. You can read more about this in the gatsby-source-sanity readme.

Q: I made a change to my Sanity schema and it's not showing in Gatsby?

A: Changes to the schema in your local Sanity studio will not automatically change the Sanity GraphQL API, you'll have to deploy those changes by using sanity graphql deploy production. Make sure that you are in the Sanity folder in your terminal when you run that command.

Comunity Contributions

Did you blog about your experience? Do the course in Typescript? Use WordPress instead? Send us a PR with links to your implementations!

• Creating your own Gatsby Live Preview for Sanity has never been easier now with DigitalOcean App Platform.

master-gatsby's Issues

styling elements through their attributes

Typescript-styled-plugin is complaining

if i wrote smth like this -

.gatsby-image-wrapper img[src*=base64\\] {

Unfortunately, this won't work

However, i found solution -

.gatsby-image-wrapper img[${'src*=base64\\,'}] {

this will do the trick)

Footer

Slicemasters

Can Not Create Pull Request

This is most likely intentional, I was trying to submit a PR with some spelling mistake fixes but am unable to create a new branch and push.

slicemasters descriptions + styles

OG Images

File spelt wrong

File under gatsby/src/utils/calcuatePizzaPrice.js is spelt wrong..

should be gatsby/src/utils/calculatePizzaPrice.js

Slow build and hot reloading

I am an amateur and I don't know any other way to make a comment so I apologize if this is the wrong way to do it.

I realize that I am way behind in this course and a lot has changed. On my iMac running macos Big Sur, the build step for the simplest possible index.js as described in Module 2 Step 4 Pages takes a minimum of 3 - 5 minutes whereas the video makes it seem much faster. Secondly, there is no hot loading and the website does not update until the file is saved in vs code. I have followed all the steps as described in the videos, but maybe I missed something about build speed and hot loading.

Order grid for menu and order columns grid appear broken when few items present

When opening the starter files for Master Gatsby and navigating to the Order Ahead link at the /order URL if you add one item to the cart you might noticed a stretched image in the middle of the column.

You can fix this by adding a max-height: 100px (can make larger if you want items to be bigger at first) in the MenuItemStyles.

To fix the items being in the middle of the column you can add align-content: flex-start to the &.order, &.menu class in OrderStyles.js.

Before:

After:

Toppings Filter - Mushrooms appears multiple times

There's a strange issue with the Toppings Filter whereby "Mushrooms" appears multiple times. I've traced it to the fact that "Mushrooms" has two different IDs.

I would submit a PR but I'm not entirely clear on how the topping IDs are generated since they don't match what is contained in all-sample-data.gz. I assume it's Sanity that adds the ID but I might be wrong.

Toppings Filter with two "Mushrooms"

This screenshot is taken from the video itself.

When clicking either "Mushrooms" filter, the total number (5 count) items appear

Output of topping.id in countPizzasInToppings() function

The different ID's are what leads to the multiple "Mushrooms" links in the filters section

Need to deploy sanity graphql API to be able to use source plugin

Module #5 / Video #17
The video adds the gatsby-source-sanity plugin to gatsby-config. I was unable to get npm start to work after updating the file and received this error message in the terminal:

After trying a few things I visited this link: https://github.com/sanity-io/gatsby-source-sanity#basic-usage

Key sentence:
"You should redeploy the GraphQL API everytime you make changes to the schema that you want to use in Gatsby by running sanity graphql deploy from within your Sanity project directory"

I had to open up the sanity folder in the project and run the command sanity graphql deploy and the I was able to run npm start again successfully.

When beer ratings are null

My beers api response had an empty beer record, so I was getting this error:

TypeError: Cannot read property 'average' of null

With the code below.

<BeerGridStyles>
        {data.beers.nodes.map((beer) => {
          const rating = Math.round(beer.rating.average);

          return (
            <SingleBeerStyles key={beer.id}>
              <img src={beer.image} alt={beer.name} />
              <h3>{beer.name}</h3>
              {beer.price}
              <p title={`${rating} out of 5 stars`}>
                {`⭐`.repeat(rating)}
                <span style={{ filter: `grayscale(100%)` }}>
                  {`⭐`.repeat(5 - rating)}
                </span>
                <span>({beer.rating.reviews})</span>
              </p>
            </SingleBeerStyles>
          );
        })}
</BeerGridStyles>

I ended just replacing two line in the code, with the conditional code below. Not sure if this is the best solution, but it worked.

const rating = Math.round(beer.rating ? beer.rating.average : 0)

<span>({beer.rating ? beer.rating.reviews : 0})</span>

Manually Source Data somehow...

I want to show how to source data without using a plugin

Home page realtime

data needs to refresh on load client side

Implement Pagination

Why After npm run develop i have to wait 3 min to build

hi i have an issue with gatsby

un npm audit for details.
aragon@User-PC:/mnt/c/Users/Aragon/Documents/pizza/gatsby$ npm start

[email protected] start
npm run develop

[email protected] develop
cross-env NODE_OPTIONS="-r esm" gatsby develop

success onPreExtractQueries - 0.045s
success extract queries from components - 3.109s
success write out requires - 0.091s
success run static queries - 0.157s - 2/2 12.77/s
success run page queries - 0.104s - 3/3 28.73/s
⠀
You can now view slicks-slices-frontend in the browser.
⠀
http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 73.712s

ANY SOLUTION?

Netlify deploy fail

Is there anyone who can help me? I am stuck with this for a long time.

failed Building production JavaScript and CSS bundles - 52.318s
6:26:29 AM: error Generating JavaScript bundles failed
6:26:29 AM: Can't resolve 'Gatsby-image' in '/opt/build/repo/gatsby/src/templates'
6:26:29 AM: If you're trying to use a package make sure that 'Gatsby-image' is installed. If you're trying to use a local file make sure that the path is correct.
6:26:29 AM: npm ERR! code ELIFECYCLE
6:26:29 AM: npm ERR! errno 1
6:26:29 AM: npm ERR! [email protected] build: cross-env NODE_OPTIONS="-r esm" gatsby build
6:26:29 AM: npm ERR! Exit status 1
6:26:29 AM: npm ERR!
6:26:29 AM: npm ERR! Failed at the [email protected] build script.
6:26:29 AM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
6:26:29 AM: npm ERR! A complete log of this run can be found in:
6:26:29 AM: npm ERR! /opt/buildhome/.npm/_logs/2021-01-18T00_26_29_959Z-debug.log
6:26:29 AM: ​
6:26:29 AM: ────────────────────────────────────────────────────────────────
6:26:29 AM: "build.command" failed
6:26:29 AM: ────────────────────────────────────────────────────────────────
6:26:29 AM: ​
6:26:29 AM: Error message
6:26:29 AM: Command failed with exit code 1: CI= npm run build
6:26:29 AM: ​
6:26:29 AM: Error location
6:26:29 AM: In Build command from Netlify app:
6:26:29 AM: CI= npm run build
6:26:29 AM: ​
6:26:29 AM: Resolved config
6:26:29 AM: build:
6:26:29 AM: base: /opt/build/repo/gatsby
6:26:29 AM: command: CI= npm run build
6:26:29 AM: commandOrigin: ui
6:26:29 AM: environment:
6:26:29 AM: - CI
6:26:29 AM: - GATSBY_GRAPHQL_ENDPOINT
6:26:29 AM: - GATSBY_PAGE_SIZE
6:26:29 AM: - GATSBY_SERVERLESS_BASE
6:26:29 AM: - MAIL_HOST
6:26:29 AM: - MAIL_PASS
6:26:29 AM: - MAIL_USER
6:26:29 AM: - NODE_VERSION
6:26:29 AM: - SANITY_TOKEN
6:26:29 AM: functions: /opt/build/repo/gatsby/functions
6:26:29 AM: publish: /opt/build/repo/gatsby/public
6:26:30 AM: Caching artifacts

Ensure ESLint is working

Should be updated to latest version and tested with eslint 7.x

Mobile Design

typo `propery` instead of `property` in SEO.js

https://github.com/wesbos/master-gatsby/blob/master/stepped-solutions/33/SEO.js#L33

Page design

Deploy to Netlify

Order Form needs prices

Linter Errors

On Windows, I'm getting the following lint errors when writing basic React.

I think this may have to do with conflicting configs, but as far as I can see there is no associated .prettierrc file, so I'm unsure of where the conflict is coming from.

I tried overriding the rule in package.json by adding the following into my eslintConfig, but it just opened up a whole host of other linting conflicts.

"prettier/prettier": ["error", {
    "endOfLine":"auto"
  }],

Do you have a recommended .prettierrc file to use?

SEO / Meta Tags

Use cross-env and esm together for gatsby-develop on windows powershell

Here is a tricky one I can't get working. I'm using es modules for my gatsby-config.js and gatsby-node.js files. Currently they only support common JS, so I am using the esm package to use import/export syntax.

The way we require esm is by setting NODE_OPTIONS="-r esm" env variable, which requires the esm package first before running gatsby develop. To get it working on windows, we use the cross-env package.

So the command looks like this:

"develop": "cross-env NODE_OPTIONS=\"-r esm\" gatsby develop",

Works great on a mac, but with windows powershell I get Error 10123 We encountered an error while trying to load your site's gatsby-config. Please fix the error and try again.. This only happens when there is a plugins array in gatsby-config.js. Taking it out solves the problem.

So to reproduce the error:

1. Make sure you are on Node >=14
2. Clone this repo
3. Go to finished-files/gatsby
4. run npm install
5. run npm run develop

If you see GraphQL / Sanity errors, that is fine and means it worked. Don't worry about the site building, I just want to get past the above error.

Not acceptable solutions:

1. Just use a .env file - that is introduced later in the course
2. Just use WSL. I need this to work on powershell
3. Just use docker - see above
4. LOL BUY A MAC

Ideally npm run develop will work on all platforms, but I'm okay with a npm run develop:win command.

Things I've tried:

1. Using set NODE_OPTIONS="-r esm" && gatsby develop - gatsby runs in a sub-process and it doesn't seem to transfer the variable down
2. using cross-env-shell - it didn't work but not sure if I'm using it correctly.

Happy to pay $250 USD to anyone who can get it running.

ES modules

Hi. Can you help me? I have problems with ES modules & gatsby-config.
Link to failed build

Test npm start on Windows

for both gatsby and sanity folders in starter files

favicon

Error when adding gatsby-source-sanity plugin to gatsby-config

Module #5 / Video #17
The video adds the gatsby-source-sanity plugin to gatsby-config. I was unable to get npm start to work after updating the file and received this error message in the terminal:

After trying a few things I visited this link: https://github.com/sanity-io/gatsby-source-sanity#basic-usage

Key sentence:
"You should redeploy the GraphQL API everytime you make changes to the schema that you want to use in Gatsby by running sanity graphql deploy from within your Sanity project directory"

I had to open up the sanity folder in the project and run the command sanity graphql deploy and the I was able to run npm start again successfully.

Investigate Gatsby Themes

Order form needs to send an email

beer ratings doesn't exist on graphql

Video 27 when i try to restart gatsby i get this error

in API I can clearly see ratings, but not in the graphql

ERROR #85923 GRAPHQL

There was an error in your GraphQL query:

Cannot query field "rating" on type "Beer".

If you don't expect "rating" to exist on the type "Beer" it is most likely a typo.
However, if you expect "rating" to exist there are a couple of solutions to common problems:

• If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
• The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
• You want to optionally use your field "rating" and right now it is not used anywhere. Therefore Gatsby can't infer the type a
  nd add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the
mentioned "dummy content". Visit our docs to learn how you can define the schema for "Beer":

also when I remove the rating and corresponding fields I get this message, tho I do not know how to fix it.

warn There are conflicting field types in your data.

If you have explicitly defined a type for those fields, you can safely ignore this warning message.
Otherwise, Gatsby will omit those fields from the GraphQL schema.

If you know all field types in advance, the best strategy is to explicitly define them with the createTypes action, and skip
inference with the @dontInfer directive.
Beer.rating:

• type: object
  value: { average: 3.5135460961961718, reviews: 199 }
• type: string
  value: '5'

Gatsby version needs update in package.json.

You forgot to change the gatsby version in package.json. So it is still yelling the same error message in Windows. 😊

"gatsby": "^2.24.63" seems to work for me.

Move Order to context

style filters