NxGatsby

It's no possible to upgrade to the Gatsby v3 right now, because the nx gatsby plugin (code) doesn't support it

[GitHub] nrwl/gatsby - Update to gatsby version 3.0.1 #41

[GitHub] nrwl/nx - Gatsby v3.0.0 Support #4966

Goal

• check how the Gatsby works with Nx

Documentation

• Nx

  • Nx Gatsby Plugin

• Project creation commands (steps)

Project dependency graph

implicit - means some sort of manual configuration

Findings

• at the first try it's possible to add the Gatsby site inside of the nx workspace, the only point until now was to add the support to the project it was needed to run the following command:

npm i --save-dev @nrwl/gatsby gatsby-cli

• to run the gatsby generate site inside of the nx workspace you should use the command:

nx serve <generated-site-name> (on this example it was gatsby)

• when I tried to run the lint over the e2e tests of the gatsby I notice a wrong configuration on the workspace.json which was set to the apps/gatsby-e2e, where it should use the same lint runner as the apps/gatsby

• when I runned the lint over the apps/gatsby I get some warning messages, to remove them, I needed to change the lint configuration on the workspace.json to ignore the apps/gatsby/public folder

• using the Gatsby inside of the Nx workspace it's basically like have 2 react applications, nothing special was notice to be able to use it

• to map the libs/assets into the gatsby application it was needed some extra manual steps because the gatsby doesn't supports the baseUrl from the tsconfig.base.json

Links

• React

  • React Router

• Gatsby

  • Gatsby Docs

  • gatsby-plugin-typescript - caveats

  • gatsby-plugin-root-import

  • gatsby-source-filesystem

  • Sourcing from the Filesystem

• Nx: Extensible Dev Tools for Monorepos (React)

  • Plugins | Nx Docs

  • [YouTube] Nx: Extensible Dev Tools for Monorepos (React)

  • [YouTube] Nx Tutorial: High Quality React apps with Nx, Storybook & Cypress

  • Gatsby support, custom workspace layouts, and more in Nx 9.4! | Nrwl

  • Gatsby Plugin for Nx | NPM package

  • [GitHub] nrwl/gatsby - Nx plugin for Gatsby

  • Storybook

  • [YouTube] Nx Tutorial: Nx Storybook Integration

  • How to Use Storybook in an Nx Repo | Nx Docs

  • Storybook support, run-many command, UI improvements, and more in Nx 8.8 | Nrwl

  • Nx 8.8: Now You Can Write UI Tests with Storybook and Cypress | Nrwl

  • Creating a Storybook instance including stories from multiple libraries in a Nrwl Nx workspace

    • [GitHub] juristr/nx-shared-storybook

  • Powering Up React Development With Nx | Nrwl

  • React Microfrontends and Monorepos: A Perfect Match | Nrwl - demo | code

Development tip

• to make my life easier I have the current node_modules from the project mapped to the PATH env variable, that enables me to run the command nx directly, if you don't have if you must use the short cut mapped on the package.json, using it like npm run nx ... or it's also possible to use like npx nx ... (the npx will look into the local installed packages ./node_modules/ and on the global installed packages)

  • ./node_modules/.bin

Known Gatsby TypeScript support limitation

• gatsby-plugin-typescript caveats

  Does not support baseUrl. Workaround: use gatsby-plugin-root-import and configure it to point the baseUrl value (also set baseUrl option in tsconfig.json file).

Known issues on MacOS

• How to fix the Node gyp Error: No Xcode or CLT version detected | Reactgo