Abhinandan's Blog
ABHINANDAN ARYAL

anudwigna[at]gmail.com

HOME

Setting up Quasar SPA App with ASP.NET Core

Oct 25, 2020

C# ASP.NET Core Quasar VueJS

Setting up a SPA project in ASP Core Project

ASP.NET Core have SPA project templates for Angular, React, etc. However, we can leverage the same project templates to use with other javascript frameworks as well. Here, in this article I will explain how we can setup asp core SPA Project template to use Quasar, which is a very nice VueJS framework.

Let us first create an ASP Core SPA project using ReactJS template. Later on, I will modify it to support VueJS and Quasar. Fire up Visual Studio ( in my case it is Visual Studio Community 2019 ), select the option to create a new project. Select 'ASP Net Core Web Application'. Give it a name 'MyQuasarApp' and in next window, you will be given an option to choose the template for the project. Here, choose the 'ReactJS' template as shown.

Project template for React JS

Next, click on the 'Create' button to create the project. After creating the project, you will get the structure as shown below:

Project Structure for React JS

Here, as you can see a 'ClientApp' folder is automatically created which contains the source files for ReactJS project. If we run the project now, we can see a ReactJS app running inside ASP Core Project. Build the application by pressing Ctrl + Shift + B. It may take certain time to build the project as it downloads all the dependecies for react project. After that run the application by pressing Ctrl + F5

Project template for React JS

Setting up a Quasar App

Now, it's time to setup a Quasar App. There are some prerequisites to setup Quasar App. The easiest way is to setup Quasar CLI. The documentation for installation of Quasar CLI can be found here. Now, delete the 'clientapp' folder and let's create Quasar App. Fire up a command prompt window with the project root location. The easiest way to do this is to open up developer command prompt within the visual studio. For this, go to 'Tools -> Command Line -> Developer Command Prompt'. Change directory to locate your project root and paste the following code to create a quasar app.

quasar create clientapp

For convienience, I am setting up the quasar app with name clientapp.

Quasar Installation

You will have to answer a couple of questions to setup the initial configuration for the application. After giving up all the answers you will get a fresh installation of quasar app. I have chosen yarn as my package manager. You can go with NPM as well. This marks the end of Quasar Installation.

ASP Core App Configuration for Quasar Support

Now it's time to complete the configuration part to support the quasar app installation. There are some changes that you need to make to Startup.cs and MyQuasarApp.csproj files. The configuration are related to deployment of clientapp, proxying to development server, etc. The final Startup.cs looks like below:

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace MyQuasarApp
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }
        public IConfiguration Configuration { get; }
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/dist/spa";
            });
        }
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                app.UseHsts();
            }
            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseSpaStaticFiles();
            app.UseRouting();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller}/{action=Index}/{id?}");
            });
            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseProxyToSpaDevelopmentServer("http://localhost:8080");
                }
            });
        }
    }
}

Also, in order to correctly publish this type of application, you need to change some settings in MyQuasarApp.csproj file. The final code after changes looks like below:

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.1.9" />
  </ItemGroup>
  <ItemGroup>
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
  </ItemGroup>
  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <Exec WorkingDirectory="$(SpaRoot)" Command="yarn install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="quasar build" />
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
</Project>

The configuration related to proper building the client app separately while publishing the asp core app is also specified in this project file. After this only, the clientapp folder is properly placed along with the published files.

Running the application

In order to run the application, first run the client app separately. For this, fire up a command prompt and cd into the clientapp folder and run the following command:

quasar dev

This will start a development build of the app in its default port 8080. Open the browser and browse to 'http://localhost:8080'. Here you can see that the quasar app is running successfully. But, you also need to run the asp core project separately in order to run your APIs. You can see the app running only when you have started the Quasar App separately first.

This is a little bit tedious as there is not any built in support for VueJS projects like that of ReactJS. For ReactJS projects, you need to start the asp core project and all other things are properly taken care of.

The code related to this article can be found here.