I have a Vue.js 3 project using TypeScript and Vite. I am trying to integrate it into an ASP.Net mvc 5 - Umbraco project. I've got both of the projects working and have used the 'npm run build' command to create dist files from the vue project.
I've taken these files over to the C# project, created the .cshtml View file that links to the dist .js and dist .css files. The project fires up without issue until I go to the specific page where the .cshtml view is being used. At that page, an error appears in the browser console:
Uncaught SyntaxError: Unexpected token 'export'
Does the ASP.Net project require the package.json/tsconfig.json/tsconfig.config.json/vite.config.ts files as well?
Related
So in Vue.js app to make an app progressive you would run a command "vue add #vue/pwa" and it would add a "registerServiceWorker.js" file and after you would create a production build "npm run build" it would create a "dist" folder where the "manifest.json" file is stored. But in Vite Vue app when you are adding a pwa plugin, it adds the "registerServiceWorker.js" but it doesn't adds a file "manifest.json" inside of dist folder after creating product build.
So how can i fix this ??
I hope I could make things clear about this topic :
I have an Angular + .Net core project
If I apply the command:
ng build --prod
It would create the static files required to be served by kestrel in wwwroot folder.
And it would work just fine...
this is the wwwroot files output:
wwwroot content files
However, If I applied SSR on the angular project and entered the command to build:
NPM run build:ssr
I would get the 1 javascript file in the folder wwwroot which is main.js
of course when I run
dotnet run
would get this output from the app
statusCode: 500,
message: "Could not find file 'C:....\api\wwwroot\index.html'.....
So is this a wrong way of doing it?
guidance is very much appreciated...
Thanks
So this is the error i get when i open my vue project... except that i cant even locate my manifest.json nore do i have a /img/icons folder in the project. I cannot figure out what the error is or how to correct it
Error while trying to use the following icon from the Manifest: http://localhost:8080/img/icons/android->chrome-192x192.png (Download error or resource isn't a valid image)
The error you're seeing is typically caused by altering a project created using Vue Cli 3's command vue create some-project and then removing either parts of or in its entirety the public folder. Namely, the error complains about the absence of icon files situated in public/img/icons, aimed at providing android, apple or web icons/favicons for the served/built app.
A possible fix for this error is to create a new project (run vue create whatever outside of your project) and copy-paste the resulting public/ folder into your current project.
If you haven't created your project with Vue Cli 3, the solution above will likely not work.
For Vue Cli 2.x projects, according to Vue Cli docs running vue init webpack my-project in the root of the project (where my-project is the name of your project as set in package.json) might work.
We're currently using vue as a script file without a build step. We want to start using webpack and vue-cli. We need to preserve the asp login pages and session handling (cookies) so we need the vue stuff and the asp stuff to share an origin.
The current plan is to ignore the vue dev server, to put src and dist inside the existing .net project folder, and to have iis serve the contents of dist. Is this the way to go? We will lose hot reloading.
If we do this, how and where do I configure the url fragment from the web root to the dist folder? Currently, vue expects dist to be the root of the domain.
I am trying to use Aurelia bundle --force command with an Aurelia app hosted within a page of my MVC application.
When i try to run the command, I keep getting the following error:
info: Creating bundle ...
fs.js:549
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
Error: ENOENT: no such file or directory, open 'C:\Users\...\WebFrontend\index.html'
How do you change the location where aurelia bundle looks up for the index.html? My index.html is not in the root of the website. Furthermore, my aurelia 'index.html' is actually named settings.cshtml
UPDATE:
I finally got it working by putting my entire Aurelia app within a sub folder of my MVC app. Using post build events in my project, I got Aurelia-CLI to bundle my app. Within my setting.cshtml, I basically just reference the config.js and system.js.
This works great, but I need to rebuild the app each time I make a change which is not ideal. Still need to figure this one out.
Steve Sanderson made a template for Aurelia (that is no longer supported by Microsoft). https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/
You can also use the Aureali cli to create one.
This should work better now then in 2015.