Grunt v ASP .NET Core a Visual Studio 2017 - časť 1

DOWNLOAD

Pred časom som písal o tom ako integrovať Visual Studio 2013 s Grunt-om. Teraz sa pozrieme na to ako je na tom Visual Studio 2017.

Budeme vychádzať z project templatu ASP.NET Core Web Application. Použijeme:

  • Razor Pages,
  • rôzne konfigurácie aplikácie v závislosti od prostredia,
  • štýlovanie aplikácie pomocou less,
  • rôzne grunt tasky pre build aplikácie v závislosti od použitej konfigurácie projektu.

 

Vo Visual Studiu vytvoríme nový projekt výberom z menu
  • File
  • New
  • Project...
  • ASP.NET Core Web Application
  • Empty
.

V priečinku Properties sa nachádza súbor launchSettings.json, ktorý obsahuje konfiguráciu profilov pre spustenie aplikácie. Pri vytvorení nového projektu sa vytvoria dva základné profily: IIS Express a Demo ("Demo" ja názov projektu), pričom oba profily nastavujú premennú ASPNETCORE_ENVIRONMENT na hodnotu Development a teda oba spúšťajú aplikáciu v rovnakom prostredí. Upravíme obsah súboru nasledovne:

{
  
"iisSettings": {
    
"windowsAuthentication"false,
    
"anonymousAuthentication"true,
    
"iisExpress": {
      
"applicationUrl""http://localhost:2926/",
      
"sslPort"0
    
}
  },
  
"profiles": {
    
"Development": {
      
"commandName""Project",
      
"launchBrowser"true,
      
"environmentVariables": {
        
"ASPNETCORE_ENVIRONMENT""Development"
      
},
      
"applicationUrl""http://localhost:2926/"
    
},
    
"Production": {
      
"commandName""Project",
      
"launchBrowser"true,
      
"environmentVariables": {
        
"ASPNETCORE_ENVIRONMENT""Production"
      
},
      
"applicationUrl""http://localhost:2927/"
    
}
  }
}
Nastavenie profilov aplikácie

Takto budeme mať dva profily: Development bude bežať na adrese http://localhost:2926/ a profil Production na adrese http://localhost:2927/. Zmena je viditeľná aj v toolbare:

Run toolbar
Run toolbar

Do projektu pridáme tri nové súbory:

  • appsettings.json - konfigurácia aplikácie,
  • appsettings.Development.json - konfigurácia aplikácie pre prostredie Development,
  • appsettings.Production.json - konfigurácia aplikácie pre prostredie Production.

 

{
  
"version""0.0.0.0"
}
appsettings.json

 

{
  
"server": {
    
"urls""http://localhost:2926/"
  
}
}
appsettings.Development.json

 

{
  
"server": {
    
"urls""http://localhost:2927/"
  
}
}
appsettings.Production.json

V súbore appsettings.json je konfigurácia spoločná pre všetky prostredia, v ostatných súboroch je konfigurácia závislá na prostredí, v tomto prípade rôzne url adresy, na ktorých bude aplikácia bežať.

Aby sa pri štarte aplikácie načítavala konfigurácia z vyššie uvedených súborov upravíme obsah metódy Main v súbore Program.cs nasledovne:

public static void Main(string[] args)
{
    
// Vytvorit host
    
var host = new WebHostBuilder();
    
var env host.GetSetting("environment");

    
// Nacitanie konfiguracie
    
var config = new ConfigurationBuilder()
        .SetBasePath(Directory.GetCurrentDirectory())
        .AddJsonFile(
"appsettings.json", optional: true, reloadOnChange: true)
        .AddJsonFile($
"appsettings.{env}.json", optional: true)
        .Build()
;

    
// Nastavenie host
    
host.UseKestrel()
        .UseConfiguration(config)
        
// Pouzit url z konfiguracie
        
.UseUrls(config["server:urls"])
        .UseContentRoot(Directory.GetCurrentDirectory())
        .UseStartup<Startup>()
        .Build()
        .Run()
;
}
Program.cs

Upravíme ešte obsah súboru Startup.cs nasledovne:

