Skip to content

Latest commit

 

History

History
118 lines (80 loc) · 4.39 KB

14_node_environment_setup.rst

File metadata and controls

118 lines (80 loc) · 4.39 KB
Raw

Node.js Environment Setup

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.

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.