title: SvelteKit ssr not working on docker container
body: <p>I create svelteKit project with adapter-node for build production and run it with docker-compose. It works but the SSR not working, but when I try to run without docker with <code>yarn run build</code> and <code>node build</code> its works with SSR. maybe that my DockerFile setup wrong or there setup that i miss?</p>
  <p>this <code>svelte.config.js</code></p>
  <pre class="lang-js prettyprint-override"><code>import adapter from '@sveltejs/adapter-node';
  import preprocess from 'svelte-preprocess';
  
  /** @type {import('@sveltejs/kit').Config} */
  const config = {
      // Consult https://github.com/sveltejs/svelte-preprocess
      // for more information about preprocessors
      preprocess: preprocess(),
  
      kit: {
          adapter: adapter(),
  
          // Override http methods in the Todo forms
          methodOverride: {
              allowed: ['PATCH', 'DELETE']
          }
      }
  };
  
  export default config;
  </code></pre>
  <p>this <code>Dockerfile</code></p>
  <pre><code>FROM node:16-alpine3.14
  
  WORKDIR /home/node/app
  
  ENV PORT=80
  
  COPY package.json ./
  COPY yarn.lock ./
  
  RUN corepack enable &amp;&amp; \
      yarn install --frozen-lockfile
  
  COPY . .
  RUN yarn run build
  
  EXPOSE ${PORT}/tcp
  
  CMD [&quot;node&quot;, &quot;build&quot;]
  </code></pre>
  <p>this <code>docker-compose.yml</code></p>
  <pre class="lang-yaml prettyprint-override"><code>version: '3'
  
  services:
    share:
      container_name: &quot;cosmo-share&quot;
      build: .
      ports:
        - 80:${PORT}
  </code></pre>
  <p>and this the <code>index.svelte</code> the page i called</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script context=&quot;module&quot; lang=&quot;ts&quot;&gt;
      import { MetaTags } from 'svelte-meta-tags';
  
      export async function load(loader: any) {
          const { fetch, url } = loader;
          try {
              const id = url.searchParams.get('id');
              if (id != null) {
                  const link = `${import.meta.env.VITE_BASE_URL}/api/v1/gallery/id?id=${id}`;
                  const response = await fetch(link);
                  if (response.ok) {
                      const data = await response.json();
                      return {
                          status: 200,
                          props: {
                              id: id,
                              image: data.data.path.path,
                              title: data.data.name
                          }
                      };
                  } else {
                      return {
                          status: 200,
                          props: {
                              id: id,
                              image: '',
                              title: ''
                          }
                      };
                  }
              } else {
                  return {
                      status: 200,
                      props: {
                          id: id,
                          image: '',
                          title: ''
                      }
                  };
              }
          } catch (err: any) {
              return {
                  status: 200,
                  props: {
                      id: '',
                      image: '',
                      title: ''
                  }
              };
          }
      }
  &lt;/script&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
      export let id: string;
      export let image: string;
      export let title: string;
  &lt;/script&gt;
  
  &lt;MetaTags
      title=&quot;Ubersnap - Cosmo share&quot;
      titleTemplate=&quot;%s | Ubersnap - Cosmo&quot;
      description=&quot;Ubersnap cosmo gallery&quot;
      canonical=&quot;https://ubersn.app/&quot;
      openGraph={{
          url: `https://ubersn.app?id=${id}`,
          title: 'Ubersnap - Cosmo gallery',
          description: 'Ubersnap cosmo gallery',
          images: [
              {
                  url: image,
                  alt: title
              }
          ],
          site_name: 'Ubersnap'
      }}
      twitter={{
          handle: '@handle',
          site: '@site',
          cardType: 'summary_large_image',
          title: 'Ubersnap - Cosmo share',
          description: 'Ubersnap cosmo gallery',
          image: image,
          imageAlt: title
      }}
  /&gt;
  &lt;div&gt;
      {#if image}
          &lt;img class=&quot;content-image&quot; src={image} alt=&quot;original data&quot; /&gt;
      {:else}
          &lt;p style=&quot;color: red&quot;&gt;{'There was error'}&lt;/p&gt;
      {/if}
  &lt;/div&gt;
  
  &lt;style&gt;
      .content-image {
          width: 100%;
      }
  &lt;/style&gt;
  </code></pre>
  <p>The metadata its render but not with dynamic value. but when i build and run without docker its works.</p>
  <p>I test with <code>yarn run build</code> and <code>node build</code> without docker and access the site with view-source:http://localhost:3000/?id=6283075c1d13e7342ce29ca8 i got the result with <a href="https://i.stack.imgur.com/ZaiYP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZaiYP.png" alt="Without Docker" /></a></p>
  <p>And test again with <code>docker-compose up</code> and access the size with view-source:http://localhost/?id=6283075c1d13e7342ce29ca8 i got the result with <a href="https://i.stack.imgur.com/83d0a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/83d0a.png" alt="With Docker" /></a></p>
  <p>the diff its same variable its missing that image link and the title of the image</p>
  <h1>Update</h1>
  <p>so far i found that the promblem on docker-compose cause when i try to build image directly with <code>docker run</code> without docker-compose that works well. maybe something wrong with my docker-compose.yml</p>