Skip to content

Commit

Permalink
fix: loading example assets without relying on redirects (#3247)
Browse files Browse the repository at this point in the history
update docker debugging docs
  • Loading branch information
FRSgit authored Nov 20, 2024
1 parent 3ec731d commit c58f939
Show file tree
Hide file tree
Showing 8 changed files with 36 additions and 16 deletions.
6 changes: 3 additions & 3 deletions .vuestorefrontcloud/docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
10 changes: 10 additions & 0 deletions .vuestorefrontcloud/router/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
4 changes: 2 additions & 2 deletions .vuestorefrontcloud/test-next/docker/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ 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_BASEPATH=$VITE_DOCS_BASEPATH
ENV NEXT_DOCS_EXAMPLES_REACT_PATH=$VITE_DOCS_EXAMPLES_REACT_PATH
ENV ENVIRONMENT=$ENVIRONMENT

RUN yarn
Expand Down
2 changes: 1 addition & 1 deletion .vuestorefrontcloud/test-next/docker/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
4 changes: 2 additions & 2 deletions .vuestorefrontcloud/test-nuxt/docker/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ 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_BASEPATH=$VITE_DOCS_BASEPATH
ENV NUXT_DOCS_EXAMPLES_VUE_PATH=$VITE_DOCS_EXAMPLES_VUE_PATH
ENV ENVIRONMENT=$ENVIRONMENT

RUN yarn
Expand Down
2 changes: 1 addition & 1 deletion .vuestorefrontcloud/test-nuxt/docker/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
22 changes: 16 additions & 6 deletions apps/preview/next/next.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
}
},
};
2 changes: 1 addition & 1 deletion apps/preview/nuxt/nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down

0 comments on commit c58f939

Please sign in to comment.