I was following your article and I am having difficulty setting MapSpaFallbackRoute. If this feature is added in this repo, then it will be helpful to many in my opinion.

Hi there,

I know that the 3.0 version isn't final yet, so I'm testing your 3.0 branch.
When using v2.2 navigating to http://localhost:5000/error I get the error page from razor which is correct

If I use v3.0 and I navigate to http://localhost:5000/error I get a blank page
Is this a known issue in the 3.0 version?

Isn't Hot Module Replacement supported in VueCliMiddleware?
On Change, it builds successfully. But browser is not updated automatically.
We have to refresh.

As suggested, I simply pressed F5 in VSCode, after that, a whole bunch of words come out, taking at least 5 seconds till I see the green words implying the build is successful. When I visit localhost:5000, I can see the website, which is great. However, when I try to do "dotnet run" in cmd, the green words implying a successful build show within a second, which seems to be too fast, and when I visit localhost:5000, I get the error:

"System.InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request"

Is it that my node.js, or something skipped when running "dotnet run" in cmd? Or is it that I missed a command?

When HMR tries starting, this message shows up in the console -- and there's no socket connection. The first websocket network call says its switching protocols

then the second one produces the error, and right after is some xhr_streaming network call.

Great template,

I was wondering how you go about publishing the application?
I tried the following:
dotnet publish -c Release -o c:\foo

But when I go to run
dotnet AspNetCoreVueStarter.dll I get the following error:

