{"id":13595286,"url":"https://github.com/EEParker/aspnetcore-vueclimiddleware","last_synced_at":"2025-04-09T10:33:25.634Z","repository":{"id":33969912,"uuid":"149676347","full_name":"EEParker/aspnetcore-vueclimiddleware","owner":"EEParker","description":"Helpers for building single-page applications on ASP.NET MVC Core using Vue Cli or Quasar Cli.","archived":true,"fork":false,"pushed_at":"2023-03-05T19:12:37.000Z","size":5066,"stargazers_count":339,"open_issues_count":51,"forks_count":65,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-17T04:48:38.125Z","etag":null,"topics":["aspnet","aspnetcore","dotnet","quasar-cli","quasar-framework","vue-cli"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EEParker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":["EEParker"]}},"created_at":"2018-09-20T22:09:17.000Z","updated_at":"2024-10-02T16:31:18.000Z","dependencies_parsed_at":"2024-01-13T16:26:22.400Z","dependency_job_id":"84bf182e-3a81-4dc4-a3c0-f0aea14d6bfe","html_url":"https://github.com/EEParker/aspnetcore-vueclimiddleware","commit_stats":{"total_commits":66,"total_committers":19,"mean_commits":3.473684210526316,"dds":0.6212121212121212,"last_synced_commit":"3ddb5cac717bbf39642b34f9b04b1828616fc5e5"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EEParker%2Faspnetcore-vueclimiddleware","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EEParker%2Faspnetcore-vueclimiddleware/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EEParker%2Faspnetcore-vueclimiddleware/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EEParker%2Faspnetcore-vueclimiddleware/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EEParker","download_url":"https://codeload.github.com/EEParker/aspnetcore-vueclimiddleware/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248020593,"owners_count":21034459,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aspnet","aspnetcore","dotnet","quasar-cli","quasar-framework","vue-cli"],"created_at":"2024-08-01T16:01:47.060Z","updated_at":"2025-04-09T10:33:20.625Z","avatar_url":"https://github.com/EEParker.png","language":"C#","funding_links":["https://github.com/sponsors/EEParker"],"categories":["C\\#","C#","C# #"],"sub_categories":[],"readme":"# VueCliMiddleware - Supporting Vue Cli and Quasar Cli\r\n\r\n[![](https://img.shields.io/nuget/v/VueCliMiddleware.svg)](https://www.nuget.org/packages/VueCliMiddleware/)\r\n\r\nThis is a stand-alone module to add Vue Cli and Quasar Cli support to AspNet Core.\r\n\r\nSee the examples here: [https://github.com/EEParker/aspnetcore-vueclimiddleware/tree/master/samples](https://github.com/EEParker/aspnetcore-vueclimiddleware/tree/master/samples)\r\n\r\n## ASP.NET 3.X Endpoint Routing\r\nFirst, be sure to switch Vue Cli or Quasar Cli to output distribution files to wwwroot directly (not dist).\r\n\r\n* Quasar CLI: regex: \"Compiled successfully\"\r\n* Vue CLI: regex: \"Compiled successfully\" or \"running at\" or \"Starting development server\" depending on version\r\n \u003ethe reason for **`Starting development server`** ,the npm-script running checkpoint: \r\n Although the dev server may eventually tell us the URL it's listening on,\r\n                    it doesn't do so until it's finished compiling, and even then only if there were\r\n                    no compiler warnings. So instead of waiting for that, consider it ready as soon\r\n                     as it starts listening for requests.[see the codes](https://github.com/EEParker/aspnetcore-vueclimiddleware/blob/master/src/VueCliMiddleware/VueDevelopmentServerMiddleware.cs#L91)\r\n\r\n## Configuration Options\r\nWhen using the `MapToVueCliProxy` or `UseVueCli` you can customize the behavior based on your npm script runner or compiler. \r\n\r\n| Parameter | Type | Description | Default |\r\n|-----------|------|-------------|---------|\r\n|`npmScript`|string|The name of the script in your package.json file that launches the vue-cli, quasar cli or other web server.||\r\n|`spaOptions`|[SpaOptions](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.spaservices.spaoptions?view=aspnetcore-5.0)|Set the folder of the app to be proxied.||\r\n|`port`|int|Specify the vue cli server port number. This is also used by the force-kill option to discover processes utilizing the port.|8080|\r\n|`https`|bool|Set proxy to use https|false|\r\n|`runner`|`enum { Npm, Yarn }`|Specify the runner, Npm and Yarn are valid options. Yarn support is experimental.|Npm|\r\n|`regex`|string|**IMPORTANT** Text to search in npm log that indicates web server is running. This **MUST BE SET** for vue-cli, quasar and quasar v2. (e.g. `running at`, `READY`, `APP Url`)|`running at`|\r\n|`forceKill`|bool|Attempt to kill the npm process when stopping debugging.|false|\r\n|`wsl`|bool|Set to true if you are using WSL on windows. For other operating systems it will be ignored. This changes the executed process name to `wsl` instead of `cmd`.|false|\r\n\r\n\r\n\r\nSee [Migrating Asp.Net 2.2 to 3.0 Endpoint Routing](https://docs.microsoft.com/en-us/aspnet/core/migration/22-to-30?view=aspnetcore-3.1\u0026tabs=visual-studio#update-routing-startup-code)\r\n```csharp\r\n    public class Startup {\r\n\r\n        public Startup(IConfiguration configuration)\r\n        {\r\n            Configuration = configuration;\r\n        }\r\n\r\n        public IConfiguration Configuration { get; }\r\n\r\n        // This method gets called by the runtime. Use this method to add services to the container.\r\n        public void ConfigureServices(IServiceCollection services)\r\n        {\r\n            // NOTE: PRODUCTION Ensure this is the same path that is specified in your webpack output\r\n            services.AddSpaStaticFiles(opt =\u003e opt.RootPath = \"ClientApp/dist\");\r\n            services.AddControllers();\r\n        }\r\n\r\n        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.\r\n        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)\r\n        {\r\n\t    // optional base path for IIS virtual app/directory\r\n\t    app.UsePathBase(\"/optionalpath\");\r\n            \r\n\t    // PRODUCTION uses webpack static files\r\n            app.UseSpaStaticFiles();\r\n\r\n            // Routing\r\n            app.UseRouting();\r\n            app.UserAuthorization();\r\n            app.UseEndpoints(endpoints =\u003e\r\n            {\r\n                endpoints.MapControllers();\r\n\r\n                endpoints.MapToVueCliProxy(\r\n                    \"{*path}\",\r\n                    new SpaOptions { SourcePath = \"ClientApp\" },\r\n                    npmScript: (System.Diagnostics.Debugger.IsAttached) ? \"serve\" : null,\r\n                    regex: \"Compiled successfully\",\r\n                    forceKill: true,\r\n\t\t    wsl: false // Set to true if you are using WSL on windows. For other operating systems it will be ignored\r\n                    );\r\n            });\r\n        }\r\n    }\r\n```\r\n\r\n\r\n## ASP.NET 2.2 Usage Example\r\n```csharp\r\n    using VueCliMiddleware;\r\n\r\n    public class Startup\r\n    {\r\n        public Startup(IConfiguration configuration)\r\n        {\r\n            Configuration = configuration;\r\n        }\r\n\r\n        public IConfiguration Configuration { get; }\r\n\r\n        public virtual void ConfigureServices(IServiceCollection services)\r\n        {\r\n           services.AddMvc(); // etc\r\n           \r\n           // Need to register ISpaStaticFileProvider for UseSpaStaticFiles middleware to work\r\n           services.AddSpaStaticFiles(configuration =\u003e { configuration.RootPath = \"ClientApp/dist\"; });\r\n        }\r\n\r\n        public virtual void Configure(IApplicationBuilder app, IHostingEnvironment env)\r\n        {\r\n           // your config opts...\r\n\t\t   // optional basepath\r\n\t\t   // app.UsePathBase(\"/myapp\");\r\n\r\n           // add static files from SPA (/dist)\r\n          app.UseSpaStaticFiles();\r\n\r\n          app.UseMvc(routes =\u003e /* configure*/ );\r\n\r\n          app.UseSpa(spa =\u003e\r\n            {\r\n                spa.Options.SourcePath = \"ClientApp\";\r\n#if DEBUG\r\n                if (env.IsDevelopment())\r\n                {\r\n                    spa.UseVueCli(npmScript: \"serve\", port: 8080); // optional port\r\n                }\r\n#endif\r\n            });\r\n        }\r\n    }\r\n```\r\n\r\n## CSPROJ Configuration\r\nYou may also need to add the following tasks to your csproj file. This are similar to what are found in the default ASPNETSPA templates.\r\n\r\n```project.csproj\r\n  \u003cPropertyGroup\u003e\r\n    \u003c!-- Typescript/Javascript Client Configuration --\u003e\r\n    \u003cSpaRoot\u003eClientApp\\\u003c/SpaRoot\u003e\r\n    \u003cDefaultItemExcludes\u003e$(DefaultItemExcludes);$(SpaRoot)node_modules\\**\u003c/DefaultItemExcludes\u003e\r\n  \u003c/PropertyGroup\u003e\r\n  \u003cTarget Name=\"DebugEnsureNodeEnv\" BeforeTargets=\"Build\"\u003e\r\n    \u003c!-- Build Target:  Ensure Node.js is installed --\u003e\r\n    \u003cExec Command=\"node --version\" ContinueOnError=\"true\"\u003e\r\n      \u003cOutput TaskParameter=\"ExitCode\" PropertyName=\"ErrorCode\" /\u003e\r\n    \u003c/Exec\u003e\r\n    \u003cError Condition=\"'$(ErrorCode)' != '0'\" Text=\"Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE.\" /\u003e\r\n  \u003c/Target\u003e\r\n\r\n  \u003cTarget Name=\"DebugEnsureNpm\" AfterTargets=\"DebugEnsureNodeEnv\"\u003e\r\n    \u003c!-- Build Target:  Ensure Node.js is installed --\u003e\r\n    \u003cExec Command=\"npm --version\" ContinueOnError=\"true\"\u003e\r\n      \u003cOutput TaskParameter=\"ExitCode\" PropertyName=\"ErrorCode\" /\u003e\r\n    \u003c/Exec\u003e\r\n  \u003c/Target\u003e\r\n\r\n  \u003cTarget Name=\"EnsureNodeModulesInstalled\" BeforeTargets=\"Build\" Inputs=\"package.json\" Outputs=\"packages-lock.json\"\u003e\r\n    \u003c!-- Build Target: Restore NPM packages using npm --\u003e\r\n    \u003cMessage Importance=\"high\" Text=\"Restoring dependencies using 'npm'. This may take several minutes...\" /\u003e\r\n\r\n    \u003cExec WorkingDirectory=\"$(SpaRoot)\" Command=\"npm install\" /\u003e\r\n  \u003c/Target\u003e\r\n\r\n  \u003cTarget Name=\"PublishRunWebpack\" AfterTargets=\"ComputeFilesToPublish\"\u003e\r\n    \u003c!-- Build Target: Run webpack dist build --\u003e\r\n    \u003cMessage Importance=\"high\" Text=\"Running npm build...\" /\u003e\r\n    \u003cExec WorkingDirectory=\"$(SpaRoot)\" Command=\"npm run build\" /\u003e\r\n\r\n    \u003c!-- Include the newly-built files in the publish output --\u003e\r\n    \u003cItemGroup\u003e\r\n      \u003cDistFiles Include=\"$(SpaRoot)dist\\**\" /\u003e\r\n      \u003cResolvedFileToPublish Include=\"@(DistFiles-\u003e'%(FullPath)')\" Exclude=\"@(ResolvedFileToPublish)\"\u003e\r\n        \u003cRelativePath\u003e%(DistFiles.Identity)\u003c/RelativePath\u003e\r\n        \u003cCopyToPublishDirectory\u003ePreserveNewest\u003c/CopyToPublishDirectory\u003e\r\n      \u003c/ResolvedFileToPublish\u003e\r\n    \u003c/ItemGroup\u003e\r\n  \u003c/Target\u003e\r\n\r\n```\r\n\r\n## History\r\n\r\nDue to the discussion [here](https://github.com/aspnet/JavaScriptServices/pull/1726), it was decided to not be included in the Microsoft owned package.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FEEParker%2Faspnetcore-vueclimiddleware","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FEEParker%2Faspnetcore-vueclimiddleware","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FEEParker%2Faspnetcore-vueclimiddleware/lists"}