Separate dockerization of frontend(build & run)

Issue Summary

I’m trying to run frontend docker container separately.
I splited redash codebase into server side and client side.
I set up as following.

  • I didn’t configure server-side static files path.

  • .env

REDASH_BACKEND=“http://my-backend-ip:5000

  • Dockerfile
FROM node:14.17 as frontend-builder

RUN npm install --global --force yarn@1.22.10

# Controls whether to build the frontend assets
ARG skip_frontend_build

ENV CYPRESS_INSTALL_BINARY=0
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1

RUN useradd -m -d /frontend redash
USER redash

WORKDIR /frontend
COPY --chown=redash package.json yarn.lock .yarnrc /frontend/
COPY --chown=redash viz-lib /frontend/viz-lib

# Controls whether to instrument code for coverage information
ARG code_coverage
ENV BABEL_ENV=${code_coverage:+test}

RUN if [ "x$skip_frontend_build" = "x" ] ; then yarn --frozen-lockfile --network-concurrency 1; fi

COPY --chown=redash client /frontend/client
COPY --chown=redash webpack.config.js /frontend/
RUN if [ "x$skip_frontend_build" = "x" ] ; then yarn build; else mkdir -p /frontend/client/dist && touch /frontend/client/dist/multi_org.html && touch /frontend/client/dist/index.html; fi
  • docker-compose.yml
version: "2.2"

x-redash-service: &redash-service
    build:
      context: .
      # dockerfile: Dockerfile path
    volumes:
      - ./package.json:/frontend/package.json
      - ./yarn.lock:/frontend/yarn.lock
      - ./.yarnrc:/frontend/.yarnrc
      - ./.yarn:/frontend/.yarn
      - ./webpack.config.js:/frontend/webpack.config.js
      - ./client:/frontend/client
      - ./viz-lib:/frontend/viz-lib
    env_file:
      - .env
    
services:
  frontend:
    <<: *redash-service
    command: yarn start
    ports:
      - "8080:8080"

Docker-compose logs seem fine, but nothing showed up in browser.

Technical details:

  • Redash Version: master branch (e6ebef1e5ab866ce1e706eaee6260edaffdc2bd7)
  • Browser/OS:Chrome / macOS Monterey 12.2.1 (M1)
  • How did you install Redash: docker-compose

Hi there and welcome to the forum!

Do you see any errors in your browser’s console?

I’m curious what’s the motivation for this split?

Hi, I got ERR_EMPTY_RESPONSE.

I deleted browser cache, but it didn’t work.

Frontend developers in my team wants to have separate code repository.

This question is really beyond what this forum is intended for. Splitting the codebase is obviously not impossible, but there’s many ways it can fail. It’s not worth the time to debug it because this effort won’t benefit anyone else in the community.

I’m happy to help get your development setup running using the current repository layout. Otherwise you’re welcome to fork it and carry on.

This is a pretty radical change to Redash, and I’ve not seen it before. I wonder if there is a specific issue or problem with the codebase that makes this seem attractive? Perhaps the front-end developers are not comfortable spinning up the Python back-end? If that’s the case they can simply run the javascript locally and connect to a shared Python back-end (it’s all configurable with environment variables anyway).