deploying the project

[RaghdanA]

I am trying to deploy the same structure of the project on github, but I am not able to do so. In most cases, it's only showing the HTML file of the project. How can you deploy the same project on GitHub or any other servers?

[Tfc538]

Just use the same npm command lines as usual (npm install, npm run dev) via SSH if you have credentials

[akuliakuli]

you can deploy this project using surge,if you are using vite js with three.js then first u need to run npm build,and after installing surge(its very easy to deploy webpage using it,tutorial is 2 minute video) you deploy the dist folder,so everything works fine https://surge.sh/

[akuliakuli]

yes i copy pasted the answer,but the issue is so popular so i had to do it

[hamzahW576]

I am using surge, but I stilll keep on seeing the HTML text. It doesn't display the 3D objects or animations or even the text in right format. What can I do?

[Tfc538]

Just use the same npm command lines as usual (npm install, npm run dev) via SSH if you have credentials

[young-oct]

@Tfc538 hi, thanks for the answer. I ran into this same problem when it comes to deploying the site. I also tried to load a stl file externally instead of creating one. I can view the stl file (external one) fine on my localhost after running npx vite. But after I build it with 'npx vite build' and try to view it with 'npx vite preview'. Only the stl created in the main.js is present not the one loaded. Any suggestion is appreciated.

[Tfc538]

@young-oct can you please ping me here again in about 3-4 hours? I'm not home right now.

[young-oct]

@Tfc538 , no rush and I appreciate you offer to take a look. whenever you have time, feel free to check out this https://github.com/young-oct/app here is a minimal working example to show the issue I ran into. i think the issue is in the main.js. where stl is imported but I have no idea how to fix it. I tried a bunch of different methods. so far no luck

[Tfc538]

@young-oct do you still need help? I kinda got stuck on a issue myself and forgot about your issues…

[young-oct]

@Tfc538 ,No worries, I’ve managed to figure it out! I encountered a bit of a hiccup with my project structure, but after some tweaking, I resolved the issue. I think it could be helpful for others who might run into a similar situation, so I'm sharing my Vite configuration here as well as my project structure.

└───src
│   index.html
│   └───js
│       │   script.js
├── css/
│   └── style.css
└───public
│   └── image.png

import { defineConfig } from "vite";
import fs from "fs";
import path from "path";
// Ensure proper plugins are imported, if any are used

export default defineConfig({
  root: path.resolve(__dirname, "src"),
  base: "/", // Default setting
  publicDir: path.resolve(__dirname, "public"),

  // Development server configuration
  server: {
    port: 3000,
    host: "localhost",
    https: false,
  },

  // Production build configuration
  build: {
    chunkSizeWarningLimit: 1000,
    assetsDir: "assets", // Specify a directory within `dist` for better organization
    outDir: path.resolve(__dirname, "dist"), // Ensure the output directory is correctly resolved

    minify: "esbuild", // Use 'esbuild' for faster minification
    cssCodeSplit: true,
    assetsInlineLimit: 4096,
    sourcemap: false,

    // Adjusting rollupOptions to better handle input and output settings
    rollupOptions: {
      input: {
        ...Object.fromEntries(
          fs
            .readdirSync(path.resolve(__dirname, "src"))
            .filter((file) => file.endsWith(".html"))
            .map((file) => [path.basename(file, ".html"), path.resolve(__dirname, "src", file)])
        ),
        script: path.resolve(__dirname, "src/js/script.js"),
      },
      output: {
        entryFileNames: "assets/[name].[hash].js",
        chunkFileNames: "assets/[name].[hash].js",
        assetFileNames: "assets/[name].[hash][extname]",
      },
    },
  },

  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      // Add more aliases as needed
    },
  },
});

[Tfc538]

Great that you solved it! I think its kinda weird that this issue is opened for 3 years now @RaghdanA

[Tfc538]

@fireship-io do you mind closing this issue?