AviDuda / nx-gatsby-vercel

Nx + Gatsby + Vercel starter

An example Nx monorepo with Gatsby hosted on Vercel.

The @nrwl/gatsby NX plugin is deprecated and doesn't have any useful README anymore.
Generators aren't really needed - you just need to take care of changing paths in app's project.json.

Getting started

1. Install a package manager, like pnpm or Yarn (examples use Yarn).

2. Run yarn or equivalent to install dependencies.

3. Run yarn nx run first dev (or second depending on what you want to work on).
   Or run yarn run-many dev to run all dev servers at once.

4. Go to:

• First site: http://localhost:8000
• Second site: http://localhost:8001

What's included

• Multiple Gatsby sites using Nx monorepo approach.
• TypeScript with custom paths
• styled-components
• ESLint with various rules, see eslintrc.js
• Jest for testing
• Cypress for end-to-end testing

Monorepo details

This is a monorepo using Nx.

• /apps directory is for different websites.
• /libs directory is for shared libraries.

Useful monorepo commands

• Run a target for all projects: yarn run-many <target name> (e.g. build)
  • Run a dev server for all projects: yarn run-many dev
  • Build all projects: yarn run-many build
• Lint: yarn run-many lint (but yarn run lint works too)
• Typechecking: yarn run typecheck (can add --watch)
• Print affected projects since the last commit: yarn nx print-affected --base=main --head=HEAD --target=build --select=tasks.target.project

Customization

Changing TSConfig paths

• Change paths in tsconfig.base.json.
• Change the importInternalTSConfigPathsRegex regex in eslintrc.js

Changing app ports

Look in apps/<app>/.env and in apps/<app-e2e>/.env for the PORT environment variable. You can also override it in apps/<app>/.local.env (see docs). You will also need to change the port option for the serve target in apps/<app>/project.json.

Vercel deployment

Gatsby

1. Add a new project on Vercel
2. Override the Build Command: nx run <app>:build:production-remote
3. Override the Output Directory: apps/<app>/public
4. Deploy the project
5. Go to Settings -> Git and set the Ignored Build Step to npx nx-ignore <app>