public class Startup
{
    
// Konfigurácia aplikácie.
    
public IConfiguration Configuration
    {
        
get;
        private set;
    
}

    
// Konštruktor
    
public Startup(IConfiguration config)
    {
        
// Konfigurácia už bola nacítaná zo súboru appsettings.json pri 
        // vytvorení hostu v súbore Program.cs a použije sa DI pre jej 
        // odloženie do property Configruation
        
this.Configuration config;
    
}
                    
    
// Metóda je volaná runtime-om a použije sa na pridanie service-ov
    // do kontajnera
    
public void ConfigureServices(IServiceCollection services)
    {
        services.AddOptions()
;
        
// Použijeme MVC
        
services.AddMvc();
    
}

    
// Metóda je volaná runtime-om a použije sa na konfiguráciu HTTP 
    // request pipeline.
    
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        
if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage()
;
        
}
        
else
        
{
            app.UseExceptionHandler(
"/Error");
        
}

        app.UseStaticFiles()
;
        
app.UseMvc(ConfigureMvc);
    
}

    
// Konfigurácia MVC
    
public void ConfigureMvc(IRouteBuilder routes)
    {
        routes.MapRoute(
            name: 
"default",
            template: 
"{controller=Home}/{action=Index}/{id?}");
    
}
}
Startup.cs

Do projektu pridáme priečinok Pages, ten obsahuje Razor Pages.

 

Pravým tlačidlom klikneme v okne Solution Explorer na priečinok Pages a zvolíme možnosť
  • Add
  • New Item...
  • Razor View Imports
a pridáme nový súbor _ViewImports.cshtml s nasledovným obsahom:
@using Demo
@namespace Demo.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
_ViewImports.cshtml

 

Pravým tlačidlom klikneme v okne Solution Explorer na priečinok Pages a zvolíme možnosť
  • Add
  • New Item...
  • Razor Page
a pridáme nový súbor Index.cshtml s nasledovným obsahom:
@page
@model IndexModel
<!DOCTYPE html>
<html>
<head>
    
<meta charset="utf-8" />
    <
meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <
title>Demo</title>
    
<environment include="Development">
        
<!-- 
            Globálne štýly aplikácie, vzniknú kompiláciou súboru site.less 
        -->
        
<link href="~/css/site.css" rel="stylesheet" asp-append-version="true" />
    </
environment>
    
<environment exclude="Development">
        
<!-- 
            Ak je aplikácia spustená v inom prostredí ako Development použije 
            sa minifikovaná verzia štýlov 
        -->
        
<link href="~/css/site.min.css" rel="stylesheet" asp-append-version="true" />
    </
environment>
</head>
<body>
    
<!-- @Model.EnvironmentName -->
</body>
</html>
Index.cshtml

V elemente body je do stránky vložený pomocou HTML komentára názov akutálneho prostredia, pomocou vlastnosti modelu @Model.EnvironmentName. Túto vlastnosť pridáme do modelu stránky upravením obsahu súboru Index.cshtml.cs:

public class IndexModel : PageModel
{
    
// Názov prostredia v ktorom je spúštaná aplikácia
    
public string EnvironmentName
    {
        
get;
        private set;
    
}
    
    
// Konštruktor
    
public IndexModel(IHostingEnvironment env)
    {
        
// Odložíme si názov prostredia v ktorom je spúštaná aplikácia
        
this.EnvironmentName env.EnvironmentName;
    
}

    
// Metóda GET
    
public void OnGetAsync()
    {
    }
}
Index.cshtml.cs

Ak teraz zvolíme v Run toolbar-e možnosť Development a spustíme aplikáciu otvorí sa url http://localhost:2926/ a v obsahu stránky bude napísané:

<!-- Development -->
Obsah elementu body pre prostredie Development

Ak zvolíme v Run toolbar-e možnosť Production a spustíme aplikáciu otvorí sa url http://localhost:2927/ a obsah stránky bude nasledovný:

<!-- Production -->
Obsah elementu body pre prostredie Production

V ďalšej časti si ukážeme ako nakonfigurovať a použiť Grunt pri builde v závislosti od zvolenej build konfigurácie.

Publikované Wednesday, April 25, 2018 7:33 AM xxxmatko

Komentáre

Bez komentárov