SolidJS•2y ago•

7 replies

Deploying a VITE+Solid app

Hi,

I have been trying to deploy a SPA made using Vite + Solid for production. I wanted to create docker images for easy deployment. I already have nix setup for my development environment. I have my docker setup like follows:

FROM nixos/nix AS nix-builder

RUN nix-env -iA nixpkgs.nix
WORKDIR /app

COPY . /app

RUN nix develop --extra-experimental-features nix-command --extra-experimental-features flakes --command bun install
RUN nix develop --extra-experimental-features nix-command --extra-experimental-features flakes --command bunx vite build
RUN nix develop --extra-experimental-features nix-command --extra-experimental-features flakes --command bunx cap sync

FROM nginx:alpine
COPY --from=nix-builder /app/nginx.conf /etc/nginx/conf.d
COPY --from=nix-builder /app/dist /usr/share/nginx/html

EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]

FROM nixos/nix AS nix-builder

RUN nix-env -iA nixpkgs.nix
WORKDIR /app

COPY . /app

RUN nix develop --extra-experimental-features nix-command --extra-experimental-features flakes --command bun install
RUN nix develop --extra-experimental-features nix-command --extra-experimental-features flakes --command bunx vite build
RUN nix develop --extra-experimental-features nix-command --extra-experimental-features flakes --command bunx cap sync

FROM nginx:alpine
COPY --from=nix-builder /app/nginx.conf /etc/nginx/conf.d
COPY --from=nix-builder /app/dist /usr/share/nginx/html

EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]

services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "80:80"
    depends_on:
      - backend
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf

  backend:
    build:
      context: ./api
      dockerfile: Dockerfile
    ports:
      - "3001:3001"

services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "80:80"
    depends_on:
      - backend
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf

  backend:
    build:
      context: ./api
      dockerfile: Dockerfile
    ports:
      - "3001:3001"

I am currently using CapacitorJS along with these to export for ios and android platforms as well(

bunx cap sync

bunx cap sync

). My end goal is to create a PWA from this codebase.

I do have

index.html

index.html

in the root which loads

src/index.tsx

src/index.tsx

using

<script></script>

<script></script>

that has the

render

render

function. The application works perfectly fine when I do

bun dev

bun dev

to build and serve for development.

Right now, I am having a problem where

bunx vite preview

bunx vite preview

and serving through nginx serves me only a white blank screen. I can see small activity in the network tab but no ERROR at all. Please see the pictures.

SolidJS•2y ago•

7 replies

RaySlash

Deploying a VITE+Solid app

FROM nixos/nix AS nix-builder

RUN nix-env -iA nixpkgs.nix
WORKDIR /app

COPY . /app

RUN nix develop --extra-experimental-features nix-command --extra-experimental-features flakes --command bun install
RUN nix develop --extra-experimental-features nix-command --extra-experimental-features flakes --command bunx vite build
RUN nix develop --extra-experimental-features nix-command --extra-experimental-features flakes --command bunx cap sync

FROM nginx:alpine
COPY --from=nix-builder /app/nginx.conf /etc/nginx/conf.d
COPY --from=nix-builder /app/dist /usr/share/nginx/html

EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]

FROM nixos/nix AS nix-builder

RUN nix-env -iA nixpkgs.nix
WORKDIR /app

COPY . /app

RUN nix develop --extra-experimental-features nix-command --extra-experimental-features flakes --command bun install
RUN nix develop --extra-experimental-features nix-command --extra-experimental-features flakes --command bunx vite build
RUN nix develop --extra-experimental-features nix-command --extra-experimental-features flakes --command bunx cap sync

FROM nginx:alpine
COPY --from=nix-builder /app/nginx.conf /etc/nginx/conf.d
COPY --from=nix-builder /app/dist /usr/share/nginx/html

EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]

services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "80:80"
    depends_on:
      - backend
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf

  backend:
    build:
      context: ./api
      dockerfile: Dockerfile
    ports:
      - "3001:3001"

services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "80:80"
    depends_on:
      - backend
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf

  backend:
    build:
      context: ./api
      dockerfile: Dockerfile
    ports:
      - "3001:3001"

I am currently using CapacitorJS along with these to export for ios and android platforms as well(

bunx cap sync

bunx cap sync

). My end goal is to create a PWA from this codebase.

I do have

index.html

index.html

in the root which loads

src/index.tsx

src/index.tsx

using

<script></script>

<script></script>

that has the

render

render

function. The application works perfectly fine when I do

bun dev

bun dev

to build and serve for development.

Right now, I am having a problem where

bunx vite preview

bunx vite preview

and serving through nginx serves me only a white blank screen. I can see small activity in the network tab but no ERROR at all. Please see the pictures.

Deploying a VITE+Solid app

Deploying a VITE+Solid app

Similar Threads

Similar Threads

Similar Threads