Morph provides a framework equipped with features for building flexible and full-stack data apps. In this “Building a Data App”, we explain how to use these features and customize the behavior of data apps.

In the Morph framework, the backend is built with SQL and Python, and the frontend is built with MDX. The directory structure of the framework is as the followings. Various settings can be made in morph_project.yml, and the framework recognizes the directory where morph_project.yml is located as the root directory of the framework.

workdir
.
├── src
│   ├── pages/
│   ├── python/
│   └── sql/
├── .env
├── package.json
├── requirements.txt
├── poetry.toml
├── Dockerfile
└── morph_project.yml

Building the Backend

You can build the backend by implementing functions using SQL and Python. You can combine functions in the framework to build complex pipelines using function names. Also, since the API is automatically generated from the function name, you can use the function name as an alias of the API when building the frontend.

Function names can be named as follows.

  • SQL: Set it like config(name="func_name"). If not set, the file name without the extension will be used as the function name. (e.g. example_data.sql -> example_data)
  • Python: Set it like @morph.func(name="func_name"). If not set, the function name will be used as the function name.

You can build a pipeline by specifying the function name in load_data.

Running/Testing SQL,Python

You can run and test the data pipeline by the morph run command.

Shell
morph run example_sql_cell

Building the Frontend

You can build the frontend by placing MDX files in the pages directory.

You can use the execution result of the data pipeline by specifying the function name in the loadData property of the component defined in the MDX file.

MDX (pages/index.mdx)
# Starter App

Morph is a full-stack framework for building data apps using Python, SQL and MDX.

## Data

<Grid cols="2">
  <div>
    <DataTable loadData="example_data" height={300} />
  </div>
  <div>
    <Embed loadData="example_chart" height={300} />
  </div>
</Grid>

Starting the Development Server

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

Shell
morph serve

You can access the data app by accessing http://localhost:8080 after the server is successfully started.

More Customization

Morph provides more convenient features for customizing data apps. To check the functions and features available in SQL and Python, see Framework Reference. For details on MDX components available for frontend development, see Component Reference.

When you are ready to share with your team, see Deploy Guide.