Skip to content

Latest commit

 

History

History
196 lines (133 loc) · 7.37 KB

14_node_environment_setup.rst

File metadata and controls

196 lines (133 loc) · 7.37 KB
Raw

Node.js Environment Setup

Contributing to the UI in Airflow

In Airflow 3, we are moving the UI away from Flask App Builder views to a pure React powered frontend living at airflow/ui. During 3.0 development, we will need to run both the new and legacy UIs at the same time until the new UI is feature-complete. But we want to limit modifications to the legacy airflow/www views, to mainly three rules:

  1. Bug fixes to cherry pick for 2.10.x and 2.11
  2. The minimum necessary to unblock other Airflow 3.0 feature work
  3. Fixes to react views which we haven't migrated over yet, but can still be ported over to the new UI

Custom endpoints for the UI will also be moved away from airflow/www/views.py and to airflow/api_fastapi. Contributions to the legacy views file will follow the same rules. Committers will exercise their judgement on what endpoints should exist in the public airflow/api_connexion versus the private airflow/api_fastapi

Airflow UI

airflow/ui is our React frontend powered. Dependencies are managed by pnpm and dev/build processes by Vite. Make sure you are using recent versions of pnpm>=9 and node>=20. breeze start-airflow will build the UI automatically. Adding the --dev-mode flag will automatically run the vite dev server for hot reloading the UI during local development.

pnpm commands

Follow the pnpm docs to install pnpm locally and nvm to manage your node version.

# install dependencies
pnpm install

# Run vite dev server for local development.
# The dev server will run on a different port than Airflow. To use the UI, access it through wherever your Airflow webserver is running, usually 8080 or 28080.
# Trying to use the UI from the Vite port (5173) will lead to auth errors.
pnpm dev

# Generate production build files will be at airflow/ui/dist
pnpm build

# Format code in .ts, .tsx, .json, .css, .html files
pnpm format

# Check JS/TS code in .ts, .tsx, .html files and report any errors/warnings
pnpm lint

# Check JS/TS code in .ts, .tsx, .html files and report any errors/warnings and fix them if possible
pnpm lint:fix

# Run tests for all .test.ts, test.tsx files
pnpm test

# Run coverage
pnpm coverage

# Generate queries and types from the REST API OpenAPI spec
pnpm codegen

Project Structure

  • /openapi autogenerated types and queries based on the public REST API openapi spec. Do not manually edit.
  • /src/assets static assets for the UI
  • /src/components shared components across the UI
  • /dist build files

Local Environment Variables

Copy the example environment

cp .env.example .env.local

DEPRECATED Airflow WWW

airflow/www/ contains all yarn-managed, front-end assets. Flask-Appbuilder itself comes bundled with jQuery and bootstrap. While they may be phased out over time, these packages are currently not managed with yarn.

Make sure you are using recent versions of node and yarn. No problems have been found with node>=8.11.3 and yarn>=1.19.1. The pre-commit framework of ours install node and yarn automatically when installed - if you use breeze you do not need to install neither node nor yarn.

The outline for this document in GitHub is available at top-right corner button (with 3-dots and 3 lines).

Installing yarn and its packages manually

To install yarn on macOS:

  1. Run the following commands (taken from this source):
brew install node
brew install yarn
yarn config set prefix ~/.yarn
  1. Add ~/.yarn/bin to your PATH so that commands you are installing could be used globally.
  2. Set up your .bashrc file and then source ~/.bashrc to reflect the change.
export PATH="$HOME/.yarn/bin:$PATH"
  1. Install third-party libraries defined in package.json by running the following command
yarn install

Generate Bundled Files with yarn

To parse and generate bundled files for Airflow, run either of the following commands:

# Compiles the production / optimized js & css
yarn run prod

# Starts a web server that manages and updates your assets as you modify them
# You'll need to run the webserver in debug mode too: ``airflow webserver -d``
yarn run dev

Follow Style Guide

We try to enforce a more consistent style and follow the Javascript/Typescript community guidelines.

Once you add or modify any JS/TS code in the project, please make sure it follows the guidelines defined in Airbnb JavaScript Style Guide.

Apache Airflow uses ESLint as a tool for identifying and reporting issues in JS/TS, and Prettier for code formatting. Most IDE directly integrate with these tools, you can also manually run them with any of the following commands:

# Format code in .js, .jsx, .ts, .tsx, .json, .css, .html files
yarn format

# Check JS/TS code in .js, .jsx, .ts, .tsx, .html files and report any errors/warnings
yarn run lint

# Check JS/TS code in .js, .jsx, .ts, .tsx, .html files and report any errors/warnings and fix them if possible
yarn run lint:fix

# Run tests for all .test.js, .test.jsx, .test.ts, test.tsx files
yarn test

React, JSX and Chakra

In order to create a more modern UI, we have started to include React in the airflow/www/ project. If you are unfamiliar with React then it is recommended to check out their documentation to understand components and jsx syntax.

We are using Chakra UI as a component and styling library. Notably, all styling is done in a theme file or inline when defining a component. There are a few shorthand style props like px instead of padding-right, padding-left. To make this work, all Chakra styling and css styling are completely separate. It is best to think of the React components as a separate app that lives inside of the main app.

If you happen to change architecture of Airflow, you can learn how we create our Architecture diagrams.