Login/Register
Vite multiple apps with same source
Asked Answered
Solved javascripthtmlviteproject-structure
N

1

13

I am new to vite, to start with, I don't actually know what kind of structure I need.

I need to build multiple apps but some of them depend on the same components.

image

It worked well by far however I think mixed something

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script type="module" crossorigin src="/assets/modules/modules\\VPlayerList\\index-74e8dd8e.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/js/main-a0df4ea4.js">
    <link rel="stylesheet" href="/assets/main.44382b18.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

Hrefs are wrong, what am I missing?

forgot to attach vite config:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path, { resolve } from 'path'
import glob from 'glob';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    rollupOptions: {
      input: Object.fromEntries(
        glob.sync("src/modules/**/*.html").map((file:string) => [
          path.relative(
            "src",
            file.slice(0, file.length - path.extname(file).length)
          ),
          fileURLToPath(new URL(file, import.meta.url)),
          
        ])
      ),
      output: {
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/modules/[name]-[hash].js',
        dir: "dist"
      }
    },
  },
})
Ngocnguyen answered 21/10, 2022 at 22:22 Comment(6)
Please do not upload images of code/data/errors when asking a question. – Bettor
Please see the linked meta post. tl;dr images of code can't be indexed by search engines, they are harder to read, and they can't be copy-pasted. If you change the screenshot with a copy-pasted block of the code shown, then I will happily retract my downvote. – Bettor
@MichaelM. do you want the file structure to be written down as well? – Ngocnguyen
No, that is a legitimate reason for using an image. Project structures are not text because they are charts that show connections. Good question. – Bettor
@MichaelM. thank you good sir, so do I kindly ask you do you know any idea how should I proceed? – Ngocnguyen
Unfortunately, I am not an expert on this subject matter. However, it is a good question and I have upvoted it to attract more attention. I have also edited it to include relevant tags, so more people will see it and help. Best wishes on fixing the issue. – Bettor
P
8

I'm having the same issue, but cannot add comments so I'm posting my progress as an answer.
I needed to distribute 3 versions for my app, this is, a Mobile (hybrid) app compiled with CapacitorJS, an Online version (with some hidden functionalities, api tokens and such) and a Lite version (with minimal features).
All three apps share most of the system components, and it could be very easy to me to just build the three different versions at once.

My closest approach was to use 3 entry points, this is, three different index.html files. However, I cannot sepparate the build directories that are generated from the builds. This is my vite.config.js file so far:

import { resolve } from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: "",
  build: {
    rollupOptions: {
      input: {
        web: resolve(__dirname, './index_web.html'),
        mobile: resolve(__dirname, './index_mobile.html'),
        lite: resolve(__dirname, './index_lite.html'),
      },
      output: [
        {
          name: "web",
          dir: "dist_web",
        },
        {
          name: "mobile",
          dir: "dist_mobile",
        },
        {
          name: "lite",
          dir: "dist_lite",
        }
      ]
    },
  },
});

As stated before, this approach just builds three dist folders containing the three apps together. Maybe I'm missing a way to link outputs to inputs or there is a simpler way using different build commands.

For now, I'm using three different vite.config.js files, and building each version using different build commands declared in package.json:

{
  "name": "vite-multiple-build",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build-web": "vite build --config vite.config.web.js",
    "build-mobile": "vite build --config vite.config.mobile.js",
    "build-lite": "vite build --config vite.config.lite.js",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "vite": "^3.2.3"
  }
}

This seems to work fine, the only issue is that entry points need to be renamed after building.

Pragmatics answered 2/12, 2022 at 15:11 Comment(3)
thank you, I will try when I am free, this was one of my side projects =)) – Ngocnguyen
Sorry, I marked it as answer but forgot to add comment. It worked like a charm. Thank you!! Edit: I added a function to dynmically generate entry points too, I have a folder that holds each page and using the folder name I targeted them as entry point – Ngocnguyen
@ Matias Micheletto Have you reached a solution for your statement?: Maybe I'm missing a way to link outputs to inputs – Somato

© 2022 - 2024 — McMap. All rights reserved.