> ## Documentation Index
> Fetch the complete documentation index at: https://docs.morph-data.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Framework Overview

Morph is a framework for building web applications using Python and Markdown. You can build the backend of the application with **Python** and the frontend with **Markdown**.

## Directory Structure

The directory structure of the framework is as follows:

```bash workdir theme={"dark"}
.
├── src
│   ├── pages/
│   ├── python/
│   └── sql/
├── .env
├── Dockerfile
└── morph_project.yml
```

* `src` ... Directory to place the source code of the data application
  * `pages` ... Directory to place the frontend MDX files
  * `python` ... Directory to place the backend Python files
  * `sql` ... Directory to place the backend SQL files
* `.env` ... File to set environment variables
* `Dockerfile` ... File to build the data application as a Docker container
* `morph_project.yml` ... File to describe the project settings. The framework recognizes the directory where `morph_project.yml` is placed as the root directory.

In addition to these, `requirements.txt` or `pyproject.toml` for managing Python packages, and `package.json` for managing JavaScript packages will be placed.

## Start the Development Server

To check the behavior of the data application, start the development server.

```bash Shell theme={"dark"}
morph serve
```

If the server starts successfully with the above command, you can access the data application by accessing `http://localhost:8080`.

## Customization

Morph provides convenient features for customizing data applications.
To check the functions and features available in SQL and Python, please refer to the [Framework Reference](/reference/ja/framework/morph-project).
For details on the MDX components available for frontend development, please refer to the [Component Reference](/data-application/ja/data-component-table).

When you are ready to share with your team, see [Deploy Guide](/docs/en/quickstart/dashboard-setup).

<CardGroup cols={2}>
  <Card title="Alias" icon="square-1" href="/docs/ja/develop/guides/alias">
    Learn about aliases, a concept that spans the entire Morph framework.
  </Card>

  <Card title="Building the Backend" icon="square-2" href="/docs/ja/develop/guides/building-backend">
    Learn how to build the backend with Python.
  </Card>

  <Card title="Building the Frontend" icon="square-3" href="/docs/ja/develop/guides/building-frontend">
    Learn how to build the frontend with Markdown.
  </Card>

  <Card title="Environment Variables" icon="square-4" href="/docs/ja/develop/guides/environment-variables">
    Manage secret information with environment variables.
  </Card>

  <Card title="Connecting to DB/SaaS" icon="square-5" href="/docs/ja/develop/guides/integration">
    Build data applications that access DBs and SaaS.
  </Card>

  <Card title="Using Variables" icon="square-6" href="/docs/ja/develop/guides/variables">
    Customize the behavior of the data application based on user input.
  </Card>

  <Card title="Role-Based Access Control" icon="square-7" href="/docs/ja/develop/guides/user-role">
    Customize data access control and application behavior by utilizing user project roles.
  </Card>
</CardGroup>