An unhandled exception occurred while processing the request.
AggregateException: One or more errors occurred. (One or more errors occurred. (The NPM script 'serve' exited without indicating that the server was listening for requests. The error output was: npm ERR! path


npm ERR! code ENOENT

npm ERR! errno -4058

npm ERR! syscall open

npm ERR! enoent ENOENT: no such file or directory, open 'C:\foo\ClientApp\package.json'

npm ERR! enoent This is related to npm not being able to find a file.

npm ERR! enoent

Running node v10.16.3 and npm 6.9.0

I clone your project and remove all the contents of the folder /ClientApp, replace with my vuejs source.
After that, and "npm run serves" it appears error:

./src/main.js in multi (webpack)-dev-server/client?http://172.17.13.174:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js, multi (webpack)/hot/dev-server.js (webpack)-dev-server/client?http://172.17.13.174:8080&sockPath=/sockjs-node ./src/main.js

I'm not sure how difficult this would be, but I'd really love to see this updated to use identity server in the same way that Visual Studio's built in Angular/React projects work.

I am willing to pay for this development. Please reach out if interested.

When running the latest release (2.3.2), Avast identifies a threat in bin/Debug/netcoreapp3.1/AspNetCoreVueStarter.exe as IDP.Generic.

Is this expected behaviour?

I have cloned the repo and run the app. Port 8080 works fine with dotnet run command or F5 in VS Code but port 5000 doest not work. Hence, Fetch data page has exception message.

However, if I run the solution in Visual Studio, everything works just fine. Fetch data works, too.

What am I missing?

Edit: I am following the steps outlined here.

Hello,

Do you intend to create a Nuget package for this template? It would be neat to scaffold this with dotnet new vue as we can do with React and Angular templates.

Here's more info on how to. I'm forking the project to start digging in. I will submit a PR once finished.

I've cloned repository and run project by using vs2019 then the pop up windows show up and ask me to sign in. What should i do ?

MSBUILD : error MSB1009: Project file does not exist.
Switch: C:\git\asp-net-core-vue-starter/asp-net-core-vue-starter.csproj

New to .NET tried to get this running but get an error after a fresh clone and running dotnet run in VScode.

I cloned the repo, built the app, and executed "dotnet run". When a browse to http://localhost:5000/, I just get an error page that says: Cannot GET /.

I get the same results when running from visual studio.

Migrate project to ASP.NET Core 3.0 and update template to a new SPA template.
Update VueCliMiddleware to 3.0 (now in preview) and test the middleware out.

Thanks for the template! 🙇

Any idea how to debug both the API and the SPA?
I've been fiddling with the launch.json file but I can't get it to work.

I'm using Linux, VS Code & Firefox.

Hi,

I've been trying to make dev server support HTTPS, but I can't quite make it happen.

What I did was making app.UseHttpsRedirection(); run in all envrionment, adding https: trueto vue.config.js and it serves as https. The problem is that chrome does not trust the dev-certs generated by asp.net core. I can't tell if it something about linking the certificate info in https: {....}, as I cannot see any similar setup in the official react template. Since Asp.net core 3.0 supports https, a better solution would be automatically uses the very same cert automatically.

Would be great if someone could tell me what I did wrong. Cheers!

Simon

Just read your blog post on Medium which was great. I went down the route of having separate Vue and ASP.NET Core projects and using a Cake script to copy built static Vue files to the wwwroot folder. No need to use multiple commands. The ASP.NET Core project just serves the static files.

Is it possible or even desirable to use server side rendering with ASP.NET Core? Vue has docs for how to manually set it up, I’ve also seen an unofficial Vue CLI plugin (this should be an official plugin, there are issues requesting it that have been closed.) that is a work in progress.

Alternatively, is the best solution to just learn Nuxt? Again, is it possible or even desirable to use ASP.NET Core with Nuxt?

Hi,

I've published the app on localhost IIS (right click... Publish... in Solution Explorer).

The problem is that index.html can't find the resources (.js, .css) because the routes are resolved:

http://localhost/css/*.css

instead of

http://localhost/AspNetCoreVueStarter/css/*.css

But if I deploy to Azure (right click... Publish... in Solution Explorer), it works fine, the routes are correctly resolved:

URL: https://aspnetcorevuestarter20200401150304.azurewebsites.net/

What is missing in order to IIS to solve correctly the routes of static assets invoked from index.html?

Thank you.

Vue 3 has been finally released, migrate template to the latest version.

After running a clean install with dotnet new vue -o VueStarter then running dotnet run the project builds and runs, but navigating to localhost:5000 results in an InvalidOperationException.

InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request. Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware+<>c__DisplayClass0_0.<Attach>b__1(HttpContext context, Func<Task> next) Microsoft.AspNetCore.Builder.UseExtensions+<>c__DisplayClass0_1.<Use>b__1(HttpContext context) Microsoft.AspNetCore.Builder.UseExtensions+<>c__DisplayClass0_2.<Use>b__2() Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware+<>c__DisplayClass0_0.<Attach>b__0(HttpContext context, Func<Task> next) Microsoft.AspNetCore.Builder.UseExtensions+<>c__DisplayClass0_1.<Use>b__1(HttpContext context) VueCliMiddleware.VueCliMiddlewareExtensions+<>c__DisplayClass5_1.<CreateProxyRequestDelegate>b__2(HttpContext context) Microsoft.AspNetCore.Routing.EndpointMiddleware.Invoke(HttpContext httpContext) Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

I've noticed that hot reloading does not work out-of-the-box, that is, how can I enable it?

Thanks for all the good work!

Cheers

Create a development container for the Visual Studio Code Remote - Containers extension that lets you use a Docker container as a full-featured development environment without any dependency required to be installed locally.

https://code.visualstudio.com/docs/remote/create-dev-container

Hi,

I just want to share something on my development issue, i have asp.net core 2.1 and and using vue cli 3, I'm having issue when start debugging of the project and the issue is not consistent sometimes it work and sometimes it fails. please see screenshot below:

Thanks

I cloned the project from here and didn't really change much. The project builds and starts fine but I saw this error in my dev tools:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://192.168.1.54:8080/sockjs-node/info?t=1589278796344. (Reason: CORS request did not succeed).

The issue is probably caused by the request going to the IP address instead of localhost, but I am not sure where to change this

Hi,
I've got an exception when I try to start debug.
I just cloned the code and started it. Nothing else
Enviroment:

• Windows 10 Visual Studio 2019.
• Node.js 12.18.4 (x64) and npm.
• @vue/[email protected]
• @vue/[email protected]
  

In VS2019 I was getting:

TS1219: Experimental support for decorators is a feature that is subject to change in a future release

Changing tsconfig.json to Content solved the problem.

Hi,

Hope you are all well?

Just wanted to say that I really find your template useful and very grateful for your time and effort maintaining it.

Could you please let me know if there are any plans to upgrade the project to .NET 6 as it will have Long Term Support (LTS) as opposed to .NET 5.

Thanks

Seeing as TSLint is deprecated it would be nice to use ESLint as default.

Just a suggestion and great job by the way, this is a good template :)

Hi!
I get each webpack build progress steps as separate lines:
Do you know how to prevent this?

<s> [webpack.Progress] 0% compiling
<s> [webpack.Progress] 10% building 0/0 modules 0 active
<s> [webpack.Progress] 10% building 0/1 modules 1 active multi D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\index.js?http://192.168.1.235:8080/sockjs-node D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack\hot\dev-server.js ./src/main.ts
<s> [webpack.Progress] 10% building 1/1 modules 0 active
<s> [webpack.Progress] 10% building 1/1 modules 0 active
<s> [webpack.Progress] 10% building 1/2 modules 1 active multi D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\index.js?http://localhost D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack\hot\dev-server.js D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\index.js?http://192.168.1.235:8080/sockjs-node ./src/main.ts
<s> [webpack.Progress] 10% building 2/2 modules 0 active
<s> [webpack.Progress] 10% building 2/3 modules 1 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\index.js?http://192.168.1.235:8080/sockjs-node
<s> [webpack.Progress] 10% building 2/4 modules 2 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\index.js?http://localhost
<s> [webpack.Progress] 10% building 2/5 modules 3 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack\hot\dev-server.js
<s> [webpack.Progress] 10% building 3/5 modules 2 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack\hot\dev-server.js
<s> [webpack.Progress] 10% building 4/5 modules 1 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack\hot\dev-server.js
<s> [webpack.Progress] 10% building 5/5 modules 0 active
<s> [webpack.Progress] 10% building 5/6 modules 1 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack\hot sync nonrecursive /^\.\/log$/
<s> [webpack.Progress] 10% building 6/6 modules 0 active
<s> [webpack.Progress] 10% building 6/7 modules 1 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack\hot\log.js
<s> [webpack.Progress] 10% building 6/8 modules 2 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack\hot\log-apply-result.js
<s> [webpack.Progress] 10% building 6/9 modules 3 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack\hot\emitter.js
<s> [webpack.Progress] 10% building 6/10 modules 4 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\overlay.js
<s> [webpack.Progress] 10% building 6/11 modules 5 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\socket.js
<s> [webpack.Progress] 10% building 6/12 modules 6 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\utils\log.js
<s> [webpack.Progress] 10% building 6/13 modules 7 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\utils\sendMessage.js
<s> [webpack.Progress] 10% building 6/14 modules 8 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\utils\reloadApp.js
<s> [webpack.Progress] 10% building 6/15 modules 9 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\utils\createSocketUrl.js
<s> [webpack.Progress] 10% building 7/15 modules 8 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\utils\createSocketUrl.js
<s> [webpack.Progress] 10% building 8/15 modules 7 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\utils\createSocketUrl.js
<s> [webpack.Progress] 11% building 9/15 modules 6 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\utils\createSocketUrl.js
<s> [webpack.Progress] 11% building 10/15 modules 5 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\utils\createSocketUrl.js
<s> [webpack.Progress] 11% building 11/15 modules 4 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\utils\createSocketUrl.js
<s> [webpack.Progress] 11% building 12/15 modules 3 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\utils\createSocketUrl.js
<s> [webpack.Progress] 11% building 13/15 modules 2 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\utils\createSocketUrl.js
<s> [webpack.Progress] 11% building 14/15 modules 1 active D:\_gits_c#\netvuetemplate\client-app\node_modules\webpack-dev-server\client\utils\createSocketUrl.js

It works fine while running locally, but server returns 404 while deplyed to Azure cloud.
Any configuration need to be updated?

Environment:

• DotNet Core 3.0

error MSB1009: Project file does not exist

How i add localization in vue app
i used this command 'vue add i18n' but other dependencies is not add,
so i am Confucion how to add

please help me

The pull request aspnet/JavaScriptServices#1726 was merged how long will be ready to user for us?

Are there any guidance on how to build authentication and authorization for a SPA like what comes with React & Angular project templates?

I just cloned this repo and ran dotnet run - fetch data did not work. It could not find the endpoint (resulting in a 404)

local dotnet version is 2.2.204 if it matters

.NET 5 release date is getting closer, now RC1. Migrate template to .NET 5.

I am trying to this starter to create a simple website. My Node and NPM version is:

node: v14.4.0
npm: 6.14.5
dotnet core: 3.1

When I run the starter in VS 8.6.5 (on Mac), I got the following error, which is essentially env: node: No such file or directory. What does this error mean and how to fix it? -- Thanks

VueCliMiddleware: Information: Starting server on port 8080...
Loaded '/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App/3.1.5/Microsoft.AspNetCore.WebSockets.dll'. Skipped loading symbols. Module is optimized and the debugger option 'Just My Code' is enabled.
env: node: No such file or directory
info: VueCliMiddleware[0]
Starting server on port 8080...
VueCliMiddleware: Information: Starting server on port 8080...
env: node: No such file or directory
Loaded '/usr/local/share/dotnet/shared/Microsoft.AspNetCore.App/3.1.5/Microsoft.AspNetCore.Diagnostics.Abstractions.dll'. Skipped loading symbols. Module is optimized and the debugger option 'Just My Code' is enabled.
Microsoft.Hosting.Lifetime: Information: Now listening on: http://localhost:6011
Microsoft.Hosting.Lifetime: Information: Application started. Press Ctrl+C to shut down.
Microsoft.Hosting.Lifetime: Information: Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]

