Are multiple pages supported?

[boggye]

Hi - I have an MVC application that has many cshtml views. I have a main layout page where I want to use some react components, but I also have other pages where I want to use other components.

From looking at the vite.config.js file of the MVC example, we have just: input: 'Assets/main.ts',. According to the vite docs you can have multiple input entries:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  
  build: {
	outDir: '../wwwroot',
    rollupOptions: {
      input: {
        page01: resolve(__dirname, 'page01/index.html'),
	page02: resolve(__dirname, 'page02/index.html'),
      }
    }
  }
})

(this is an example from my tests).

This poses an interesting issue - if a page01 uses a main layout which pulls some react components, then it has its own components, I guess the script for page01 should not include scripts already included by the main layout (such as the react library). Or maybe I am going the wrong way about it, the page itself should take care of loading everything it needs including the stuff that the main layout needs.

How would one separate the scripts? Ideally, under Assets I would have something like this:

layout
   main.ts
   ...
page01:
	main.ts
	...
page02
	main.ts
	...

...	

I am going to experiment more to see if I can get it to work and I will come back here with more information if I find an acceptable solution.

Just a disclaimer: I am very new to vite, and react, but I have experience with the .net platform. I have to admit that I find vite challenging - there are a lot of moving pieces that have to be placed so the cshtml view can reference them at development time and in the production environment.

Thanks

[boggye]

Ok, my test worked !!! I cannot believe it :-)

Here is some info. first of all, I installed react.

I changed vite.config.ts:

				input: {
					layout: 'Assets/layout/main.ts',
					index: 'Assets/index/main.jsx'
				},

here is the content of the Assets folder:

common
index
layout
public
vite-env.d.ts
common\counter.scss
common\counter.ts
index\main.jsx
layout\app.ts
layout\main.ts
layout\style.scss
public\dotnet.svg
public\typescript.svg
public\vite.svg

In other words I placed the different scripts in their own folders under Assets.

In the index.cshtml I placed:

@section Scripts {
<!-- This line includes your "main.ts" entrypoint -->
<script type="module" vite-src="~/layout/main.ts"></script>
<script type="module" vite-src="~/index/main.jsx"></script>
}

I tested the published version by running the exe and it found the js scripts properly!

[Eptagone]

Hi @boggye.

Well, you could have one entry point per page if you want, although I would suggest using one entry point per layout. I think it's better to have more than one entry point only when two pages change a lot both visually and behaviorally. For example, in a CMS system, the admin dashboard and the home page usually have different designs and behaviors. Then you would have two entry points, one for each layout.

On the other hand, to minimize script loading on pages to include only the React components you're going to use on each page, I think it might be a better approach to use dynamic imports instead, which will split your entry point into chunks. These chunks will be imported and loaded to the page as you call them in your scripts.
You can also take a look at the Vite glob import feature if you want.

[boggye]

Hi @Eptagone
By any chance do you have a sample that uses dynamic imports? I would like to see what it would like.
Thank you!

[Eptagone]

Hi, it's really easy. If for example you have something like this:

import { myFunction } from "./myModule";
// ...
if (foo !== null) {
    myFunction(foo);
}

Change it to:

// ...
if (foo !== null) {
    import("./myModule")
        .then(m => m.myFunction(foo));
}
// ...

The import() function is async. So, you can also use async programming like this:

// ...
async function init() {
    // ...
    if (foo !== null) {
        const module = await import("./myModule");
        module.myFunction(foo);
    }
    // ...
}

init();

// ...

[boggye]

Hi @Eptagone

Thanks for the suggestions. I will definitely look into it.

The more I think about it, I think you are right - it make sense to have one entry point per layout, which will actually keep things simple.

Thanks again!