Z
Zerops•3mo ago
ZenitoGR | Chris | new dev

I cannot host on zerops my vite project?

what do I need to do? 
zerops:
  - setup: nodejs0
    # ==== how to build your application ====
    build:
      # what technologies should the build
      # container be based on (can be an array)
      base: nodejs@22

      # what commands to use to build your app
      buildCommands:
        - npm i
        - npm run build

      # select which files / folders to deploy
      # after the build successfully finished
      deployFiles:
        - dist
        - package.json
        - node_modules

      # *optional*: which files / folders
      # to cache for the next build run
      cache:
        - node_modules
        - package-lock.json

    # ==== how to run your application ====
    run:
      # what technology should the runtime
      # container be based on, can be extended
      # in `run.prepareCommands` using
      # `zsc install nodejs@20`
      base: nodejs@22

      # what ports your app listens on
      # and whether it supports http traffic
      ports:
        - port: 3000
          httpSupport: true

      # how to start your application
      start: npm run start
zerops:
  - setup: nodejs0
    # ==== how to build your application ====
    build:
      # what technologies should the build
      # container be based on (can be an array)
      base: nodejs@22

      # what commands to use to build your app
      buildCommands:
        - npm i
        - npm run build

      # select which files / folders to deploy
      # after the build successfully finished
      deployFiles:
        - dist
        - package.json
        - node_modules

      # *optional*: which files / folders
      # to cache for the next build run
      cache:
        - node_modules
        - package-lock.json

    # ==== how to run your application ====
    run:
      # what technology should the runtime
      # container be based on, can be extended
      # in `run.prepareCommands` using
      # `zsc install nodejs@20`
      base: nodejs@22

      # what ports your app listens on
      # and whether it supports http traffic
      ports:
        - port: 3000
          httpSupport: true

      # how to start your application
      start: npm run start
{
  "name": "vite_react_shadcn_ts",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "lint": "eslint .",
    "preview": "vite preview",
    "start": "vite preview"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.0",
    "@radix-ui/react-accordion": "^1.2.0",
    "@radix-ui/react-alert-dialog": "^1.1.1",
    "@radix-ui/react-aspect-ratio": "^1.1.0",
    "@radix-ui/react-avatar": "^1.1.0",
    "@radix-ui/react-checkbox": "^1.1.1",
    "@radix-ui/react-collapsible": "^1.1.0",
    "@radix-ui/react-context-menu": "^2.2.1",
    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-hover-card": "^1.1.1",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-menubar": "^1.1.1",
    "@radix-ui/react-navigation-menu": "^1.2.0",
    "@radix-ui/react-popover": "^1.1.1",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-radio-group": "^1.2.0",
    "@radix-ui/react-scroll-area": "^1.1.0",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slider": "^1.2.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.0",
    "@radix-ui/react-toast": "^1.2.1",
    "@radix-ui/react-toggle": "^1.1.0",
    "@radix-ui/react-toggle-group": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.4",
    "@tanstack/react-query": "^5.56.2",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.0",
    "date-fns": "^3.6.0",
    "embla-carousel-react": "^8.3.0",
    "input-otp": "^1.2.4",
    "lucide-react": "^0.462.0",
    "next-themes": "^0.3.0",
    "react": "^18.3.1",
    "react-day-picker": "^8.10.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.53.0",
    "react-resizable-panels": "^2.1.3",
    "react-router-dom": "^6.26.2",
    "recharts": "^2.12.7",
    "sonner": "^1.5.0",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.3",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@tailwindcss/typography": "^0.5.15",
    "@types/node": "^22.5.5",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.9.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "lovable-tagger": "^1.1.3",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.11",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.1",
    "vite": "^5.4.1"
  }
}
{
  "name": "vite_react_shadcn_ts",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "lint": "eslint .",
    "preview": "vite preview",
    "start": "vite preview"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.0",
    "@radix-ui/react-accordion": "^1.2.0",
    "@radix-ui/react-alert-dialog": "^1.1.1",
    "@radix-ui/react-aspect-ratio": "^1.1.0",
    "@radix-ui/react-avatar": "^1.1.0",
    "@radix-ui/react-checkbox": "^1.1.1",
    "@radix-ui/react-collapsible": "^1.1.0",
    "@radix-ui/react-context-menu": "^2.2.1",
    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-hover-card": "^1.1.1",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-menubar": "^1.1.1",
    "@radix-ui/react-navigation-menu": "^1.2.0",
    "@radix-ui/react-popover": "^1.1.1",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-radio-group": "^1.2.0",
    "@radix-ui/react-scroll-area": "^1.1.0",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slider": "^1.2.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-switch": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.0",
    "@radix-ui/react-toast": "^1.2.1",
    "@radix-ui/react-toggle": "^1.1.0",
    "@radix-ui/react-toggle-group": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.4",
    "@tanstack/react-query": "^5.56.2",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.0",
    "date-fns": "^3.6.0",
    "embla-carousel-react": "^8.3.0",
    "input-otp": "^1.2.4",
    "lucide-react": "^0.462.0",
    "next-themes": "^0.3.0",
    "react": "^18.3.1",
    "react-day-picker": "^8.10.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.53.0",
    "react-resizable-panels": "^2.1.3",
    "react-router-dom": "^6.26.2",
    "recharts": "^2.12.7",
    "sonner": "^1.5.0",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.3",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@tailwindcss/typography": "^0.5.15",
    "@types/node": "^22.5.5",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.9.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "lovable-tagger": "^1.1.3",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.11",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.0.1",
    "vite": "^5.4.1"
  }
}
7 Replies
ZenitoGR | Chris | new dev
ZenitoGR | Chris | new devOP•3mo ago
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";
import { componentTagger } from "lovable-tagger";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  server: {
    port: process.env.PORT ? parseInt(process.env.PORT) : 8080,
  },
  plugins: [
    react(),
    mode === 'development' &&
    componentTagger(),
  ].filter(Boolean),
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
}));
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import path from "path";
import { componentTagger } from "lovable-tagger";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  server: {
    port: process.env.PORT ? parseInt(process.env.PORT) : 8080,
  },
  plugins: [
    react(),
    mode === 'development' &&
    componentTagger(),
  ].filter(Boolean),
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
}));
@admin can I ping admin for help? I don't know? I get 502 in the zerops.io subdomain?
Michal Saloň
Michal Saloň•3mo ago
You have port 3000 in zerops.yml and 8080 in your defineConfig and I do not see a PORT env variable defined in your zerops.yml that overrides it to 3000. Also, this will make /var/www/dist, /var/www/package.json and /var/www/node_modules files/folders 
      deployFiles:
        - dist
        - package.json
        - node_modules
      deployFiles:
        - dist
        - package.json
        - node_modules
