[!NOTE] This repo is from an archived version of the course. Watch the latest version of the course on frontendmasters.com.
In this course, learn to build blazing fast apps and websites with React using Gatsby, a static PWA (Progressive Web App) generator. Over 50% of people will abandon a mobile site if it takes more than 3 seconds to load. Unless you’re willing to give up half of your potential customers, performance is no longer optional on the modern web. Fortunately, there are a lot of tools available to help you build screaming fast websites. Unfortunately, there’s a frighteningly large number of performance considerations, and many of them are easy to get wrong.
We recommend getting the code running on your computer to build your confidence working with Gatsby. If you get stuck, use the Course Errata below to debug, or refer to the the step branches to see what is different between your code and the reference code.
You can jump into the CodeSandbox for each branch without having to get the code running on your computer. Keep in mind, that if you want to modify the code, you'll need to create a CodeSandbox free account to fork a new sandbox and save it to your CodeSandbox account.
For windows users, go through the installation instructions for cross-env and add it to your package.json
develop script.
npm install
npm run develop
Course Slides (hit the right/down arrow keys to progress through the slides)
Refer to the Course Errata below if you are running into issues.
npm install -g gatsby-cli
gatsby-mdx
plugin was deprecated in favor of gatsby-plugin-mdx
.Fixed code: See this commit to migrate to gatsby-plugin-mdx
npm install gatsby-plugin-mdx
instead of gatsby-mdx
View the step4/mdx-blog
branch for final code for the section.
gatsby-remark-images
.Fixed code: See this commit to configure gatsby-remark-images'
{
resolve: 'gatsby-plugin-mdx',
options: {
defaultLayouts: {
default: require.resolve('./src/components/layout.js'),
},
gatsbyRemarkPlugins: ['gatsby-remark-images'],
plugins: ['gatsby-remark-images'],
},
},
View the step6/blog-images
branch for final code for the section.
body
to be nested in code
in the queryin post.js
the query should be
export const query = graphql`
query($slug: String!) {
mdx(frontmatter: { slug: { eq: $slug } }) {
frontmatter {
title
author
}
body
}
}
`
Instead of
export const query = graphql`
query($slug: String!) {
mdx(frontmatter: { slug: { eq: $slug } }) {
frontmatter {
title
author
}
code {
body
}
}
}
More details in issue #27