【协会动态】2017中国发展高层论坛闭幕，全...
Netlify automatically detects and configures your project based on the framework you’re using. This page describes commonly used build settings and other configuration tips for popular build tools and project architectures. Your particular settings may be different. For projects that require more advanced setup, check out common configurations for:
If you’re a framework author, the frameworks API is available to integrate your framework with Netlify.
Definitions
Section titled “Definitions”The following sections outline the typical build command and publish directory settings for popular frameworks.
-
Build command: the command to run to build your site if you are using a static site generator or other build tool. For example,
npm run build. The build command runs in the Bash shell, allowing you to add Bash-?compatible syntax to the command. -
Publish directory: directory that contains the deploy-ready HTML files and assets generated by the build. The directory is relative to the base directory, which is root by default (
/).
Angular
Section titled “Angular”Our docs provide an overview for using Angular on Netlify, while our blog post First steps using Netlify & Angular includes task-based setup instructions. The typical build settings are as follows. They differ depending on how you’ve set up your project and whether you’re using Scully, the static site generator for Angular.
- For a standard Angular project:
- Build command:
ng build --prod - Publish directory:
dist/YOUR_PROJECT_NAME
- Build command:
- Using Angular Universal for prerendering:
- Build command:
npm run prerender - Publish directory:
dist/YOUR_PROJECT_NAME/browser
- Build command:
- Using Scully:
- Build command:
ng build —prod && npm run scully - Publish directory:
dist/static
- Build command:
Our docs provide an overview for using Astro on Netlify. You can also check out our introductory blog post about Astro and SSR. The default build settings are as follows:
- Build command:
astro build - Publish directory:
dist
Create React App
Section titled “Create React App”Check out our docs overview for using Create React App on Netlify or read the instructions for deploying to Netlify in the Create React App docs. The typical build settings are as follows:
- Build command:
react-scripts build - Publish directory:
build
Eleventy
Section titled “Eleventy”Our docs provide an overview for using Eleventy on Netlify, and we have a Let’s Learn Eleventy blog post with instructions to get started with the framework. The default build settings are as follows:
- Build command:
eleventy - Publish directory:
_site
Express
Section titled “Express”Express apps can be deployed to Netlify using Netlify Functions. Our docs provide an overview for using Express on Netlify. If paired with a frontend, Express apps on Netlify do not need any specific build settings. Netlify packages and bundles your functions automatically during the build process.
Gatsby
Section titled “Gatsby”Our docs provide an overview for using Gatsby on Netlify, while the Gatsby docs include task-based instructions for deploying Gatsby sites to Netlify. For apps that use Gatsby Functions or can benefit from build caching, we provide the Essential Gatsby build plugin.
The typical build settings are as follows:
- Build command:
gatsby build - Publish directory:
public
Gridsome
Section titled “Gridsome”The Gridsome docs include instructions for deploying Gridsome to Netlify. The typical build settings are as follows:
- Build command:
gridsome build - Publish directory:
dist
We automatically provide Grunt for you in the build environment in case your build command references it. We’ll run npm install grunt-cli for you before running your build command, in case your build command contains the string grunt. The typical build settings are as follows:
- Build command:
grunt build - Publish directory:
dist
The Hexo docs include instructions for deploying Hexo to Netlify. The typical build settings are as follows:
- Build command:
hexo generate - Publish directory:
public
Our docs provide an overview of Hugo on Netlify, while the Hugo docs include task-based instructions for deploying Hugo to Netlify. The typical build settings are as follows:
- Build command:
hugo - Publish directory:
public
Hydrogen
Section titled “Hydrogen”Our docs provide an overview of how Hydrogen works on Netlify. The typical build settings are:
- Build command:
remix vite:build - Publish directory:
dist/client
Jekyll
Section titled “Jekyll”If your site is built with Jekyll, make sure you have a Gemfile and a Gemfile.lock checked into your repository, specifying the Jekyll version you want to use. The typical build settings are as follows:
- Build command:
jekyll build - Publish directory:
_site
Middleman
Section titled “Middleman”If your site is built with Middleman, make sure you have a Gemfile and a Gemfile.lock checked into your repository, specifying the Middleman version you want to use. The typical build settings are as follows:
- Build command:
middleman build - Publish directory:
build
MkDocs
Section titled “MkDocs”If you’re using MkDocs, make sure to include the dependency in a Pipfile or requirements.txt file, specifying version 0.9.0 or above. You may also need to set your Python version. The typical build settings are as follows:
- Build command:
mkdocs build - Publish directory:
site
Next.js
Section titled “Next.js”Netlify supports all major Next.js features—including App Router, SSR, ISR, middleware, image optimization, and more—with zero configuration.
Typical build settings (SSR or hybrid sites):
-
Build command:
next build -
Publish directory:
.next -
For static-only sites (using next export):
- Build command:
next build && next export - Publish directory:
out - Env var: NETLIFY_NEXT_PLUGIN_SKIP=true
- Build command:
Learn more about Next.js on Netlify.
You can get an overview in our Nuxt on Netlify doc or read the Nuxt docs for instructions on how to deploy Nuxt 2 and Nuxt 3 on Netlify. The typical build settings are as follows:
- Nuxt 3
- Build command:
nuxt build - Publish directory:
dist
- Build command:
- Nuxt 2
- Build command:
nuxt generate - Publish directory:
dist
- Build command:
Check out our docs for building on Netlify using these popular React-based frameworks: Gatsby, Next.js, React Router, Remix.
You can also get started with our docs about Create React App on Netlify.
React Router
Section titled “React Router”Our docs provide all the information you need to deploy a React Router application on Netlify. The typical build settings are as follows.
- Build command:
react-router build - Publish directory:
build/client
Our docs provide all the information you need to deploy a Remix application on Netlify. The typical build settings are as follows.
For projects built with Remix Vite:
- Build command:
remix vite:build - Publish directory:
build/client
For projects built with the Remix Classic Compiler:
- Build command:
remix build - Publish directory:
public
RedwoodJS
Section titled “RedwoodJS”The fastest way to deploy a RedwoodJS project on Netlify is to run yarn rw setup deploy netlify in your terminal at your project’s root directory. This will create a netlify.toml file that contains all the configuration you need.
For more details, check out the RedwoodJS docs for deploying to Netlify.
SvelteKit and Svelte
Section titled “SvelteKit and Svelte”Check out our docs overview for using SvelteKit on Netlify or learn more in the SvelteKit Netlify adapter README. Typical build settings are as follows.
For projects built with SvelteKit:
- Build command:
vite build - Publish directory:
build
For projects built with Svelte:
- Build command:
npm run build,pnpm build, oryarn build - Publish directory:
public
TanStack Start
Section titled “TanStack Start”Our docs share a TanStack Start app template and a special command for generating an app in your terminal. Learn more in our TanStack Start docs. Typical build settings are as follows:
- Build command:
vite build - Publish directory:
dist
Check out our docs overview for using Vite on Netlify or learn more in the Vite docs. Typical build settings are as follows:
- Build command:
vite build - Publish directory:
dist
Vue CLI
Section titled “Vue CLI”Our docs provide an overview for using the Vue CLI with Netlify, and you can also learn more in the Vue CLI docs. The typical build settings are as follows:
- Build command:
vue-cli-service build - Publish directory:
dist
VuePress
Section titled “VuePress”The VuePress docs include instructions for deploying VuePress to Netlify. The typical build settings are as follows:
- Build command:
npm run docs:buildoryarn docs:build - Publish directory:
docs/.vuepress/dist
Did you find this doc useful?
Your feedback helps us improve our docs.