cloned and npm build but when running the app I get the following

The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request.

There is a plugin that registers an axios instance but

• Pages using axios use it with static access import axios from "axios"
• I can't figure out how to reference it inside a Vue component: this.axios and Vue.axios show compile errors

Hi,

I am trying to use Index.cshtml as my start page instead of index.html as I want the initial state to be rendered from the server, these are application settings like themes etc based on the host name. I don't want SSR, as once the site is loaded Vue takes over just like any other SPA application. I have tried a few things but now luck

• I removed index.html file from the public folder but Vue Cli started complaining that the file is missing.

• I also tried setting indexPath to a blank value.

Also, how do I tell the path for the main.js files in the index.cshtml file

Can any one help me set it up?

Thanks.

I prepared my solution 7 months ago, I thinks some improvements happened from that time till now. The question is what is the minimum efficient configuration for Asp.Net Core Vue project. (for Visual Studio. Net, not for Vs Code)
Could I get your project as base. Or am I missing something?

When I look my webpack.config.vendor.js:

`const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = () => {
console.log('Building vendor files for \x1b[33m%s\x1b[0m', process.env.NODE_ENV)

const isDevBuild = !(process.env.NODE_ENV && process.env.NODE_ENV === 'production')
const extractCSS = new ExtractTextPlugin('vendor.css')

return [{
stats: { modules: false },
resolve: {
extensions: ['.js']
},
module: {
rules: [
{ test: /.(png|woff|woff2|eot|ttf|svg)(?|$)/, use: 'url-loader?limit=100000' },
{ test: /.css(?|$)/, use: extractCSS.extract(['css-loader']) }
]
},
entry: {
vendor: ['event-source-polyfill', 'vue', 'vuex', 'axios', 'vue-router', 'jquery']
},
output: {
path: path.join(__dirname, 'wwwroot', 'dist'),
publicPath: '/dist/',
filename: '[name].js',
library: '[name][hash]'
},
plugins: [
extractCSS,
// Compress extracted CSS.
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
/* For modal, you will need to add tether */
}), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name][hash]'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"'
})
].concat(isDevBuild ? [] : [
// new webpack.optimize.UglifyJsPlugin()
])
}]
}
`

