Subchapter 20.2
references/deployment-patterns.mdMarkdown7 KBView on GitHub
Common deployment scenarios and best practices for the Netlify skill.
Is user authenticated?
├─ No → Run `netlify login`
└─ Yes → Is site linked?
├─ No → Is it a Git repo?
│ ├─ Yes → Try `netlify link --git-remote-url`
│ │ ├─ Success → Continue to deploy
│ │ └─ Fail → Run `netlify init`
│ └─ No → Run `netlify init`
└─ Yes → Is this first deploy or existing site?
├─ First deploy/new site → `netlify deploy --prod`
└─ Existing site → `netlify deploy` (preview)Context: User has a project that has never been deployed to Netlify.
Steps:
npx netlify statusnpx netlify loginnpx netlify init
npm installnpx netlify deploy --prodExample:
npx netlify status
# Not linked to a site
npx netlify login
# Opens browser for authentication
npx netlify init
# Walks through site creation
npm install
npx netlify deploy --prodContext: User has a site already on Netlify and wants to link their local repo.
Steps:
npx netlify statusgit remote show originhttps://github.com/user/repo.git)npx netlify link --git-remote-url <URL>netlify initExample:
git remote show origin
# * remote origin
# Fetch URL: https://github.com/user/my-app.git
npx netlify link --git-remote-url https://github.com/user/my-app.git
# Site linked successfullyContext: User wants to test changes before pushing to production.
Steps:
npx netlify statusnpx netlify deploynpx netlify deploy --prodExample:
# Make changes to code
npx netlify deploy
# Draft deploy URL: https://507f1f77bcf86cd799439011-my-app.netlify.app
# Test the preview, then:
npx netlify deploy --prod# Next.js typically uses .next as output
npx netlify deploy --prod
# netlify.toml should have:
# [build]
# command = "npm run build"
# publish = ".next"# Vite outputs to dist by default
npm run build
npx netlify deploy --dir=dist --prod
# netlify.toml:
# [build]
# command = "npm run build"
# publish = "dist"# No build step needed
npx netlify deploy --dir=. --prodContext: Project is in a subdirectory of a monorepo.
Steps:
cd packages/frontend[build]
base = "packages/frontend"
command = "npm run build"
publish = "dist"npx netlify deploy --prodContext: Project needs secrets or environment-specific config.
Steps:
npx netlify env:set API_KEY "secret_value"
npx netlify env:set NODE_ENV "production"process.env.API_KEYnpx netlify deploy --prodContext: User wants to use a custom domain.
Steps:
npx netlify deploy --prodnpx netlify open:admin
# Navigate to Domain settings# Deploy preview
npx netlify deploy
# Test thoroughly
# Then deploy to production
npx netlify deploy --prodCreate a netlify.toml file in your repo root:
[build]
command = "npm run build"
publish = "dist"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200This ensures consistent builds across all deployments.
Let Netlify auto-detect when possible. Only specify build settings if:
Always ensure dependencies are installed before deploying:
npm install # or yarn install, pnpm install
npx netlify deployTest builds locally before deploying:
npm run build
# Check that build output exists
npx netlify deploy --dir=distAdd context to deployments:
npx netlify deploy --prod --message="Fix login bug"Cause: Build command didn’t create expected output directory.
Fix:
npm run buildCause: Build command failed.
Fix:
npm run buildCause: Authentication token expired or missing.
Fix:
npx netlify logout
npx netlify loginCause: Project not connected to a Netlify site.
Fix:
# Try linking to existing site
npx netlify link
# Or create new site
npx netlify initEnable processing in netlify.toml for auto-optimization:
[build.processing.css]
bundle = true
minify = trueUse caching headers for static assets:
[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"Optimize images before deploying or use Netlify Image CDN
Use Netlify Functions for serverless backend (avoid external API calls when possible)