search

Eptagone / Vite.AspNetCore

Small library to integrate Vite into ASP.NET projects
MIT License
264 stars 35 forks source link

Can't find the @@Vite/Client, #68

Closed LittleWhiteLoti closed 10 months ago

LittleWhiteLoti commented 11 months ago

image

I started up the ViteNet Razor pages from the github repo. Any clue what might be happening. I do have vite 5.03 installed.

Eptagone commented 11 months ago

Hi, did you try to reload the page? That can happen if the Vite Dev Server is not ready yet.

LittleWhiteLoti commented 11 months ago

@Eptagone Thanks for getting back so quickly.

image

I tried reloading it and this still happen. I did notice that a console that normally runs the vite server didn't start. Is this not part of the services? Am I missing something.

Eptagone commented 11 months ago

Mmm, can you access to https://localhost:5173/@vite/client in the browser? Did you try to run npm ci? to clean install que npm packages

LittleWhiteLoti commented 11 months ago

I did run npm ci and it just downloaded a few packages. One which was vulnerable by the way.

In the ViteNet.MVC example project whenever I try to visit https://localhost:5173/@vite/client

Firefox image

Chrome image

Edge image

Eptagone commented 11 months ago

Hi. It's true that there were vulnerable NPM packages. I just updated them. Please let me know if with those changes you can now run the Razor pages example.

Regarding the SSL error in Firefox, I don't know if regenerating the self-signed certificate could help. https://learn.microsoft.com/en-us/dotnet/core/additional-tools/self-signed-certificates-guide

And also, what OS are you using to run the project?

LittleWhiteLoti commented 11 months ago

Windows 10 with Microsoft Visual Studio Community 2022 (64-bit) - Current Version 17.8.2

Tell me if I'm doing something wrong. These are the steps I'm doing.

  1. Clone repo
  2. Build solution
  3. Build ViteNet.RazorPages project from examples
  4. Run project
frisksitron commented 10 months ago

This might not be related to your issue @LittleWhiteLoti, but ViteOptionsExtensions.GetViteDevServerUrl does not take ViteOptions.Base into account. So if we configure a subfolder for vite assets, the @vite/client won't load.

LittleWhiteLoti commented 10 months ago

@frisksitron did you get it to work? Can you provide an example project that I might look at? I'm trying to get it to work with Vue 3 and vite.

Deepfreezed commented 10 months ago

@LittleWhiteLoti basic sample provided works. Vue should also work based on that because everything is JS.

If you are cloning the sample. below worked for me:

npm install npm build npm dev Run ASP.NET (hit F5 on browser if is doesn't load first time)

LittleWhiteLoti commented 10 months ago

@Deepfreezed thanks I will test it later

LittleWhiteLoti commented 10 months ago

Okay I finally got it to work for the following steps.

Use Visual Studio not visual studio code.

  1. Clone repo https://github.com/Eptagone/Vite.AspNetCore.git
  2. Open the solution from examples ViteNET.sln
  3. Set ViteNET.RazorPages as the default startup project if it is not already setup
  4. Open powershell and navigate to the examples/ViteNET.RazorPages
  5. run npm i
  6. From Visual Studio build the project
  7. start the project from Visual Studio's play button
  8. Wait for it to load once in the browser, then refresh it again to load everything