Astro JS - Project Structure

---

---

Astro Project Structure

Every JavaScript framework has it own structure of project. In Astro, the project structure is very similar to Next JS. The main difference is that Astro uses `src` folder instead of `pages` folder and .astro file extension instead of .jsx file extension. Let see an example of Astro project structure.

Example Project Tree

After setting up an astro project, your directory will look like this:

astro-project
     /public/
        robots.txt
        favicon.svg
     /src/
        /blog/
           post1.md
        /components/
           Button.jsx
        /images/
        /layouts/
           PostLayout.astro
        /pages/
           /posts/
              index.astro
        /styles/
    |
     astro.config.mjs
     package.json
     tsconfig.json

Directories and Files

• src/* - Stores the source code of your project (components, pages, styles, images, etc.)
• public/* - Used to store non-code entities such as, unprocessed assets (fonts, icons, etc.)
• package.json - The project manifest.
• astro.config.mjs - The Astro configuration file.
• tsconfig.json - The TypeScript configuration file.

The src/ Folder

The src/ folder is where you should store all of your source code. Astro processes, optimizes, and bundles files in `src/` to create the final website that is shipped to the browser. Some files like astro components are not even sent to browser, they are used at build time to generate the static HTML files. Some other files like CSS, are sent to browser after optimizing and bundling with other files. The `src/` folder stores following folders and files.

• pages/* - Stores pages responsible for routing and data loading etc..
• layouts/* - Stores layout, which are the reusable UI structure.
• components/* - Stores astro components.
• images/* - Folder to store images.
• styles/* - Folder to store CSS files.
• markdown files - Markdown file can be stored at any location inside src folder with .md extension.

The public/ Folder

The public/ directory is used to store files and assets in your project that do not need to be processed during Astros build process. The files in this folder will be copied into the build folder untouched, and then your site will be built. This mechanism allows you to store common assets that do not require any processing, like some images and fonts, or special files such as robots.txt and manifest.webmanifest. You can also place CSS and JavaScript files here, but that will not be bundled and optimized by Astro.

The package.json File

The package.json file is used to store metadata about your project, such as the project name, version, and dependencies. Astro uses this file to install dependencies and run commands. You can also use this file to store configuration settings for your project.

{
    "name": "astro-example",
    "type": "module",
    "version": "0.0.1",
    "scripts": {
        "dev": "astro dev",
        "build": "astro build",
        "preview": "astro preview",
        "astro": "astro"
    },
    "dependencies": {
        "astro": "^5.3.0"
    }
}

The astro.config.mjs File

The astro.config.mjs file is used to configure your Astro project. It allows you to set options such as the output directory, the public directory, and the dev server settings. You can also use this file to define custom commands and scripts for your project.

// @ts-check
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({});

The tsconfig.json File

The tsconfig.json file is used to configure the TypeScript compiler for your project. It allows you to specify the compiler options, include paths, and other settings for your TypeScript code. You can also use this file to define custom TypeScript configurations for your project.

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"]
}