Netlify.com Homepage Netlify Docs

Contact

Common configurations

This page describes commonly used build settings and other configuration tips for several popular build tools and project architectures. Your particular settings may be different.

For more build configuration advice and to ask questions of your own, visit our Support Forums.

# JavaScript SPAs

Most JavaScript single-page apps (SPAs) declare a build command in the scripts array of the project’s package.json file. To run this script in Netlify, set the Build command to npm run {YOUR_BUILD_SCRIPT} or yarn {YOUR_BUILD_SCRIPT}, depending on your chosen JavaScript dependency manager.

The Publish directory for single-page apps is often called dist, but varies by framework and build tool. You can check the framework documentation, or try running the build script locally, then check to see what folder was created as a result.

Avoid 404s

If your app uses history pushstate to get clean URLs, you must add a rewrite rule to serve the index.html file no matter what URL the browser requests.

# Monorepos

If you work with a codebase that’s configured as a monorepo, you can build on Netlify. Our docs provide setup recommendations for building from a subdirectory or monorepo as well as information on controlling whether or not builds run using an ignore command.

# 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

# Create React App

You can get started with our docs about 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: npm run build or yarn build
  • Publish directory: build

# Next.js

Netlify’s buildbot can build and deploy all types of Next.js apps to our platform. You can learn more about using Next.js on Netlify in our docs.

For apps that require server-side rendering, we provide the Essential Next.js build plugin. This plugin enables server-side rendering through serverless functions and unlocks other framework-specific features for your Next.js application on Netlify.

The typical build settings are as follows. They differ depending on how your site is generated.

  • For apps that use static HTML export:

    • Build command: next build && next export
    • Publish directory: out

  • For apps that use server-side rendering and the Essential Next.js plugin:

    • Build command: next build
    • Publish directory: out

# Hugo

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

# 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

# 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

# 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: npm run build or yarn build
  • Publish directory: dist

# VuePress

The VuePress docs include instructions for deploying VuePress to Netlify. The typical build settings are as follows:

  • Build command: npm run docs:build or yarn docs:build
  • Publish directory: docs/.vuepress/dist

# 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

# 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
  • Using Angular Universal for prerendering:
    • Build command: npm run prerender
    • Publish directory: dist/YOUR_PROJECT_NAME/browser
  • Using Scully:
    • Build command: ng build —prod && npm run scully
    • Publish directory: dist/static

# Hexo

The Hexo docs include instructions for deploying Hexo to Netlify. The typical build settings are as follows:

  • Build command: hexo generate
  • Publish directory: public

# 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

# 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

# Grunt

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