feat: file upload (minio, s3, frontend...)

.dockerignore

@@ -33,6 +33,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

.env.example

@@ -1,9 +1,14 @@
 # DOCKER
+DOCKER_MINIO_FORWARD_PORT="9000"
+DOCKER_MINIO_FORWARD_CONSOLE_PORT="9090"
+DOCKER_MINIO_USERNAME="startui"
+DOCKER_MINIO_PASSWORD="password"
 DOCKER_DATABASE_PORT="5432"
 DOCKER_DATABASE_NAME="startui"
 DOCKER_DATABASE_USERNAME="startui"
 DOCKER_DATABASE_PASSWORD="startui"
 
+
 # PUBLIC CONFIG
 NEXT_PUBLIC_BASE_URL="http://localhost:3000"
 # Use the following environment variables to show the environment name.
@@ -38,3 +43,10 @@ EMAIL_FROM="Start UI <noreply@example.com>"
 # LOGGER
 LOGGER_LEVEL="info"
 LOGGER_PRETTY="true"
+
+# S3
+S3_ENDPOINT="http://127.0.0.1:${DOCKER_MINIO_FORWARD_PORT}"
+S3_BUCKET_NAME="start-ui-bucket"
+S3_BUCKET_PUBLIC_URL="http://127.0.0.1:${DOCKER_MINIO_FORWARD_PORT}/${S3_BUCKET_NAME}"
+S3_ACCESS_KEY_ID="miniodevuser"
+S3_SECRET_ACCESS_KEY="miniodevuserpassword"

.github/workflows/code-quality.yml

@@ -29,7 +29,6 @@ jobs:
       - uses: pnpm/action-setup@v4
         name: Install pnpm
         with:
-          version: 8
           run_install: false
 
       - name: Get pnpm store directory

.github/workflows/e2e-tests.yml

@@ -26,6 +26,12 @@ jobs:
       AUTH_SECRET: Replace me with `openssl rand -base64 32` generated secret
       EMAIL_SERVER: smtp://username:password@localhost:1025
       EMAIL_FROM: Start UI <noreply@example.com>
+      S3_ENDPOINT: http://127.0.0.1:9000
+      S3_BUCKET_NAME: start-ui-bucket
+      S3_BUCKET_PUBLIC_URL: http://127.0.0.1:9000/start-ui-bucket
+      S3_ACCESS_KEY_ID: miniotestuser
+      S3_SECRET_ACCESS_KEY: miniotestuserpassword
+
     services:
       postgres:
         image: postgres
@@ -50,16 +56,33 @@ jobs:
         with:
           node-version: 20
 
+      # - name: Setup minio
+      #   env:
+      #     MINIO_ACCESS_KEY: minioadmin
+      #     MINIO_SECRET_KEY: minioadmin
+      #   run: |
+      #    docker run -d -p 9000:9000 --name minio
+      #               -e MINIO_ACCESS_KEY=startui \
+      #               -e MINIO_SECRET_KEY=password \
+      #               -v /tmp/data:/data \
+      #               -v /tmp/config:/root/.minio \
+      #               minio/minio server /data
+
+      #     export S3_ACCESS_KEY_ID=miniotestuser
+      #     export S3_SECRET_ACCESS_KEY=miniotestuserpassword
+      #     export AWS_EC2_METADATA_DISABLED=true
+
+      #     aws --endpoint-url http://127.0.0.1:9000/start-ui-bucket s3 mb s3://testbucket
+
       - uses: pnpm/action-setup@v4
         name: Install pnpm
         with:
-          version: 9
           run_install: false
 
       - name: Get pnpm store directory
         shell: bash
         run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+          echo  STORE_PATH=$(pnpm store path --silent)  >> $GITHUB_ENV
 
       - name: Cache node modules
         uses: actions/cache@v4

.storybook/preview.tsx

@@ -3,6 +3,7 @@ import React, { useEffect } from 'react';
 import { Box, useColorMode } from '@chakra-ui/react';
 import { Preview } from '@storybook/react';
 import { themes } from '@storybook/theming';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { useDarkMode } from 'storybook-dark-mode';
 
@@ -12,10 +13,8 @@ import {
   AVAILABLE_LANGUAGES,
   DEFAULT_LANGUAGE_KEY,
 } from '../src/lib/i18n/constants';
