No index.html as entry

[ItaiAxelrad]

I am using a static site generator and have no index.html file in the root directory prior to serve/build.
How would I specify for example my ./some/dir/index.js file instead of index.html as an entry point?

[cawa-93]

https://vitejs.dev/guide/build.html#library-mode

[dparker2]

But then you lose the ability for your bundle to support older browsers, as the legacy plugin does not support building in library mode.

[ChuckJonas]

even in library mode , i get an error

Could not resolve entry module "index.html".

[richardsimko]

Since this is the top hit on Google for "vite without index.html" here is the actual docs for how to do this https://vitejs.dev/guide/backend-integration.html

(Library mode isn't the right answer)

[muuvmuuv]

@ItaiAxelrad which SSG are you using?

[ItaiAxelrad]

I was using eleventy

[richardsimko]

Since this is the top hit on Google for "vite without index.html" here is the actual docs for how to do this https://vitejs.dev/guide/backend-integration.html

(Library mode isn't the right answer)

[McGern]

Have been following that guide, but I wasn't able to get it running unless I created a stub index.html page with the relevant entrypoint. Without the page, the dev server is running but doesn't have anything to point to i.e. going to localhost:5173 got a 404 and there was no watch when files where changed.

Are there some properties in the config that are required for development input entry points? (input and rollupOptions outside of the build object didn't seem to have any effect).

[richardsimko]

You need to look at step 2 of the guide. In order for this to work you need to have a different backend running on a different port which is the one you access. This backend then serves the JS files from the vite dev server port.

[Shashank-Bhatt1]

I am not getting this. if someone does not want to enable library mode then what are the options just to compile script and see the result in browser without having to write <script type="module"> in script tag within index.html? Just like how webpack offers to specify entry and output thing.

When i export es version of my bundled script from child package (or even kept source file itself as module prop in package.json doesn;r matter) and import same in parent app, it looks like all modules compiled within browser itself which takes almost 9-10 seconds to see the actual output after compilation in dev mode as there are multiple modules there.

I tried to do this as mentioned in step 2. I don't need to build, and just want to see frontend using dev.

<script type="module" src="/p/http://localhost:5600/@vite/client"></script>
<script type="module"  src="/p/http://localhost:5600/src/js/index.js"></script>

So this leads to only one thing. Compile only in child package and only use umd version in parent.

[serious-angel]

In addition, please check ready and working implementations of enterprise level like Laravel:

// Illuminate\Foundation\Vite

// ...
public function __invoke($entrypoints, $buildDirectory = null)
{
    $entrypoints = new Collection($entrypoints);
    $buildDirectory ??= $this->buildDirectory;


    if ($this->isRunningHot()) {
        return new HtmlString(
            $entrypoints
                ->prepend('@vite/client')
                ->map(fn ($entrypoint) => $this->makeTagForChunk($entrypoint, $this->hotAsset($entrypoint), null, null))
                ->join('')
        );
    }


    $manifest = $this->manifest($buildDirectory);
    // ...

Source