diff --git a/.github/workflows/deploy-docs-vue-storefront-cloud.yml b/.github/workflows/deploy-docs-vue-storefront-cloud.yml index df1baa9932..3b5a052d78 100644 --- a/.github/workflows/deploy-docs-vue-storefront-cloud.yml +++ b/.github/workflows/deploy-docs-vue-storefront-cloud.yml @@ -21,6 +21,7 @@ jobs: ARTIFACT_TYPE: 'sfui2-docs' DOCKERFILE_PATH: './.vuestorefrontcloud/docs/Dockerfile' ENVIRONMENT: ${{ needs.configure-enviroment.outputs.environment }} + TARGET_DOMAIN: ${{ needs.configure-enviroment.outputs.target-domain }} sync-assets: needs: [build, configure-enviroment] diff --git a/.github/workflows/deploy-router-vue-storefront-cloud.yml b/.github/workflows/deploy-router-vue-storefront-cloud.yml index af4b24ab71..86c746d03d 100644 --- a/.github/workflows/deploy-router-vue-storefront-cloud.yml +++ b/.github/workflows/deploy-router-vue-storefront-cloud.yml @@ -21,6 +21,7 @@ jobs: ARTIFACT_TYPE: "vue-storefront" DOCKERFILE_PATH: ".vuestorefrontcloud/router/docker/Dockerfile" ENVIRONMENT: ${{ needs.configure-enviroment.outputs.environment }} + TARGET_DOMAIN: ${{ needs.configure-enviroment.outputs.target-domain }} deploy: runs-on: ubuntu-latest diff --git a/.github/workflows/deploy-test-next-storefront-cloud.yml b/.github/workflows/deploy-test-next-storefront-cloud.yml index 02e1cd8001..938082f253 100644 --- a/.github/workflows/deploy-test-next-storefront-cloud.yml +++ b/.github/workflows/deploy-test-next-storefront-cloud.yml @@ -21,6 +21,7 @@ jobs: ARTIFACT_TYPE: "sfui2-docs-react" DOCKERFILE_PATH: ".vuestorefrontcloud/test-next/docker/Dockerfile" ENVIRONMENT: ${{ needs.configure-enviroment.outputs.environment }} + TARGET_DOMAIN: ${{ needs.configure-enviroment.outputs.target-domain }} deploy: needs: [ build, configure-enviroment ] diff --git a/.github/workflows/deploy-test-nuxt-storefront-cloud.yml b/.github/workflows/deploy-test-nuxt-storefront-cloud.yml index 996958533d..63b562b6a5 100644 --- a/.github/workflows/deploy-test-nuxt-storefront-cloud.yml +++ b/.github/workflows/deploy-test-nuxt-storefront-cloud.yml @@ -20,6 +20,7 @@ jobs: ARTIFACT_TYPE: "sfui2-docs-vue" DOCKERFILE_PATH: ".vuestorefrontcloud/test-nuxt/docker/Dockerfile" ENVIRONMENT: ${{ needs.configure-enviroment.outputs.environment }} + TARGET_DOMAIN: ${{ needs.configure-enviroment.outputs.target-domain }} deploy: needs: [ build, configure-enviroment ] diff --git a/.github/workflows/image-build-vue-storefront-cloud.yml b/.github/workflows/image-build-vue-storefront-cloud.yml index 5d09316f30..97ec0f6128 100644 --- a/.github/workflows/image-build-vue-storefront-cloud.yml +++ b/.github/workflows/image-build-vue-storefront-cloud.yml @@ -14,6 +14,9 @@ on: ENVIRONMENT: required: true type: string + TARGET_DOMAIN: + required: true + type: string jobs: build: @@ -29,6 +32,7 @@ jobs: uses: elgohr/Publish-Docker-Github-Action@v5 env: ENVIRONMENT: ${{ inputs.ENVIRONMENT }} + TARGET_DOMAIN: ${{ inputs.TARGET_DOMAIN }} with: name: ${{ inputs.DOCKER_NAMESPACE }}/${{ inputs.ARTIFACT_TYPE }}:${{ github.sha }} registry: registry.storefrontcloud.io @@ -36,4 +40,4 @@ jobs: password: ${{ secrets.CLOUD_PASSWORD }} dockerfile: ${{ inputs.DOCKERFILE_PATH }} buildoptions: '--compress' - buildargs: VITE_DOCS_BASEPATH,VITE_DOCS_EXAMPLES_REACT_PATH,VITE_DOCS_EXAMPLES_VUE_PATH,ENVIRONMENT + buildargs: VITE_DOCS_BASEPATH,VITE_DOCS_EXAMPLES_REACT_PATH,VITE_DOCS_EXAMPLES_VUE_PATH,ENVIRONMENT,TARGET_DOMAIN diff --git a/.vuestorefrontcloud/docs/Dockerfile b/.vuestorefrontcloud/docs/Dockerfile index dcbd3e5d73..770475398a 100644 --- a/.vuestorefrontcloud/docs/Dockerfile +++ b/.vuestorefrontcloud/docs/Dockerfile @@ -2,17 +2,19 @@ FROM node:20-alpine AS build WORKDIR /var/www +COPY . . + ARG VITE_DOCS_BASEPATH ARG VITE_DOCS_EXAMPLES_REACT_PATH ARG VITE_DOCS_EXAMPLES_VUE_PATH ARG ENVIRONMENT -ENV VITE_DOCS_BASEPATH=$VITE_DOCS_BASEPATH -ENV VITE_DOCS_EXAMPLES_REACT_PATH=$VITE_DOCS_EXAMPLES_REACT_PATH -ENV VITE_DOCS_EXAMPLES_VUE_PATH=$VITE_DOCS_EXAMPLES_VUE_PATH +ENV NUXT_DOCS_BASEPATH=$VITE_DOCS_BASEPATH +ENV NUXT_APP_BASE_URL=$VITE_DOCS_BASEPATH +ENV NUXT_DOCS_EXAMPLES_REACT_PATH=$VITE_DOCS_EXAMPLES_REACT_PATH +ENV NUXT_DOCS_EXAMPLES_VUE_PATH=$VITE_DOCS_EXAMPLES_VUE_PATH ENV ENVIRONMENT=$ENVIRONMENT -COPY . . RUN yarn RUN ENV_NAME=$ENVIRONMENT yarn build:replace-assets-url-with RUN yarn build:vue diff --git a/.vuestorefrontcloud/docs/README.md b/.vuestorefrontcloud/docs/README.md index 6dd295e193..ac0ce3ffbb 100644 --- a/.vuestorefrontcloud/docs/README.md +++ b/.vuestorefrontcloud/docs/README.md @@ -4,8 +4,8 @@ You can debug dockerized docs image by following steps below: -- build image using `DOCKER_BUILDKIT=1 docker build -t docs --build-arg VITE_DOCS_EXAMPLES_VUE_PATH=http://localhost:3001 --build-arg VITE_DOCS_EXAMPLES_REACT_PATH=http://localhost:3002 --build-arg VITE_DOCS_BASEPATH=/v2/ -f .vuestorefrontcloud/docs/Dockerfile .`, -- run image using `docker run -t -i -p 3000:80 docs`, (flags `i` and `t` allows to run command and then kill it with `ctrl+c` https://github.com/moby/moby/issues/2838#issuecomment-29205965) +- build image using `DOCKER_BUILDKIT=1 docker build -t docs --build-arg VITE_DOCS_EXAMPLES_VUE_PATH=http://localhost:3001/v2-vue --build-arg VITE_DOCS_EXAMPLES_REACT_PATH=http://localhost:3002/v2-react --build-arg VITE_DOCS_BASEPATH=/v2/ -f .vuestorefrontcloud/docs/Dockerfile .`, +- run image using `docker run -t -i -p 3004:80 docs`, (flags `i` and `t` allows to run command and then kill it with `ctrl+c` https://github.com/moby/moby/issues/2838#issuecomment-29205965) - open browser and go to the address `http://localhost:3000/v2/` to see the docs page running. -NOTE: docs will work but without `vue` and `react` showcases. For full docs experience you have to run `test-next` and `test-nuxt` docker as well. +NOTE: docs will work but without `vue` and `react` showcases. For full docs experience you have to run `test-next` and `test-nuxt` docker as well. And to test root redirect to `/v2/` you need to run `router` docker image too. diff --git a/.vuestorefrontcloud/router/README.md b/.vuestorefrontcloud/router/README.md index 37fc90adf8..490a1d4a26 100644 --- a/.vuestorefrontcloud/router/README.md +++ b/.vuestorefrontcloud/router/README.md @@ -27,3 +27,13 @@ An alternative to robots.txt in this case could be using the built-in Farmer fea However, I went with creating the "nginx + robots.txt file" container here anyways. I'm forced to create a container for nginx so might as well put the robots.txt file here. That's a lot of work to do such a simple thing, but the situation is what it is. + +## Debugging + +You can debug dockerized docs image by following steps below: + +- run `docs` docker image, +- run terminal in `root` directory, +- build image using `DOCKER_BUILDKIT=1 docker build -t docs-router --build-arg TARGET_DOMAIN=http://localhost:3004 -f .vuestorefrontcloud/router/docker/Dockerfile .`, +- run image using `docker run -t -i -p 3000:3000 docs-router nginx-debug -g 'daemon off;'`, (flags `i` and `t` allows to run command and then kill it with `ctrl+c` https://github.com/moby/moby/issues/2838#issuecomment-29205965) +- open browser and go to the address `http://localhost:3004` to see the app page running. diff --git a/.vuestorefrontcloud/router/docker/Dockerfile b/.vuestorefrontcloud/router/docker/Dockerfile index 5e605906bb..74ac2119ce 100644 --- a/.vuestorefrontcloud/router/docker/Dockerfile +++ b/.vuestorefrontcloud/router/docker/Dockerfile @@ -1,2 +1,9 @@ FROM nginx -COPY .vuestorefrontcloud/router/docker/default.conf /etc/nginx/conf.d/default.conf + +ARG TARGET_DOMAIN + +ENV TARGET_DOMAIN=$TARGET_DOMAIN + +COPY .vuestorefrontcloud/router/docker/default.conf.template /etc/nginx/conf.d/default.conf.template + +RUN envsubst '$TARGET_DOMAIN' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf diff --git a/.vuestorefrontcloud/router/docker/default.conf b/.vuestorefrontcloud/router/docker/default.conf.template similarity index 81% rename from .vuestorefrontcloud/router/docker/default.conf rename to .vuestorefrontcloud/router/docker/default.conf.template index 0e0693fda8..66c436d94d 100644 --- a/.vuestorefrontcloud/router/docker/default.conf +++ b/.vuestorefrontcloud/router/docker/default.conf.template @@ -8,6 +8,6 @@ server { # https://www.oliverdavies.uk/blog/nginx-redirects-query-string-arguments location / { - return 301 https://docs.storefrontui.io/v2$uri$is_args$args; + return 301 ${TARGET_DOMAIN}/v2$uri$is_args$args; } } diff --git a/.vuestorefrontcloud/test-next/docker/Dockerfile b/.vuestorefrontcloud/test-next/docker/Dockerfile index a7dd791c3e..ed87ad1f0c 100644 --- a/.vuestorefrontcloud/test-next/docker/Dockerfile +++ b/.vuestorefrontcloud/test-next/docker/Dockerfile @@ -8,8 +8,7 @@ ARG VITE_DOCS_BASEPATH ARG VITE_DOCS_EXAMPLES_REACT_PATH ARG ENVIRONMENT -ENV VITE_DOCS_BASEPATH=$VITE_DOCS_BASEPATH -ENV VITE_DOCS_EXAMPLES_REACT_PATH=$VITE_DOCS_EXAMPLES_REACT_PATH +ENV NEXT_DOCS_EXAMPLES_REACT_PATH=$VITE_DOCS_EXAMPLES_REACT_PATH ENV ENVIRONMENT=$ENVIRONMENT RUN yarn diff --git a/.vuestorefrontcloud/test-next/docker/README.md b/.vuestorefrontcloud/test-next/docker/README.md index f2fad79fb2..c607ecc634 100644 --- a/.vuestorefrontcloud/test-next/docker/README.md +++ b/.vuestorefrontcloud/test-next/docker/README.md @@ -5,6 +5,6 @@ You can debug dockerized docs image by following steps below: - run terminal in `root` directory -- build image using `DOCKER_BUILDKIT=1 docker build -t test-next -f .vuestorefrontcloud/test-next/docker/Dockerfile .`, +- build image using `DOCKER_BUILDKIT=1 docker build -t test-next --build-arg VITE_DOCS_EXAMPLES_REACT_PATH=https://localhost:3002/v2-react -f .vuestorefrontcloud/test-next/docker/Dockerfile .`, - run image using `docker run -t -i -p 3002:3000 test-next`, (flags `i` and `t` allows to run command and then kill it with `ctrl+c` https://github.com/moby/moby/issues/2838#issuecomment-29205965) - open browser and go to the address `http://localhost:3002` to see the app page running. diff --git a/.vuestorefrontcloud/test-nuxt/docker/Dockerfile b/.vuestorefrontcloud/test-nuxt/docker/Dockerfile index 0f98b55eb1..dfc34c1f10 100644 --- a/.vuestorefrontcloud/test-nuxt/docker/Dockerfile +++ b/.vuestorefrontcloud/test-nuxt/docker/Dockerfile @@ -8,8 +8,7 @@ ARG VITE_DOCS_BASEPATH ARG VITE_DOCS_EXAMPLES_VUE_PATH ARG ENVIRONMENT -ENV VITE_DOCS_BASEPATH=$VITE_DOCS_BASEPATH -ENV VITE_DOCS_EXAMPLES_VUE_PATH=$VITE_DOCS_EXAMPLES_VUE_PATH +ENV NUXT_DOCS_EXAMPLES_VUE_PATH=$VITE_DOCS_EXAMPLES_VUE_PATH ENV ENVIRONMENT=$ENVIRONMENT RUN yarn diff --git a/.vuestorefrontcloud/test-nuxt/docker/README.md b/.vuestorefrontcloud/test-nuxt/docker/README.md index 1ec1bdf849..eab0b2c9e6 100644 --- a/.vuestorefrontcloud/test-nuxt/docker/README.md +++ b/.vuestorefrontcloud/test-nuxt/docker/README.md @@ -5,6 +5,6 @@ You can debug dockerized docs image by following steps below: - run terminal in `root` directory -- build image using `DOCKER_BUILDKIT=1 docker build -t test-nuxt -f .vuestorefrontcloud/test-nuxt/docker/Dockerfile .`, +- build image using `DOCKER_BUILDKIT=1 docker build -t test-nuxt --build-arg VITE_DOCS_EXAMPLES_VUE_PATH=https://localhost:3002/v2-vue -f .vuestorefrontcloud/test-nuxt/docker/Dockerfile .`, - run image using `docker run -t -i -p 3001:3000 test-nuxt`, (flags `i` and `t` allows to run command and then kill it with `ctrl+c` https://github.com/moby/moby/issues/2838#issuecomment-29205965) - open browser and go to the address `http://localhost:3001` to see the app page running. diff --git a/apps/docs/components/.env.example b/apps/docs/components/.env.example index e1271f77f1..60680934cc 100644 --- a/apps/docs/components/.env.example +++ b/apps/docs/components/.env.example @@ -1,3 +1,3 @@ -VITE_DOCS_EXAMPLES_VUE_PATH=http://localhost:3001 -VITE_DOCS_EXAMPLES_REACT_PATH=http://localhost:3002 -VITE_DOCS_BASEPATH=/v2 \ No newline at end of file +NUXT_DOCS_EXAMPLES_VUE_PATH=http://localhost:3001 +NUXT_DOCS_EXAMPLES_REACT_PATH=http://localhost:3002 +NUXT_DOCS_BASEPATH=/v2 \ No newline at end of file diff --git a/apps/docs/components/nuxt.config.ts b/apps/docs/components/nuxt.config.ts index f22e712e8a..803f3cf3e1 100644 --- a/apps/docs/components/nuxt.config.ts +++ b/apps/docs/components/nuxt.config.ts @@ -3,8 +3,6 @@ export default defineNuxtConfig({ extends: ['sf-docs-base'], app: { - baseURL: process.env.VITE_DOCS_BASEPATH ?? '', - head: { link: [ { @@ -15,10 +13,10 @@ export default defineNuxtConfig({ }, }, robots: { - enabled: false + enabled: false, }, sitemap: { - enabled: false + enabled: false, }, // fix via https://github.com/nuxt/content/issues/2254 alias: { @@ -28,8 +26,8 @@ export default defineNuxtConfig({ runtimeConfig: { public: { storefrontUi: true, - DOCS_EXAMPLES_VUE_PATH: process.env.VITE_DOCS_EXAMPLES_VUE_PATH, - DOCS_EXAMPLES_REACT_PATH: process.env.VITE_DOCS_EXAMPLES_REACT_PATH, + DOCS_EXAMPLES_VUE_PATH: process.env.NUXT_DOCS_EXAMPLES_VUE_PATH, + DOCS_EXAMPLES_REACT_PATH: process.env.NUXT_DOCS_EXAMPLES_REACT_PATH, siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://docs.storefrontui.io', siteName: 'Storefront UI', siteDescription: 'Fast, accessible, and fully customizable components built for e-commerce.', @@ -43,6 +41,7 @@ export default defineNuxtConfig({ }, }, prerender: { + routes: ['/'], crawlLinks: true, failOnError: false, }, diff --git a/apps/preview/next/next.config.mjs b/apps/preview/next/next.config.mjs index 640892acc9..8e5cba30ed 100644 --- a/apps/preview/next/next.config.mjs +++ b/apps/preview/next/next.config.mjs @@ -6,10 +6,10 @@ const isProd = process.env.PROD === 'true'; /** @type {import('next').NextConfig} */ export default { env: { - DOCS_EXAMPLES_REACT_PATH: process.env.VITE_DOCS_EXAMPLES_REACT_PATH || '', + DOCS_EXAMPLES_REACT_PATH: process.env.NEXT_DOCS_EXAMPLES_REACT_PATH || '', }, - basePath: process.env.VITE_DOCS_EXAMPLES_REACT_PATH - ? new URL(process.env.VITE_DOCS_EXAMPLES_REACT_PATH).pathname + basePath: process.env.NEXT_DOCS_EXAMPLES_REACT_PATH + ? new URL(process.env.NEXT_DOCS_EXAMPLES_REACT_PATH).pathname : '', reactStrictMode: true, swcMinify: true, @@ -49,14 +49,24 @@ export default { }, }); - const reactPackage = resolve(process.cwd(), '..', '..', '..', 'packages', 'sfui', 'frameworks', 'react', 'index.ts'); + const reactPackage = resolve( + process.cwd(), + '..', + '..', + '..', + 'packages', + 'sfui', + 'frameworks', + 'react', + 'index.ts', + ); config.resolve.alias = { ...config.resolve.alias, '@storefront-ui/react': reactPackage, '@storefront-ui/vue': reactPackage, - } + }; } return config; - } + }, }; diff --git a/apps/preview/nuxt/nuxt.config.ts b/apps/preview/nuxt/nuxt.config.ts index 7a17fdb5a3..a574a7cdd7 100644 --- a/apps/preview/nuxt/nuxt.config.ts +++ b/apps/preview/nuxt/nuxt.config.ts @@ -6,7 +6,7 @@ const isProd = process.env.PROD === 'true'; export default defineNuxtConfig({ app: { - baseURL: process.env.VITE_DOCS_EXAMPLES_VUE_PATH ? new URL(process.env.VITE_DOCS_EXAMPLES_VUE_PATH).pathname : '', + baseURL: process.env.NUXT_DOCS_EXAMPLES_VUE_PATH ? new URL(process.env.NUXT_DOCS_EXAMPLES_VUE_PATH).pathname : '', head: { htmlAttrs: { lang: 'en', @@ -42,6 +42,12 @@ export default defineNuxtConfig({ } : {}), }, + nitro: { + prerender: { + routes: ['/'], + crawlLinks: true, + }, + }, vite: { plugins: [ {