Configuration Reference
The following reference covers all supported configuration options in Astro. To learn more about configuring Astro, read our guide on Configuring Astro.
import { defineConfig } from 'astro/config'
export default defineConfig({
// your configuration options here...
})
Top-Level Options
Section titled Top-Level OptionsType: string
CLI: --root
Default: "."
(current working directory)
You should only provide this option if you run the astro
CLI commands in a directory other than the project root directory. Usually, this option is provided via the CLI instead of the Astro config file, since Astro needs to know your project root before it can locate your config file.
If you provide a relative path (ex: --root: './my-project'
) Astro will resolve it against your current working directory.
Examples
Section titled Examples{
root: './my-project-directory'
}
$ astro build --root ./my-project-directory
srcDir
Section titled srcDirType: string
Default: "./src"
Set the directory that Astro will read your site from.
The value can be either an absolute file system path or a path relative to the project root.
{
srcDir: './www'
}
publicDir
Section titled publicDirType: string
Default: "./public"
Set the directory for your static assets. Files in this directory are served at /
during dev and copied to your build directory during build. These files are always served or copied as-is, without transform or bundling.
The value can be either an absolute file system path or a path relative to the project root.
{
publicDir: './my-custom-publicDir-directory'
}
outDir
Section titled outDirType: string
Default: "./dist"
Set the directory that astro build
writes your final build to.
The value can be either an absolute file system path or a path relative to the project root.
{
outDir: './my-custom-build-directory'
}
See Also:
- build.server
Type: string
Your final, deployed URL. Astro uses this full URL to generate your sitemap and canonical URLs in your final build. It is strongly recommended that you set this configuration to get the most out of Astro.
{
site: 'https://www.my-site.dev'
}
Type: string
The base path to deploy to. Astro will use this path as the root for your pages and assets both in development and in production build.
In the example below, astro dev
will start your server at /docs
.
{
base: '/docs'
}
When using this option, all of your static asset imports and URLs should add the base as a prefix. You can access this value via import.meta.env.BASE_URL
.
<a href="/docs/about/">About</a>
<img src=`${import.meta.env.BASE_URL}/image.png`>
trailingSlash
Section titled trailingSlashType: 'always' | 'never' | 'ignore'
Default: 'ignore'
Set the route matching behavior of the dev server. Choose from the following options:
'always'
- Only match URLs that include a trailing slash (ex: “/foo/“)'never'
- Never match URLs that include a trailing slash (ex: “/foo”)'ignore'
- Match URLs regardless of whether a trailing ”/” exists
Use this configuration option if your production host has strict handling of how trailing slashes work or do not work.
You can also set this if you prefer to be more strict yourself, so that URLs with or without trailing slashes won’t work during development.
{
// Example: Require a trailing slash during development
trailingSlash: 'always'
}
See Also:
- build.format
adapter
Section titled adapterType: AstroIntegration
Deploy to your favorite server, serverless, or edge host with build adapters. Import one of our first-party adapters for Netlify, Vercel, and more to engage Astro SSR.
See our Server-side Rendering guide for more on SSR, and our deployment guides for a complete list of hosts.
import netlify from '@astrojs/netlify/functions';
{
// Example: Build for Netlify serverless deployment
adapter: netlify(),
}
See Also:
- output
output
Section titled outputType: 'static' | 'server'
Default: 'static'
Specifies the output target for builds.
- ‘static’ - Building a static site to be deploy to any static host.
- ‘server’ - Building an app to be deployed to a host supporting SSR (server-side rendering).
import { defineConfig } from 'astro/config';
export default defineConfig({
output: 'static'
})
See Also:
- adapter
Build Options
Section titled Build Optionsbuild.format
Section titled build.formatType: ('file' | 'directory')
Default: 'directory'
Control the output file format of each page.
- If ‘file’, Astro will generate an HTML file (ex: “/foo.html”) for each page.
- If ‘directory’, Astro will generate a directory with a nested
index.html
file (ex: “/foo/index.html”) for each page.
{
build: {
// Example: Generate `page.html` instead of `page/index.html` during build.
format: 'file'
}
}
Effect on Astro.url
Section titled Effect on Astro.urlSetting build.format
controls what Astro.url
is set to during the build. When it is:
directory
- TheAstro.url.pathname
will include a trailing slash to mimic folder behavior; ie/foo/
.file
- TheAstro.url.pathname
will include.html
; ie/foo.html
.
This means that when you create relative URLs using new URL('./relative', Astro.url)
, you will get consistent behavior between dev and build.
build.client
Section titled build.clientType: string
Default: './dist/client'
Controls the output directory of your client-side CSS and JavaScript when output: 'server'
only.
outDir
controls where the code is built to.
This value is relative to the outDir
.
{
output: 'server',
build: {
client: './client'
}
}
build.server
Section titled build.serverType: string
Default: './dist/server'
Controls the output directory of server JavaScript when building to SSR.
This value is relative to the outDir
.
{
build: {
server: './server'
}
}
build.assets
Section titled build.assetsType: string
Default: '_astro'
Specifies the directory in the build output where Astro-generated assets (bundled JS and CSS for example) should live.
{
build: {
assets: '_custom'
}
}
See Also:
- outDir
build.serverEntry
Section titled build.serverEntryType: string
Default: 'entry.mjs'
Specifies the file name of the server entrypoint when building to SSR. This entrypoint is usually dependent on which host you are deploying to and will be set by your adapter for you.
Note that it is recommended that this file ends with .mjs
so that the runtime
detects that the file is a JavaScript module.
{
build: {
serverEntry: 'main.mjs'
}
}
Server Options
Section titled Server OptionsCustomize the Astro dev server, used by both astro dev
and astro preview
.
{
server: { port: 1234, host: true}
}
To set different configuration based on the command run (“dev”, “preview”) a function can also be passed to this configuration option.
{
// Example: Use the function syntax to customize based on command
server: (command) => ({ port: command === 'dev' ? 3000 : 4000 })
}
server.host
Section titled server.hostType: string | boolean
Default: false
Set which network IP addresses the server should listen on (i.e. non-localhost IPs).
false
- do not expose on a network IP addresstrue
- listen on all addresses, including LAN and public addresses[custom-address]
- expose on a network IP address at[custom-address]
(ex:192.168.0.1
)
server.port
Section titled server.portType: number
Default: 3000
Set which port the server should listen on.
If the given port is already in use, Astro will automatically try the next available port.
{
server: { port: 8080 }
}
server.headers
Section titled server.headersType: OutgoingHttpHeaders
Default: {}
Set custom HTTP response headers to be sent in astro dev
and astro preview
.
Markdown Options
Section titled Markdown Optionsmarkdown.drafts
Section titled markdown.draftsType: boolean
Default: false
Control whether Markdown draft pages should be included in the build.
A Markdown page is considered a draft if it includes draft: true
in its frontmatter. Draft pages are always included & visible during development (astro dev
) but by default they will not be included in your final build.
{
markdown: {
// Example: Include all drafts in your final build
drafts: true,
}
}
markdown.shikiConfig
Section titled markdown.shikiConfigType: Partial<ShikiConfig>
Shiki configuration options. See the Markdown configuration docs for usage.
markdown.syntaxHighlight
Section titled markdown.syntaxHighlightType: 'shiki' | 'prism' | false
Default: shiki
Which syntax highlighter to use, if any.
shiki
- use the Shiki highlighterprism
- use the Prism highlighterfalse
- do not apply syntax highlighting.
{
markdown: {
// Example: Switch to use prism for syntax highlighting in Markdown
syntaxHighlight: 'prism',
}
}
markdown.remarkPlugins
Section titled markdown.remarkPluginsType: RemarkPlugins
Pass remark plugins to customize how your Markdown is built. You can import and apply the plugin function (recommended), or pass the plugin name as a string.
import remarkToc from 'remark-toc';
{
markdown: {
remarkPlugins: [remarkToc]
}
}
markdown.rehypePlugins
Section titled markdown.rehypePluginsType: RehypePlugins
Pass rehype plugins to customize how your Markdown’s output HTML is processed. You can import and apply the plugin function (recommended), or pass the plugin name as a string.
import rehypeMinifyHtml from 'rehype-minify';
{
markdown: {
rehypePlugins: [rehypeMinifyHtml]
}
}
markdown.gfm
Section titled markdown.gfmType: boolean
Default: true
Astro uses GitHub-flavored Markdown by default. To disable this, set the gfm
flag to false
:
{
markdown: {
gfm: false,
}
}
markdown.smartypants
Section titled markdown.smartypantsType: boolean
Default: true
Astro uses the SmartyPants formatter by default. To disable this, set the smartypants
flag to false
:
{
markdown: {
smartypants: false,
}
}
markdown.remarkRehype
Section titled markdown.remarkRehypeType: RemarkRehype
Pass options to remark-rehype.
{
markdown: {
// Example: Translate the footnotes text to another language, here are the default English values
remarkRehype: { footnoteLabel: "Footnotes", footnoteBackLabel: "Back to content"},
},
};
Integrations
Section titled IntegrationsExtend Astro with custom integrations. Integrations are your one-stop-shop for adding framework support (like Solid.js), new features (like sitemaps), and new libraries (like Partytown and Turbolinks).
Read our Integrations Guide for help getting started with Astro Integrations.
import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';
{
// Example: Add React + Tailwind support to Astro
integrations: [react(), tailwind()]
}
Pass additional configuration options to Vite. Useful when Astro doesn’t support some advanced configuration that you may need.
View the full vite
configuration object documentation on vitejs.dev.
Examples
Section titled Examples{
vite: {
ssr: {
// Example: Force a broken package to skip SSR processing, if needed
external: ['broken-npm-package'],
}
}
}
{
vite: {
// Example: Add custom vite plugins directly to your Astro project
plugins: [myPlugin()],
}
}
Legacy Flags
Section titled Legacy FlagsTo help some users migrate between versions of Astro, we occasionally introduce legacy
flags.
These flags allow you to opt in to some deprecated or otherwise outdated behavior of Astro
in the latest version, so that you can continue to upgrade and take advantage of new Astro releases.