-// @ts-ignore don't want to implement a d.ts declaration for storybook only
-import logoReversed from './logo-reversed.svg';
-// @ts-ignore don't want to implement a d.ts declaration for storybook only
-import logo from './logo.svg';
+
+const queryClient = new QueryClient();
 
 const DocumentationWrapper = ({ children, context, isDarkMode }) => {
   const { i18n } = useTranslation();
@@ -86,12 +85,14 @@ const preview: Preview = {
       const isDarkMode = useDarkMode();
       return (
         <Providers>
-          <DocumentationWrapper isDarkMode={isDarkMode} context={context}>
-            {/* Calling as a function to avoid errors. Learn more at:
-             * https://github.com/storybookjs/storybook/issues/15223#issuecomment-1092837912
-             */}
-            {story(context)}
-          </DocumentationWrapper>
+          <QueryClientProvider client={queryClient}>
+            <DocumentationWrapper isDarkMode={isDarkMode} context={context}>
+              {/* Calling as a function to avoid errors. Learn more at:
+               * https://github.com/storybookjs/storybook/issues/15223#issuecomment-1092837912
+               */}
+              {story(context)}
+            </DocumentationWrapper>
+          </QueryClientProvider>
         </Providers>
       );
     },

README.md

@@ -25,7 +25,7 @@ A live read-only demonstration of what you will have when starting a project wit
 
 - [NodeJS](https://nodejs.org/) >=20
 - [Pnpm](https://pnpm.io/)
-- [Docker](https://www.docker.com/) (or a [PostgreSQL](https://www.postgresql.org/) database)
+- [Docker](https://www.docker.com/) (or a [PostgreSQL](https://www.postgresql.org/) database and an [S3 compatible](https://aws.amazon.com/s3/) service)
 
 ## Getting Started
 
@@ -53,14 +53,17 @@ cp .env.example .env
 pnpm install
 ```
 
-3. Setup and start the db with docker
+3. Setup and start the services (database and S3) with docker
 ```bash
 pnpm dk:init
 ```
+
 > [!NOTE]
 > **Don't want to use docker?**
 >
 > Setup a PostgreSQL database (locally or online) and replace the **DATABASE_URL** environment variable. Then you can run `pnpm db:push` to update your database schema and then run `pnpm db:seed` to seed your database.
+> For S3, Start UI  [web] comes with a Minio service. You can use any online S3 compatible services and update the
+> environment variables accordingly.
 
 ## Development
 

docker-compose.yml

@@ -1,9 +1,68 @@
 services:
   postgres:
     image: postgres:16.1
+    env_file:
+      - .env
     ports:
       - '${DOCKER_DATABASE_PORT:-5432}:5432'
     environment:
       POSTGRES_DB: $DOCKER_DATABASE_NAME
       POSTGRES_USER: $DOCKER_DATABASE_USERNAME
       POSTGRES_PASSWORD: $DOCKER_DATABASE_PASSWORD
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U $DOCKER_DATABASE_NAME']
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  initializedatabase:
+    build:
+      context: .
+      dockerfile: docker/initialize-database.dockerfile
+    depends_on:
+      postgres:
+        condition: service_healthy
+    environment:
+      DATABASE_URL: 'postgres://${DOCKER_DATABASE_USERNAME}:${DOCKER_DATABASE_PASSWORD}@postgres:${DOCKER_DATABASE_PORT}/${DOCKER_DATABASE_NAME}'
+
+  minio:
+    image: 'minio/minio:RELEASE.2024-07-16T23-46-41Z-cpuv1'
+    ports:
+      - '${DOCKER_FORWARD_MINIO_PORT:-9000}:9000'
+      - '${DOCKER_FORWARD_MINIO_CONSOLE_PORT:-9090}:9090'
+    environment:
+      MINIO_ROOT_USER: $DOCKER_MINIO_USERNAME
+      MINIO_ROOT_PASSWORD: $DOCKER_MINIO_PASSWORD
+    volumes:
+      - 'minio:/data/minio'
+    command: minio server /data/minio --console-address ":${FORWARD_MINIO_CONSOLE_PORT:-9090}"
+    healthcheck:
+      test: ['CMD', 'mc', 'ready', 'local']
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
+  createbuckets:
+    image: minio/mc
+    depends_on:
+      minio:
+        condition: service_healthy
+    # Set an alias, meaning myminio is an alias for the host, the username and the password, avoiding to type it again in the next commands
+    # As an admin, add a new user to scope minio access to this new user, avoiding to use the admin credentials in the application
+    # Set the policy readwrite to the user we previously created on the previously created alias
+    # Create the bucket on the previously created alias
+    # Set the public access policy to download, meaning readonly.
+    entrypoint: >
+      /bin/sh -c "
+      /usr/bin/mc alias set myminio http://minio:${DOCKER_FORWARD_MINIO_PORT:-9000} $DOCKER_MINIO_USERNAME $DOCKER_MINIO_PASSWORD;
+      /usr/bin/mc admin user add myminio $S3_ACCESS_KEY_ID $S3_SECRET_ACCESS_KEY;
+      /usr/bin/mc admin policy attach myminio readwrite --user $S3_ACCESS_KEY_ID;
+      /usr/bin/mc mb myminio/$S3_BUCKET_NAME;
+      /usr/bin/mc anonymous set download myminio/$S3_BUCKET_NAME;
+      exit 0;
+      "
+
+# use docker compose down --volumes to remove volumes declared in this file
+volumes:
+  minio:
+    driver: local

docker/initialize-database.dockerfile

@@ -0,0 +1,13 @@
+FROM node:20-alpine
+
+WORKDIR /usr/src/app
+
+COPY . .
+
+RUN apk upgrade --update-cache --available && \
+  apk add openssl && \
+  rm -rf /var/cache/apk/*
+RUN npm install -g pnpm@latest-9
+RUN pnpm install
+
+CMD [ "pnpm", "db:init" ]

e2e/avatar-upload.spec.ts

@@ -0,0 +1,46 @@
+import { expect, test } from '@playwright/test';
+import { pageUtils } from 'e2e/utils/pageUtils';
+import { USER_EMAIL } from 'e2e/utils/users';
+
+import { env } from '@/env.mjs';
+import { ROUTES_ACCOUNT } from '@/features/account/routes';
+import { ROUTES_APP } from '@/features/app/routes';
+import locales from '@/locales';
+
+test.beforeEach('Login to the app', async ({ page }) => {
+  const utils = pageUtils(page);
+
+  await utils.loginApp({ email: USER_EMAIL });
+  await page.waitForURL(
+    `${env.NEXT_PUBLIC_BASE_URL}${ROUTES_APP.root() || '/'}**`
+  );
+  await expect(page.getByTestId('app-layout')).toBeVisible();
+});
+test.describe('Avatar upload flow', () => {
+  test('Upload an avatar', async ({ page }) => {
+    await expect(page.getByTestId('avatar-account')).toBeVisible();
+
+    await page.getByTestId('avatar-account').click();
+
+    await page.waitForURL(`**${ROUTES_ACCOUNT.app.root()}`);
+    await expect(
+      page.getByText(locales.en.account.data.avatar.placeholder)
+    ).toBeVisible();
+
+    const fileChooserPromise = page.waitForEvent('filechooser');
+
+    await page.getByText(locales.en.account.data.avatar.placeholder).click();
+
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles('./public/android-chrome-192x192.png');
+
+    await page
+      .getByRole('button', { name: locales.en.account.profile.actions.update })
+      .first()
+      .click();
+
+    await expect(
+      page.locator('a[data-testid="avatar-account"] > img')
+    ).toHaveAttribute('src');
+  });
+});

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "2.0.0",
   "description": "Opinionated UI starter with ⚛️ React, ⚡️ Chakra UI, ⚛️ React Query & 📋 React Hook Form — From the 🐻 BearStudio Team",
+  "packageManager": "pnpm@9.15.0",
   "engines": {
     "node": ">=20"
   },
@@ -29,7 +30,7 @@
     "test:ui": "vitest --ui",
     "e2e": "dotenv -- cross-var playwright test",
     "e2e:ui": "dotenv -- cross-var playwright test --ui",
-    "dk:init": "docker compose up -d && sleep 10 && pnpm db:init",
+    "dk:init": "docker compose up -d",
     "dk:start": "docker compose start",
     "dk:stop": "docker compose stop",
     "dk:clear": "docker compose down --volumes",
@@ -42,6 +43,8 @@
     "*.{ts,tsx,js,jsx,json}": "prettier --write"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "3.435.0",
+    "@aws-sdk/s3-request-presigner": "3.435.0",
     "@chakra-ui/anatomy": "2.2.2",
     "@chakra-ui/next-js": "2.2.0",
     "@chakra-ui/react": "2.8.2",