S
SolidJS•3mo ago
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;"]
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). 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.
No description
No description
3 Replies
RaySlash
RaySlashOP•3mo ago
Just to clarify that its not rehitting caches, I also tried opening this using a different browser and private window. Major problem is that bunx --bun vite preview does not serve the files properly even if I did bunx cap sync before previewing. Ill add my package.json for reference as well: 
{
  "name": "vite-template-solid",
  "version": "0.0.1",
  "description": "WET",
  "type": "module",
  "scripts": {
    "start": "bunx --bun vite",
    "dev": "bunx --bun vite",
    "build": "bunx --bun vite build",
    "serve": "bunx --bun vite preview"
  },
  "license": "MIT",
  "devDependencies": {
    "@capacitor/cli": "^6.1.2",
    "@types/bun": "^1.1.9",
    "@types/node": "^20.16.5",
    "ts-node": "^10.9.2",
    "typescript": "^5.6.2",
    "vite": "^5.4.5",
    "vite-plugin-solid": "^2.10.2"
  },
  "dependencies": {
    "@ark-ui/solid": "^3.12.0",
    "@capacitor/android": "^6.1.2",
    "@capacitor/camera": "^6.0.2",
    "@capacitor/core": "^6.1.2",
    "@capacitor/ios": "^6.1.2",
    "@capacitor/preferences": "^6.0.2",
    "@capacitor/share": "^6.0.2",
    "@ionic/pwa-elements": "^3.3.0",
    "@kobalte/core": "^0.13.6",
    "@solidjs/router": "^0.14.5",
    "autoprefixer": "^10.4.20",
    "base64-arraybuffer": "^1.0.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "embla-carousel-solid": "^8.3.0",
    "lucide-solid": "^0.407.0",
    "postcss": "^8.4.45",
    "solid-js": "^1.8.22",
    "tailwind-merge": "^2.5.2",
    "tailwindcss": "^3.4.11",
    "tailwindcss-animate": "^1.0.7"
  }
}
{
  "name": "vite-template-solid",
  "version": "0.0.1",
  "description": "WET",
  "type": "module",
  "scripts": {
    "start": "bunx --bun vite",
    "dev": "bunx --bun vite",
    "build": "bunx --bun vite build",
    "serve": "bunx --bun vite preview"
  },
  "license": "MIT",
  "devDependencies": {
    "@capacitor/cli": "^6.1.2",
    "@types/bun": "^1.1.9",
    "@types/node": "^20.16.5",
    "ts-node": "^10.9.2",
    "typescript": "^5.6.2",
    "vite": "^5.4.5",
    "vite-plugin-solid": "^2.10.2"
  },
  "dependencies": {
    "@ark-ui/solid": "^3.12.0",
    "@capacitor/android": "^6.1.2",
    "@capacitor/camera": "^6.0.2",
    "@capacitor/core": "^6.1.2",
    "@capacitor/ios": "^6.1.2",
    "@capacitor/preferences": "^6.0.2",
    "@capacitor/share": "^6.0.2",
    "@ionic/pwa-elements": "^3.3.0",
    "@kobalte/core": "^0.13.6",
    "@solidjs/router": "^0.14.5",
    "autoprefixer": "^10.4.20",
    "base64-arraybuffer": "^1.0.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "embla-carousel-solid": "^8.3.0",
    "lucide-solid": "^0.407.0",
    "postcss": "^8.4.45",
    "solid-js": "^1.8.22",
    "tailwind-merge": "^2.5.2",
    "tailwindcss": "^3.4.11",
    "tailwindcss-animate": "^1.0.7"
  }
}
Mango Juicy
Mango Juicy•3mo ago
For super easy deployment, you can use something like Cloudflare pages, Vercel, Netlify. Then you don't need to create a docker image. The docker and docker-compose setup probably adds unnecessary complexity. Where are you deploying to? With SPA's usually this is deployed to some object storage like S3 which would have higher uptime and is probably cheaper than a running a server
RaySlash
RaySlashOP•2mo ago
yeah, ty for reply. did not see this. Well, this was a project I wanted to hand over but they asked for docker as they are hosting in their own servers. Anyways, I figured out the problem. It was the store which was not passed using Context API. I rewrote the definition using context api and it works perfectly fine now. Ty That was a very weird behaviour where the dev server just works with no issues when I am not at all using context api. The same codebase with 0 changes when builds for deployment behaves entirely differently.

Did you find this page helpful?