I am not sure how tis works exactly (not a JS on server side dev), but if you need content of dist folder directly in /var/www you can use ~ 
      deployFiles:
        - dist/~
        - package.json
        - node_modules
      deployFiles:
        - dist/~
        - package.json
        - node_modules
More info can be seen in our documentation: https://docs.zerops.io/
ZenitoGR | Chris | new dev
ZenitoGR | Chris | new devOP•3mo ago
thank you will try guides do not work
ZenitoGR | Chris | new dev
ZenitoGR | Chris | new devOP•3mo ago
https://docs.zerops.io/nodejs/tutorial/quickstart
Zerops Documentation | Zerops
Get started with the Zerops cloud platform with our knowledge base.
ZenitoGR | Chris | new dev
ZenitoGR | Chris | new devOP•3mo ago
ok managed to fix it I started fresh used the zerops.yml I was proposed based on the basic nodejs yml and then asked PearAI agent to fix the vite config and the package.json
Michal Saloň
Michal Saloň•3mo ago
Hmmm, this is the correct NodeJs documentation: https://docs.zerops.io/nodejs/overview This one should be deleted https://docs.zerops.io/nodejs/getting-started :facepalm: c.c. @Petra
Michal Saloň
Michal Saloň•3mo ago
You could maybe try Perplexity with this Space: https://www.perplexity.ai/collections/zerops-Yz3xb2yzRWa36NvJ3qTU1A It's set with all possible Zerops links, to pull from our docs etc. If you search only in "This space", it should only use provided links, or you could also enable Web, but "This space" should be enough.
No description

Did you find this page helpful?