It is becoming a common pattern to see websites and web apps written as a front end single page application (SPA) connected to a backend API. For this reason, the Visual Studio provides a several project templates for getting up and going with a Web API + SPA project. However, at time of writing, these project templates only support Angular and React. They completely miss out on supporting Vue projects, despite it being one of the big 3 frontend frameworks. Of course, it is totally possible to just run your Vue project and ASP.NET Core project separately, but this is less than ideal for a number of reasons. Firstly, it means having multiple servers running, one for your each application, but you'll also run into issues with , , and doing things with cookies such as protecting against becomes trickier. CORS SSL CRSF In my opinion, it is a much more ideal situation to have you SPA being served by the same application that provides your API. Thankfully someone has on how to serve a Vue SPA from an ASP.NET Core web application. However, I was recently working on a project using Nuxt (which is based on Vue), and I had to make some adjustments to the article to get it to work with Nuxt. If you're looking at how to integrate your ASP.NET Core web application with Nuxt, please keep reading. written an in depth article How to run Nuxt from a ASP.Net Core Web Application Start by creating a new ASP.NET Core Web Application and select the API project template. From a terminal window navigate to the main folder of your project (this will be the same folder that has your Program.cs and Startup.cs files). You can install Nuxt using either NPM or Yarn, depending on your preference. Please note that the rest of the tutorial relies on the Nuxt app being called client-app, so please follow that instruction. npx create-nuxt-app client-app yarn create nuxt-app client-app # install using NPM # OR # install using Yarn Follow through the installation instructions, selecting the various addons that you desire. For the purpose of this tutorial, I just selected all of the default options. Once that is installed, we need to modify the projects *.csproj file. In Visual Studio, you can do this by double clicking on the project name. The following markup will allow the Nuxt files to be built and published properly when the main ASP.NET Core project is built. Your *.csproj file should look like this: netcoreapp3.1 true Latest false client-app\ $(DefaultItemExcludes);$(SpaRoot)node_modules\** %(DistFiles.Identity) PreserveNewest < = > Project Sdk "Microsoft.NET.Sdk.Web" < > PropertyGroup < > TargetFramework </ > TargetFramework < > TypeScriptCompileBlocked </ > TypeScriptCompileBlocked < > TypeScriptToolsVersion </ > TypeScriptToolsVersion < > IsPackable </ > IsPackable < > SpaRoot </ > SpaRoot < > DefaultItemExcludes </ > DefaultItemExcludes </ > PropertyGroup < > ItemGroup < = = /> PackageReference Include "Microsoft.AspNetCore.SpaServices.Extensions" Version "3.0.0-preview6.19307.2" </ > ItemGroup < > ItemGroup  < = /> Content Remove "$(SpaRoot)**" < = /> None Remove "$(SpaRoot)**" < = = /> None Include "$(SpaRoot)**" Exclude "$(SpaRoot)node_modules\**" </ > ItemGroup < = = = > Target Name "DebugEnsureNodeEnv" BeforeTargets "Build" Condition " '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') "  < = = > Exec Command "node --version" ContinueOnError "true" < = = /> Output TaskParameter "ExitCode" PropertyName "ErrorCode" </ > Exec < = = /> Error 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." < = = /> Message Importance "high" Text "Restoring dependencies using 'npm'. This may take several minutes..." < = = /> Exec WorkingDirectory "$(SpaRoot)" Command "npm install" </ > Target < = = > Target Name "PublishRunWebpack" AfterTargets "ComputeFilesToPublish"  < = = /> Exec WorkingDirectory "$(SpaRoot)" Command "npm install" < = = /> Exec WorkingDirectory "$(SpaRoot)" Command "npm run generate"  < > ItemGroup < = /> DistFiles Include "$(SpaRoot)dist\**" < = = > ResolvedFileToPublish Include "@(DistFiles->'%(FullPath)')" Exclude "@(ResolvedFileToPublish)" < > RelativePath </ > RelativePath < > CopyToPublishDirectory </ > CopyToPublishDirectory </ > ResolvedFileToPublish </ > ItemGroup </ > Target </ > Project After that, we need to create a helper class that will allow the Nuxt development server to be proxied by the ASP.NET Core web application. This helper is only useful in development, since in production the Nuxt project will be being served by the server as static files. In your main project folder, create a folder called Helpers and inside create a file called NuxtHelper.cs: Microsoft.AspNetCore.Builder; Microsoft.AspNetCore.SpaServices; Microsoft.Extensions.DependencyInjection; Microsoft.Extensions.Logging; System; System.Diagnostics; System.IO; System.Linq; System.Net.NetworkInformation; System.Runtime.InteropServices; System.Threading.Tasks; { { Port { ; } = ; Uri DevelopmentServerEndpoint { ; } = Uri( ); TimeSpan Timeout { ; } = TimeSpan.FromSeconds( ); DoneMessage { ; } = ; {
            spa.UseProxyToSpaDevelopmentServer( () =>
            { loggerFactory = spa.ApplicationBuilder.ApplicationServices.GetService<ILoggerFactory>(); logger = loggerFactory.CreateLogger( ); (IsRunning())
                { DevelopmentServerEndpoint;
                } isWindows = RuntimeInformation.IsOSPlatform(OSPlatform.Windows); processInfo = ProcessStartInfo
                {
                    FileName = isWindows ? : ,
                    Arguments = ,
                    WorkingDirectory = ,
                    RedirectStandardError = ,
                    RedirectStandardInput = ,
                    RedirectStandardOutput = ,
                    UseShellExecute = ,
                }; process = Process.Start(processInfo); tcs = TaskCompletionSource< >();
                _ = Task.Run(() =>
                { { line; ((line = process.StandardOutput.ReadLine()) != )
                        {
                            logger.LogInformation(line); (!tcs.Task.IsCompleted && line.Contains(DoneMessage))
                            {
                                tcs.SetResult( );
                            }
                        }
                    } (EndOfStreamException ex)
                    {
                        logger.LogError(ex.ToString());
                        tcs.SetException( InvalidOperationException( , ex));
                    }
                });
                _ = Task.Run(() =>
                { { line; ((line = process.StandardError.ReadLine()) != )
                        {
                            logger.LogError(line);
                        }
                    } (EndOfStreamException ex)
                    {
                        logger.LogError(ex.ToString());
                        tcs.SetException( InvalidOperationException( , ex));
                    }
                }); timeout = Task.Delay(Timeout); ( Task.WhenAny(timeout, tcs.Task) == timeout)
                { TimeoutException();
                } DevelopmentServerEndpoint;
            });

        } => IPGlobalProperties.GetIPGlobalProperties()
                .GetActiveTcpListeners()
                .Select(x => x.Port)
                .Contains(Port);
    }
} using using using using using using using using using using using namespace NuxtIntegration.Helpers public static class NuxtHelper // default port number of 'npm run dev' private static int get 3000 private static get new $"http://localhost: " {Port} private static get 30 // done message of 'npm run dev' command. private static string get "DONE  Compiled successfully in" ( ) public static void UseNuxtDevelopmentServer ISpaBuilder spa this async var var "Nuxt" // if 'npm dev' command was executed yourself, then just return the endpoint. if return // launch Nuxt development server var var new "cmd" "npm" $" run dev" {(isWindows ? : )} "/c npm " "" "client-app" true true true false var var new int try string while null if 1 catch new "'npm run dev' failed." try string while null catch new "'npm run dev' failed." var if await throw new return ( ) private static bool IsRunning Please note that this presumes you are running Nuxt on the default port of 3000. If you are using a different port, you can update the Port property in the NuxtHelper class. Finally, we need to configure the Startup.cs file to use this helper during development and to serve the Nuxt files during production. Go to the ConfigureServices method and add the following line: services.AddSpaStaticFiles(options => options.RootPath = ); "client-app/dist" Then go to the Configure method and add the following lines after the app.UseEndpoints statement: app.UseSpaStaticFiles();
            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = ; (env.IsDevelopment())
                { spa.UseNuxtDevelopmentServer();
                }
            }); "client-app" if // Launch development server for Nuxt Everything is now set up! Run your application and go to the root page in your browser (i.e. https://localhost:{port}). You should be able to see your Nuxt app home page there. Occasionally (especially on the first build), you might get a TimeoutException: The operation has timed out message. This is usually because the Nuxt project is taking longer to build than expected. Just wait a few moments then refresh the page. That should fix it. Conclusion In this article, I have shown you how to run a Nuxt project from a ASP.NET Core Web Application. This is based on the information given for integrating Vue projects. here I have made a . Please feel free to fork it to help you get started with your own Nuxt/ASP.NET Core project. public GitHub repo available of this project I post mostly about full-stack .NET and Vue web development. To make sure that you don't miss out on any posts, please follow this blog and . If you found this post helpful, please like it and share it. You can also find me on . subscribe to my newsletter Twitter

Microsoft

NuxtJS

Target

Twitter

A Guide to Running ASP.NET Core & SQL Server from Docker

How to Build a Web App with ASP NET Core and Vue

Subscribe to my mailing list

Nominated for 2022 - HackerNoon Contributor of the Year - Es6

Nominated for 2022 - HackerNoon Contributor of the Year - Clean Code

Nominated for 2022 - HackerNoon Contributor of the Year - Dotnet

Nominated for 2022 - HackerNoon Contributor of the Year - Functional Programming

Too Long; Didn't Read

Make resilience your competitive advantage

Essential Guide to Running Nuxt from an ASP.NET Core Web Application

Essential Guide to Running Nuxt from an ASP.NET Core Web Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Write Cleaner Code with My Top 5 JavaScript Hacks

C# 8.0 Indices and Ranges

5 Tips to Improve Your Productivity in C# 8.0

7 things you didn’t know about .NET code

A Guide to Running ASP.NET Core & SQL Server from Docker

Write Cleaner Code with My Top 5 JavaScript Hacks

C# 8.0 Indices and Ranges

5 Tips to Improve Your Productivity in C# 8.0

7 things you didn’t know about .NET code

A Guide to Running ASP.NET Core & SQL Server from Docker

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps