Reflecting Changes in `datahub-web-react` to `datahub-frontend` Docker Build

[user-2]

Original Slack Thread

Hi <@U06TM7M40RK> I would like to make some changes in datahub-web-react and reflect them as changes in datahub-fronted docker build. how can this be achieved?

[user-1]

To make changes in datahub-web-react and reflect them in the datahub-frontend Docker build, you can follow these steps:

1. Fork and Clone the Repository:

   • Fork the datahub-web-react repository to your GitHub account.
   • Clone your forked repository to your local machine.

   git clone https://github.com/your-username/datahub-web-react.git
   cd datahub-web-react
   

2. Make Your Changes:

   • Modify the React components, CSS, or any other files as needed.

3. Build the React App:

   • Install dependencies and build the React app.

   yarn install
   yarn run build
   

4. Build the Docker Image:

   • Navigate to the docker directory in the main DataHub repository.
   • Build the Docker image for datahub-frontend using your modified datahub-web-react.

   cd ../docker
   docker build -f Dockerfile-frontend -t your-organization/datahub-frontend:custom .
   

5. Update Docker Compose:

   • Update your docker-compose.yml to use the custom Docker image.

   services:
     datahub-frontend:
       image: your-organization/datahub-frontend:custom
   

6. Deploy the Custom Image:

   • Deploy the custom Docker image using Docker Compose.

   docker-compose up -d --no-deps --force-recreate datahub-frontend
   

Here is a more detailed breakdown of the steps:

Step-by-Step Guide

1. Fork and Clone the Repository:

   • Fork the datahub-web-react repository on GitHub.
   • Clone your forked repository to your local machine.

   git clone https://github.com/your-username/datahub-web-react.git
   cd datahub-web-react
   

2. Make Your Changes:

   • Modify the React components, CSS, or any other files as needed.

3. Build the React App:

   • Install dependencies and build the React app.

   yarn install
   yarn run build
   

4. Build the Docker Image:

   • Navigate to the docker directory in the main DataHub repository.
   • Create a Dockerfile for the frontend if it doesn’t exist.

   # Dockerfile-frontend
   FROM node:14-alpine as build
   WORKDIR /app
   COPY . .
   RUN yarn install && yarn run build
   
   FROM nginx:alpine
   COPY --from=build /app/build /usr/share/nginx/html
   EXPOSE 80
   CMD ["nginx", "-g", "daemon off;"]
   

   • Build the Docker image for datahub-frontend using your modified datahub-web-react.

   cd ../docker
   docker build -f Dockerfile-frontend -t your-organization/datahub-frontend:custom .
   

5. Update Docker Compose:

   • Update your docker-compose.yml to use the custom Docker image.

   services:
     datahub-frontend:
       image: your-organization/datahub-frontend:custom
   

6. Deploy the Custom Image:

   • Deploy the custom Docker image using Docker Compose.

   docker-compose up -d --no-deps --force-recreate datahub-frontend
   

[user-1]

Would you like more detailed guidance on any specific part of this process?

Sources:

• <Slack Slack Discussion>
• <https://datahubproject.io/docs/0.13.1/datahub-web-react|DataHub React App Documentation> 0 button 0 button Hint: Mention @runllm in the thread for followups.

[user-2]

Thanks, <@U06TM7M40RK> it looks like I need to rebuild using gradle?

[user-1]

Yes, you are correct. To ensure that your changes in datahub-web-react are properly reflected in the datahub-frontend Docker build, you need to rebuild the project using Gradle. Here are the detailed steps to achieve this:

1. Fork and Clone the Repository:

   • Fork the datahub repository to your GitHub account.
   • Clone your forked repository to your local machine.

   git clone https://github.com/your-username/datahub.git
   cd datahub
   

2. Make Your Changes:

   • Navigate to the datahub-web-react directory and make your changes.

   cd datahub-web-react
   # Make your changes here
   

3. Build the React App:

   • Navigate back to the root directory and build the datahub-web-react module using Gradle.

   cd ..
   ./gradlew :datahub-web-react:build
   

4. Build the Frontend Distribution:

   • Build the datahub-frontend distribution using Gradle.

   ./gradlew :datahub-frontend:dist -x yarnTest -x yarnLint
   

5. Build the Docker Image:

   • Navigate to the docker directory and build the Docker image for datahub-frontend.

   cd docker
   COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -p datahub -f docker-compose-without-neo4j.yml -f docker-compose-without-neo4j.override.yml -f docker-compose.dev.yml up -d --no-deps --force-recreate --build datahub-frontend-react
   

Step-by-Step Guide

1. Fork and Clone the Repository:

   • Fork the datahub repository on GitHub.
   • Clone your forked repository to your local machine.

   git clone https://github.com/your-username/datahub.git
   cd datahub
   

2. Make Your Changes:

   • Navigate to the datahub-web-react directory and make your changes.

   cd datahub-web-react
   # Make your changes here
   

3. Build the React App:

   • Navigate back to the root directory and build the datahub-web-react module using Gradle.

   cd ..
   ./gradlew :datahub-web-react:build
   

4. Build the Frontend Distribution:

   • Build the datahub-frontend distribution using Gradle.

   ./gradlew :datahub-frontend:dist -x yarnTest -x yarnLint
   

5. Build the Docker Image:

   • Navigate to the docker directory and build the Docker image for datahub-frontend.

   cd docker
   COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -p datahub -f docker-compose-without-neo4j.yml -f docker-compose-without-neo4j.override.yml -f docker-compose.dev.yml up -d --no-deps --force-recreate --build datahub-frontend-react
   

[user-1]

This process ensures that your changes in datahub-web-react are compiled and included in the datahub-frontend Docker image.

Would you like more detailed guidance on any specific part of this process?

Sources:

• <https://datahubproject.io/docs/0.14.0/docker/development|Using Docker Images During Development>
• <https://datahubproject.io/docs/0.14.0/developers|Local Development Guide> 0 button 0 button Hint: Mention @runllm in the thread for followups.