Installation from git

[Mr-PU]

Can someone please, share the steps to install the superset from git and make UI changes in the frontend, like background color and button color.

I tried it but am having issues, running the superset run command in the superset directory.

[dosubot[bot]]

I found some similar discussions that might be helpful:

1. Issue making UI changes in Superset (open) ^[1].
2. Add design related identifier to buttons and other navigation items (open) ^[2].
3. Facing Issue In Installation Superset(2.1.0)) for Creating Visualization Plugins (open) ^[3].

Here are the steps to install Superset from Git and make UI changes in the frontend, such as background color and button color:

Installation Steps

1. Ensure OS Dependencies:
   Make sure your machine meets the OS dependencies and install MySQL.

2. Set Up Python Environment:
   Ensure you are using Python version 3.9, 3.10, or 3.11.

   # Create a virtual environment and activate it
   python3 -m venv venv
   source venv/bin/activate

3. Install Dependencies:

   # Install external dependencies
   pip install -r requirements/development.txt
   
   # Install Superset in editable (development) mode
   pip install -e .

4. Initialize Superset:

   # Initialize the database
   superset db upgrade
   
   # Create an admin user
   superset fab create-admin
   
   # Create default roles and permissions
   superset init
   
   # Load example data
   superset load-examples

5. Start Superset:

   # Start the Flask dev web server
   superset run -p 8088 --with-threads --reload --debugger --debug

Frontend Development

1. Build Frontend Assets:

   cd superset-frontend
   npm install
   
   # For local development with hot refresh support
   npm run dev-server

2. Access the Webpack Dev Server:
   Access http://localhost:9000 in your web browser. This will use the hot-reloading front-end assets from the Webpack development server while redirecting back-end queries to Flask/Superset.

Making UI Changes

1. Change Background Color and Button Color:
   Locate the relevant CSS or SCSS files in the superset-frontend directory. For example, you might find the main styles in superset-frontend/src/assets/stylesheets/less/index.less, superset-frontend/src/assets/stylesheets/superset.less, and superset-frontend/src/assets/stylesheets/less/variables.less ^[4][5][6].

   /* Example: Change background color and button color */
   body {
       background-color: #f0f0f0; /* Change to desired background color */
   }
   
   .btn-primary {
       background-color: #007bff; /* Change to desired button color */
       border-color: #007bff;
   }

2. Rebuild Assets:
   After making changes, rebuild the assets to see the changes reflected.

   npm run build-dev

3. View Changes:
   Refresh your browser to see the updated UI changes.

By following these steps, you should be able to install Superset from Git and make UI changes in the frontend ^[7].

To continue talking to Dosu, mention @dosu.