and "webpack.config.js":

`const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const bundleOutputDir = './wwwroot/dist'

module.exports = () => {
console.log('Building for \x1b[33m%s\x1b[0m', process.env.NODE_ENV)

const isDevBuild = !(process.env.NODE_ENV && process.env.NODE_ENV === 'production')
const extractCSS = new ExtractTextPlugin('site.css')

return [{
stats: { modules: false },
entry: { 'main': './ClientApp/boot-app.js' },
resolve: {
extensions: ['.js', '.vue'],
alias: isDevBuild ? {
'vue$': 'vue/dist/vue',
'components': path.resolve(__dirname, './ClientApp/components'),
'views': path.resolve(__dirname, './ClientApp/views'),
'utils': path.resolve(__dirname, './ClientApp/utils'),
'api': path.resolve(__dirname, './ClientApp/store/api')
} : {
'components': path.resolve(__dirname, './ClientApp/components'),
'views': path.resolve(__dirname, './ClientApp/views'),
'utils': path.resolve(__dirname, './ClientApp/utils'),
'api': path.resolve(__dirname, './ClientApp/store/api')
}
},
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: '/dist/'
},
module: {
rules: [
{ test: /.vue$/, include: /ClientApp/, use: 'vue-loader' },
{ test: /.js$/, include: /ClientApp/, use: 'babel-loader' },
{ test: /.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) },
{ test: /.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
{ test: /.(woff|woff2|eot|ttf|otf)$/, loader: 'file-loader' },
{
test: /.js$/,
exclude: /node_modules(?!/quill-image-drop-module|quill-image-resize-module)/,
loader: 'babel-loader'
}
]
},
plugins: [
new webpack.ProvidePlugin({
'window.Quill': 'quill',
}),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
//new webpack.optimize.UglifyJsPlugin(),
extractCSS,
// Compress extracted CSS.
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
})
])
}]
}
`

Hey liborpansky.

Thanks for this awesome template.

I really want to explore Vue and ASP.net core with Auth0. However, I have struggle to make Auth0 work properly with this template.

Do you know, how to set it up? Do I need to configure it in my Vue app or at ASP.net core level?

Have a nice day :-)

Hi there, I feel like I'm missing something basic (and I'm pretty new to the ASP.Net Core world, so bear with me)!

When I run dotnet run within VS Code, I get the following output:

PS C:\Users\mgrande\repos\asp-net-core-vue-starter> dotnet run
Hosting environment: Production
Content root path: C:\Users\mgrande\repos\asp-net-core-vue-starter
Now listening on: http://localhost:5000
Now listening on: https://localhost:5001
Application started. Press Ctrl+C to shut down.

Note that it says it's running in Production mode. How do I switch to Development mode?