Initialize a new Gatsby project with a gitignore in yarn workspaces

Chris Biscardi: [0:00] To get started writing code, we'll initialize a new Gatsby project in a Yarn Workspaces setup. If we initialize our project with yarn init -y and we look at the package.json, we can see that we have a basic package.json.

[0:13] We can use the code CLI to open a VS Code instance or open your preferred editor. Then open the package.json file. We'll set private to true, which is required for any Yarn Workspaces with package.json. We'll also use workspaces pointing to any npm package inside of the packages directory. We also need to create the packages directory.

[0:31] In the packages directory, we'll create a new directory called www. In www, we'll initialize a new npm package. We then need to add a couple dependencies. At minimum, we need gatsby, react and react-dom.

[0:50] You can see that our dependencies have been installed in the package.json. We'll set up a couple of scripts. The scripts we've set up are just aliases to the Gatsby build, develop is for development, build is for production and clean will remove any caches.

[1:05] We'll create an empty gatsby-config.js, [inaudible] an index.js file in src pages. From the index.js file, we'll export a React component. Now that we have this setup, we can go back to the root of our project and run yarn workspace www develop.

[1:34] ESLint has told us that we need React in scope when using JSX, which is true because JSX compiles to React.createElement() calls.

[1:45] If we visit our site in Chrome or any other browser, we can now see our <h1> tag. Having confirmed everything works, we'll add the packages directory, the package.json, and the yarn.lock. Note that this added .cache, which we don't want. The .cache folder is a folder that Gatsby creates that we don't want to check into our Git repo.

[2:04] If we run git reset packages/www/.cache, you'll see that .cache is no longer in our index, but it's still hanging around our project. To deal with this, we'll create a .gitignore file in the root of our project. We'll add .cache.

[2:20] Now, when we run git status, we no longer see .cache because it's being ignored. We'll add gitignore and note that we also have the public folder, which is another folder that Gatsby creates that we don't need checked in.

[2:33] Note that we now have far fewer files than we did before and only the ones that we want. We will git add any files that we are already tracking, which in this case is the gitignore file. You can see that the gitignore file had some modifications signified by the M and that it's added to the index signified by the A. We can now commit our first Gatsby site.

[3:02] Note that we're ahead by one commit from the remote, we'll push. Now that we've pushed, we can take advantage of hub again using git browse. Git browse sends us to our site where we can see that we've uploaded our packages.