Adding sample for running storybook tests on a docker container

Author: Arush Saxena

Dockerfile

@@ -0,0 +1,37 @@
+# Use an official Node runtime as a parent image
+FROM node:18.15.0-alpine
+
+# Set the working directory to /app
+WORKDIR /
+
+# Copy the package.json and package-lock.json files to the container
+COPY package*.json ./
+
+# Install dependencies
+
+RUN npm i -g @lambdatest/smartui-storybook
+RUN npm install 
+RUN apk add --no-cache \
+    chromium \
+    nss \
+    freetype \
+    harfbuzz \
+    ca-certificates \
+    ttf-freefont \
+    && rm -rf /var/cache/*
+
+
+# Copy the entire project directory to the container
+COPY . .
+
+# Set environment variable
+
+ENV PROJECT_TOKEN=<ProjectToken>
+ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
+ENV PUPPETEER_EXECUTABLE_PATH /usr/bin/chromium-browser
+
+# Build the Storybook static files
+RUN npm run build-storybook
+
+# Set the command to run when the container starts
+CMD ["smartui", "storybook", "./storybook-static","--config",".smartui.json"]

README.md

@@ -16,3 +16,25 @@
     ```
     npm run storybook 
     ```
+
+## Running SmartUI storybook tests on a Docker container.
+
+1. Clone this repository
+    ```
+    git clone https://github.com/pinanks/smartui-storybook.git
+    ```
+
+2. Create SmartUI Config JSON
+    ```
+    smartui config create .smartui.json
+    ```
+
+3. Create a docker Image
+    ```
+    docker build -t <image_name> .
+    ```
+4. Run a Docker container and test in it
+    ```
+    docker run -e PROJECT_TOKEN="your_project_token" <image_name>
+    ```
+

package.json

@@ -48,6 +48,7 @@
     ]
   },
   "devDependencies": {
+    "@lambdatest/smartui-storybook": "^1.1.3",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-interactions": "^6.5.16",