There are many pits in building the front-end local development environment. The official website documents are vague. Baidu and Chrome tutorials are long out of date.

Development environment setup

Superset.apache.org/docs/instal…

Installing python

Install the latest version of Python, which comes with the PIP package management tool, and add Python to your Path.

Download the superset source code

Github.com/apache/supe… Download the Master Zip.

Deploy the Python virtual environment

The command is best done using CMD, bash has problems creating users.

pip install virtualenv
Copy the code
virtualenv env
Copy the code
env\Scripts\activate
Copy the code

Install and initialize superset

Unzip the superset source code you downloaded and go to the source directory.

Example Set the PIP domestic source address.

pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
Copy the code

Install superset local test dependencies

pip install -e .
Copy the code

Install the apache – superset

pip install apache-superset
Copy the code

Initializing the database

superset db upgrade
Copy the code

Create a user and initialize the configuration

superset fab create-admin

superset load_examples // Download the superset case

superset init
Copy the code

Start the superset server

superset run -p 3000 --with-threads --reload --debugger
Copy the code

If you access the address, you will find no resources.

Front-end Project Configuration

Installation project dependencies

cd superset-frontend

npm install
Copy the code

Modify the WebPack configuration

{
  test: /\.jsx? $/.// include source code for plugins, but exclude node_modules and test files within them
  exclude: [/superset-ui.*\/node_modules\//./\.test.jsx? $/].include: [
    new RegExp(`${APP_DIR}/src`),
    /superset-ui.*\/src/.new RegExp(`${APP_DIR}/.storybook`),
    path.resolve(__dirname, 'src'), // Add this line of code, which is not friendly to Windows environment].use: [babelLoader],
}
Copy the code

Run the project

npm run dev
Copy the code

conclusion

The development environment is hot updated and both services need to be started at the same time. When the front-end code is modified, the front-end code will be packaged and updated to superset/static/ Assets folder in real time. The server will render the front-end page according to the files in this folder.

With the development environment in place, we were able to do a lot more, such as secondary development of the Superset front-end project, customization of panel content, mobile adaptation of the project, etc.