Exploring the Build Process and Customization
Explore the Astro build process including creating production-ready static bundles and customizing output. Learn to use Astro's integration hooks to access build details and change build behaviors, enabling tailored optimizations and extensions such as sitemap generation.
We'll cover the following...
Astro comes with its own build command that automatically optimizes Astro components for a production-ready environment. In this lesson, we’ll take a look at how to build an Astro project to create production-ready bundles and how to change build-related configurations.
Building the project
To build an Astro project, we can use the astro build command. This command is automatically created for new Astro projects, so we can execute it by running npm run build. Try building the project below by running npm run build inside the terminal.
This command will build all pages into static HTML files that are generated into a dist folder. We can change the build directory by specifying the outDir property in our astro.config.mjs file. Try updating the configuration file according to the following example and rerun the npm run build command to verify that the bundle is generated into a different folder—called build—at the root ...