In the event you are contributing to Meltano UI and want to work with all of the frontend tooling (i.e., hot module reloading, etc.), you will need to run the following commands:
# Activate your poetry created virtual environment if needed. # If you manage your virtualenv activation through other means you can omit this command. poetry shell # Create a new Meltano project meltano init $PROJECT_NAME # Change directory into your newly created project cd $PROJECT_NAME # Start the Meltano API and a production build of Meltano UI that you can ignore meltano ui # Open a new terminal tab and go to the directory you cloned meltano into cd $WHEREVER_YOU_CLONED_MELTANO # Install frontend infrastructure at the root directory yarn setup # Start local development environment yarn serve
The development build of the Meltano UI will now be available at http://localhost:8080/.
A production build of the API will be available at http://localhost:5000/ to support the UI, but you will not need to interact with this directly. However, as mentioned in the API Development section above, users on MacOS may need to specify an alternate bind to port to prevent a port conflict with a MacOS system service also running on port 5000.
If you're developing for the _Embed_ app (embeddable
iframe for reports) you can toggle
# Develop for the embed app export MELTANO_EMBED=1 # Develop for the main app (this is the default) export MELTANO_EMBED=0 # Start local development environment yarn serve
If you need to change the URL of your development environment, you can do this by updating your project’s
.env file with the following configuration:
# The URL where the web app will be located when working locally in development # since it provides the redirect after authentication. # Not require for production export MELTANO_UI_URL = ""
The below level hierarchy defines the back to front depth sorting of UI elements. Use it as a mental model to inform your UI decisions.
Within each aforementioned depth level is an interactive color hierarchy that further organizes content while communicating an order of importance for interactive elements. This interactive color hierarchy subtly influences the user’s attention and nudges their focus.
After the primary, secondary, tertiary, or navigation decision is made, the button size decision is informed by:
is-smallmodifier if it is within a component that can have multiple instances
There are three fundamental markup groups in the codebase. All three are technically VueJS single-file components but each have an intended use:
Here is a technical breakdown:
<router-view-layout>as root with only one child for the main view:
<div class="container view-body">
<section>as root (naturally assumes a parent of
<div class="container view-body">) with one type of child:
<div class="columns">each with their needed