🎉 Detach storybook from the frontend build process

.github/workflows/build-docker.yml

@@ -46,6 +46,7 @@ jobs:
           mv penpot/backend bundle-backend
           mv penpot/frontend bundle-frontend
           mv penpot/exporter bundle-exporter
+          mv penpot/storybook bundle-storybook
           popd
 
       - name: Set up Docker Buildx
@@ -100,6 +101,20 @@ jobs:
           cache-from: type=registry,ref=${{ secrets.DOCKER_REGISTRY }}/${{ env.DOCKER_IMAGE }}:buildcache
           cache-to: type=registry,ref=${{ secrets.DOCKER_REGISTRY }}/${{ env.DOCKER_IMAGE }}:buildcache,mode=max
 
+      - name: Build and push Storybook Docker image
+        uses: docker/build-push-action@v6
+        env:
+          DOCKER_IMAGE: 'storybook'
+          BUNDLE_PATH: './bundle-storybook'
+        with:
+          context: ./docker/images/
+          file: ./docker/images/Dockerfile.storybook
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ secrets.DOCKER_REGISTRY }}/${{ env.DOCKER_IMAGE }}:${{ steps.vars.outputs.gh_ref }}
+          cache-from: type=registry,ref=${{ secrets.DOCKER_REGISTRY }}/${{ env.DOCKER_IMAGE }}:buildcache
+          cache-to: type=registry,ref=${{ secrets.DOCKER_REGISTRY }}/${{ env.DOCKER_IMAGE }}:buildcache,mode=max
+
       - name: Notify Mattermost
         if: failure()
         uses: mattermost/action-mattermost-notify@master

docker/images/Dockerfile.storybook

@@ -0,0 +1,20 @@
+FROM nginxinc/nginx-unprivileged:1.29.1
+LABEL maintainer="Penpot <docker@penpot.app>"
+
+USER root
+
+RUN set -ex; \
+    useradd -U -M -u 1001 -s /bin/false -d /opt/penpot penpot;
+
+ARG BUNDLE_PATH="./bundle-frontend/storybook-static/"
+COPY $BUNDLE_PATH /var/www/
+COPY ./files/nginx.storybook.conf /etc/nginx/conf.d/default.conf
+
+RUN chown -R 1001:0 /var/cache/nginx; \
+    chmod -R g+w /var/cache/nginx; \
+    chown -R 1001:0 /etc/nginx; \
+    chmod -R g+w /etc/nginx; \
+    chown -R 1001:0 /var/www; \
+    chmod -R g+w /var/www;
+
+USER penpot:penpot

docker/images/nginx.storybook.conf

@@ -0,0 +1,27 @@
+server {
+    listen 8080 default_server;
+    server_name _;
+
+    charset utf-8;
+    etag off;
+
+    gzip on;
+    gzip_static on;
+    gzip_types text/plain text/css application/javascript application/json application/vnd.api+json application/xml application/x-javascript text/xml image/svg+xml;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_buffers 16 8k;
+    gzip_http_version 1.1;
+    gzip_min_length 256;
+    gzip_vary on;
+
+    error_log /dev/stderr;
+    access_log /dev/stdout;
+    
+    root /var/www;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

frontend/scripts/build-storybook

@@ -0,0 +1,21 @@
+#!/usr/bin/env bash
+# NOTE: this script should be called from the parent directory to
+# properly work.
+
+export CURRENT_VERSION=$1;
+export BUILD_DATE=$(date -R);
+export CURRENT_HASH=${CURRENT_HASH:-$(git rev-parse --short HEAD)};
+export TS=$(date +%s);
+
+export NODE_ENV=production;
+
+echo "Current path:"
+echo $PATH
+
+set -ex
+
+corepack enable;
+corepack install || exit 1;
+yarn install || exit 1;
+
+yarn run build:storybook || exit 1;

manage.sh

@@ -170,6 +170,7 @@ function build-imagemagick-docker-image {
 function build {
     echo ">> build start: $1"
     local version=$(print-current-version);
+    local script=${2:-build}
 
     pull-devenv-if-not-exists;
     docker volume create ${DEVENV_PNAME}_user_data;
@@ -182,7 +183,7 @@ function build {
            -e SHADOWCLJS_EXTRA_PARAMS=$SHADOWCLJS_EXTRA_PARAMS \
            -e JAVA_OPTS="$JAVA_OPTS" \
            -w /home/penpot/penpot/$1 \
-           $DEVENV_IMGNAME:latest sudo -EH -u penpot ./scripts/build $version
+           $DEVENV_IMGNAME:latest sudo -EH -u penpot ./scripts/$script $version
 
     echo ">> build end: $1"
 }
@@ -246,6 +247,22 @@ function build-exporter-bundle {
     echo ">> bundle exporter end";
 }
 
+function build-storybook-bundle {
+    echo ">> bundle storybook start";
+
+    mkdir -p ./bundles
+    local version=$(print-current-version);
+    local bundle_dir="./bundles/storybook";
+
+    build "frontend" "build-storybook";
+
+    rm -rf $bundle_dir;
+    mv ./frontend/storybook-static $bundle_dir;
+    echo $version > $bundle_dir/version.txt;
+    put-license-file $bundle_dir;
+    echo ">> bundle storybook end";
+}
+
 function build-docs-bundle {
     echo ">> bundle docs start";
 
@@ -292,6 +309,16 @@ function build-exporter-docker-image {
     popd;
 }
 
+function build-storybook-docker-image {
+    rsync -avr --delete ./bundles/frontend/ ./docker/images/bundle-frontend/;
+    pushd ./docker/images;
+    docker build \
+        -t penpotapp/storybook:$CURRENT_BRANCH -t penpotapp/storybook:latest \
+        --build-arg BUNDLE_PATH="./bundle-frontend/storybook-static/" \
+        -f Dockerfile.storybook .;
+    popd;
+}
+
 function usage {
     echo "PENPOT build & release manager"
     echo "USAGE: $0 OPTION"
@@ -312,12 +339,14 @@ function usage {
     echo "- build-frontend-bundle            Build frontend bundle"
     echo "- build-backend-bundle             Build backend bundle."
     echo "- build-exporter-bundle            Build exporter bundle."
+    echo "- build-storybook-bundle           Build storybook bundle."
     echo "- build-docs-bundle                Build docs bundle."
     echo ""
     echo "- build-docker-images              Build all docker images (frontend, backend and exporter)."
     echo "- build-frontend-docker-image      Build frontend docker images."
     echo "- build-backend-docker-image       Build backend docker images."
     echo "- build-exporter-docker-image      Build exporter docker images."
+    echo "- build-storybook-docker-image     Build storybook docker images."
     echo ""
     echo "- version                          Show penpot's version."
 }
@@ -370,6 +399,7 @@ case $1 in
         build-frontend-bundle;
         build-backend-bundle;
         build-exporter-bundle;
+        build-storybook-bundle;
         ;;
 
     build-frontend-bundle)
@@ -384,6 +414,10 @@ case $1 in
         build-exporter-bundle;
         ;;
     
+    build-storybook-bundle)
+        build-storybook-bundle;
+        ;;
+
     build-docs-bundle)
         build-docs-bundle;
         ;;
@@ -397,6 +431,7 @@ case $1 in
         build-frontend-docker-image
         build-backend-docker-image
         build-exporter-docker-image
+        build-storybook-docker-image
         ;;
 
     build-frontend-docker-image)
@@ -411,6 +446,10 @@ case $1 in
         build-exporter-docker-image
         ;;
  
+    build-storybook-docker-image)
+        build-storybook-docker-image
+        ;;
+
     *)
         usage
         ;;