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 works as a monorepo, you can bring those workflows to Netlify. Netlify provides the ability to set up sites pointing to a specific base directory in your repository or code base. When you configure a base directory, either in the Netlify UI or a Netlify configuration file, Netlify will consider the base directory as the primary or root directory and build your site from this directory.
When a base directory is specified along with build.ignore
in netlify.toml, Netlify will execute the command you specify from that same base directory as well.
For sites created before October 3rd, 2019
If you would like to use this feature for a site that was created before October 3rd, 2019, you’ll need to re-link your repository to make this feature available for your site.
# 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. The typical build settings are as follows:
- Build command:
gatsby build
- Publish directory:
public
# Next.js
Netlify’s buildbot can build and deploy all types of Next.js apps to our platform.
For apps that require server-side rendering, we provide the Next.js Build Plugin, currently in beta. This plugin extends the Next on Netlify package to more seamlessly enable server-side rendering and other framework-specific features for your Next.js application on Netlify.
Learn more about using Next.js on Netlify in our docs, and visit our Forums to join the discussion about deploying Next.js to Netlify.
For apps that use static HTML export, the typical build settings are as follows:
- Build command:
next build && next export
- 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
# 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:
# 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
# VuePress
The VuePress docs include instructions for deploying VuePress to Netlify. The typical build settings are as follows:
- Build command:
npm run docs:build
oryarn docs:build
- Publish directory:
docs/.vuepress/dist
# 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
Did you find this doc useful?
Your feedback helps us improve our docs.