SolidJSS
SolidJS•16mo ago•
7 replies
RaySlash

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;"]


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). My end goal is to create a PWA from this codebase.

I do have index.html in the root which loads src/index.tsx using <script></script> that has the render function. The application works perfectly fine when I do bun dev to build and serve for development.

Right now, I am having a problem where 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.
20241014_13h10m08s_grim.png
20241014_13h10m30s_grim.png
Was this page helpful?