DEV Community: Charles

Add Project to Source Control in Azure DevOps (VSTS)

Charles — Thu, 14 Feb 2019 10:25:15 +0000

This post is part of the Create an Orchard core site and deploy using Azure DevOps series.

So here is how you add your new project to Azure DevOps which was called Visual Studio Team Services (VSTS).

In visual studio in the bottom right corner click the Add to Source Control link and then select Git.
The team explorer side panel will open with the git service options.
We are adding the project to Azure DevOps so you will need an account:
visualstudio.microsoft.com/team-services/
Click Push Git Repo under Team Services.
Enter your account details and repository name and click Publish Repository.
This will push all your code to a new Azure DevOps repo.

Done!

You can get to your Azure DevOps repo from visual studio by going to the Team Explorer tab:

Click the link under the Azure DevOps section:

From here you can see all the code you have pushed to the repo.

There is loads more that Azure DevOps does and we will come back later to setup a build pipeline.

But first lets Setup Orchard Core in Visual Studio using Nuget

Originally published on my personal blog: Create an ASP.net Core Website in Visual Studio 2017

Create an ASP.NET Core Website in Visual Studio 2017

Charles — Sat, 09 Feb 2019 00:03:55 +0000

This post is part of the Create an Orchard core site and deploy using Azure DevOps series.

We are going to create a .net core website from scratch in visual studio 2017.

In visual studio create a new project.
Under the Web section select ASP.NET Core Web Application template.
Set the Name, Solution Name and Location where you want the solution created
Make sure .NET Core and ASP.NET Core 2.1 are selected. Then choose the Empty template and click OK.
Once it is all set up you will see the following project structure:
Click play.
And boom! done.

Open the Startup.cs file to see the magic:

Awesome right!.... Well OK, so it is doing a Response.Write which isn't a great way to build websites, but what you see here is the very basics of .Net Core. What you do next is totally up to you, for example you can turn this into an MVC site or a Web API site or an Orchard Core site. For more info on what you can do with .Net Core check out Microsoft's Introduction to ASP.NET Core

Before we add Orchard Core we are going to add our code to source control: Add Project to Source Control in Azure DevOps (VSTS)

Originally published on my personal blog: Create an ASP.net Core Website in Visual Studio 2017

Create an Angular 6 Site in .Net Core Part 2

Charles — Thu, 31 Jan 2019 22:47:56 +0000

Continued from Part 1

In the Tour of Heroes tutorial you simulate the data server using the in-memory Web API module. We will remove this and write a .Net Core API service to handle the requests from the angular application. We will create an in-memory database using entity framework and do some data seeding to put an initial list of heroes into the database.

In the Startup class add services.AddMvc() to the ConfigureServices method:

public void ConfigureServices(IServiceCollection services)
{
    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/dist";
    });
    services.AddMvc();
}

In the Configuration method add the following code above app.UseSpa:

app.UseMvc(routes =>
{
    routes.MapRoute(
    name: "default",
    template: "{controller}/{action=Index}/{id?}");
});

The method should look like this:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseStaticFiles();
    app.UseSpaStaticFiles();

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller}/{action=Index}/{id?}");
    });

    app.UseSpa(spa =>
    {
        // To learn more about options for serving an Angular SPA from ASP.NET Core, 
        // see https://go.microsoft.com/fwlink/?linkid=864501
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "start");
        }
    });
}

Add a Models folder to the project:
Add a Hero class to the Models folder: Select the Models folder. Press Shift + Alt + C to open the Add New Item dialog. Select the Class item and name it Hero.cs.

Add a public property for Id and Name:

public class Hero
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Add the database context class called HeroesContext: Select the Models folder. Press Shift + Alt + C. Select the Class item and name it HeroesContext.cs:
The class needs to inherit from the DbContext an you need to add the appropriate using reference:

Add a constructor and property as follows:

public class HeroesContext : DbContext
{
    public HeroesContext(DbContextOptions<HeroesContext> options)
        : base (options)
    {

    }

    public DbSet<Hero> Heroes { get; set; } 
}

We are going to use data seeding to initialise that database with some dummy data for testing. In the HeroesContext class override the OnModelingCreating method to add the seed data into the database:

public class HeroesContext : DbContext
{
    public HeroesContext(DbContextOptions<HeroesContext> options)
        : base(options)
    {

    }

    public DbSet<Hero> Heroes { get; set; }

    protected override void OnModelCreating(ModelBuilder builder)
    {
        base.OnModelCreating(builder);

        // Seed data for testing
        builder.Entity<Hero>().HasData(
            new Hero { Id = 1, Name = "Super Kid" },
            new Hero { Id = 2, Name = "Mega Baby" },
            new Hero { Id = 3, Name = "Hyper Girl" },
            new Hero { Id = 4, Name = "Plastic boy" },
            new Hero { Id = 5, Name = "The Dark Kite" },
            new Hero { Id = 6, Name = "Blue Ray" },
            new Hero { Id = 7, Name = "Bob" }
        );
    }
}

For testing we will use an in memory database, you would need to hook this up to a real database for production.

Register the database context with the dependency injection container by adding to the ConfigureServices method in the Startup class as follows:

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext&lt;HeroesContext>(opt =>
        opt.UseInMemoryDatabase("HeroesDatabase"));

    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/dist";
    });

    services.AddMvc();
}

Add the following using statements to reference the data model and entity framework:

using Microsoft.EntityFrameworkCore;
using AngularSix.Web.Models;

To force the data seeding add the following to the Configure method in the Startup class:

using (var serviceScope = app.ApplicationServices.CreateScope())
{
    var context = serviceScope.ServiceProvider.GetService<HeroesContext>();
    // This will force the data seeding
    context.Database.EnsureCreated();
}

The Configure method should look as follows:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    using (var serviceScope = app.ApplicationServices.CreateScope())
    {
        var context = serviceScope.ServiceProvider.GetService<HeroesContext>();
        // This will force the data seeding
        context.Database.EnsureCreated();
    }

    app.UseStaticFiles();
    app.UseSpaStaticFiles();

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller}/{action=Index}/{id?}");
    });

    app.UseSpa(spa =>
    {
        // To learn more about options for serving an Angular SPA from ASP.NET Core, see https://go.microsoft.com/fwlink/?linkid=864501
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "start");
        }
    });
}

Add a Controllers folder:
Add an API controller: Select the Controllers folder. Press Shift + Alt + C. Select the Web category and choose API Controller Class. Name the Class HeroesController and click Add
Add a constructor and a HeroContext property to the controller class. Inject the HeroContext object as a parameter into the constructor and assign it to the HeroesContext property:
```
private readonly HeroesContext _context;

public HeroesController(HeroesContext context)
{
    _context = context;
}
```
Replace the Get method with the following:
```
// GET: api/<controller>
[HttpGet]
public ActionResult<IEnumerable<Hero>> GetAll()
{
    return _context.Heroes;
}
```
Please Note: It is a really really really BAD idea to pull an object directly from a database and hand it off to a presentation layer. Over time additional information may be added to the object and there are no measures in place to limit the information in the api response.

Check the api call works by running the application and navigating to /api/heroes

If you want to test that the Angular app is working with the new api then in the app.module.ts file comment out the HttpClientInMemoryWebApiModule declaration in the imports array:

Navigate to /heroes and you should see the heroes declared in the GetAll method.

Nice

Now let's finish the remaining api calls

Replace the Put method with the following Update method:

// PUT api/<controller>/5
[HttpPut("{id}")]
public IActionResult Update(int Id, [FromBody]Hero item)
{
    var hero = _context.Heroes.Find(item.Id);
    if (hero == null)
    {
        return NotFound();
    }

    hero.Name = item.Name;

    _context.Heroes.Update(hero);
    _context.SaveChanges();
    return NoContent();
}

You need to update the updateHero method in hero.service.ts to include the hero id in the route:

/** PUT: update the hero on the server */
updateHero(hero: Hero): Observable<any> {
    return this.http.put({% raw %}`${this.heroesUrl}/${hero.id}`{% endraw %}, hero, httpOptions).pipe(
        tap(_ => this.log({% raw %}`updated hero id=${hero.id}`{% endraw %})),
        catchError(this.handleError<any>('updateHero'))
    );
}

Replace the Post method with the following Create method:

// POST api/<controller>
[HttpPost]
public ActionResult<Hero> Create([FromBody]Hero item)
{
    _context.Heroes.Add(item);
    _context.SaveChanges();

    return item;
}

If you test this by adding a new hero then you may receive an error

This is because the Add(item) call assigns the hero object an Id of 1. Maybe I missed something but I think there is a bug when adding seed data via the HasData approach. Here is how I got around it.

Create a method in the Startup class called AddSeedData and use the HeroesContext to add the data to the db:

private void AddSeedData(HeroesContext context)
{
    if (context.Heroes.Count() == 0)
    {
        // Create a new TodoItem if collection is empty,
        // which means you can't delete all TodoItems.
        context.Heroes.Add(new Hero { Name = "Super Kid" });
        context.Heroes.Add(new Hero { Name = "Mega Baby" });
        context.Heroes.Add(new Hero { Name = "Hyper Girl" });
        context.Heroes.Add(new Hero { Name = "Plastic boy" });
        context.Heroes.Add(new Hero { Name = "The Dark Kite" });
        context.Heroes.Add(new Hero { Name = "Blue Ray" });
        context.Heroes.Add(new Hero { Name = "Bob" });
        context.SaveChanges();
    }
}

In the Configure method remove or comment out the context.Database.EnsureCreated(); and add a call to AddSeedData passing the context as a parameter:

using (var serviceScope = app.ApplicationServices.CreateScope())
{
    var context = serviceScope.ServiceProvider.GetService&lt;HeroesContext>();
    // This will force the data seeding
    //context.Database.EnsureCreated();
    AddSeedData(context);
}

Remove or comment out the OnModelCreating method in the HeroesContext Class.

Now if you add a new hero now then the object should be assigned an id that isn't already used.

Replace the Delete method with:

// DELETE api/<controller>/5
[HttpDelete("{id}")]
public IActionResult Delete(int id)
{
    var hero = _context.Heroes.Find(id);
    if (hero == null)
    {
        return NotFound();
    }

    _context.Heroes.Remove(hero);
    _context.SaveChanges();
    return NoContent();
}

Finally modify the GetAll method to include a basic search by name:

// GET: api/&lt;controller>
[HttpGet]
public ActionResult<IEnumerable<Hero>> GetAll(string name)
{
    if (name == null)
    {
        return _context.Heroes;
    }
    else
    {
    return _context.Heroes
        .Where(r => r.Name.ToLowerInvariant().Contains(name))
        .ToList();
    }
}

The end

Originally published on my personal blog: Create an Angular 6 Site in .Net Core 2.1 from Scratch Part 2

Additional Resources:

Create an Angular 6 Site in .Net Core Part 1

Charles — Tue, 29 Jan 2019 11:11:41 +0000

Apart from looking at AngularJS years ago, I haven't use Angular so this is my first bash at it. We are going to create an angular 6 web application from scratch. I have intentionally not used the Angular template in visual studio because I like to understand how the project is constructed.

Let's get started:

In visual studio create a new ASP.NET Core Web Application
Select Empty project template
Install node so that we have the npm (node package manager): https://nodejs.org/en/

Update: You may need to restart visual studio before the next step.
We need to install the angular cli, to do this open the Package Manager Console in visual studio and run the following command:
```
npm install -g @angular/cli
```
When this completes you may get some warnings ….I have no idea if this is good or bad :-| but everything seems to work later.
Now we need to create the angular application. To do this run the ng new command, but first we need to navigate to the .Web folder in the Package Manager Console. By default the Package Manager Console runs in the directory the .sln file is located.

In the Package Manager Console enter cd [name of your project]:
```
cd AngularSix.Web
```
Run the following command to create the angular app:
```
ng new ClientApp
```
This will take a few minutes because the node_modules folder has to grow in size by about 200Mb

In visual studio you should have a whole load of new files under the ClientApp folder

In the Startup.cs change the ConfigureServices method to the following:

public void ConfigureServices(IServiceCollection services)
{
    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/dist";
    });
}

In the Configure method update it to the following:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseStaticFiles();
    app.UseSpaStaticFiles();

    app.UseSpa(spa =>
    {
        // To learn more about options for serving an Angular SPA from ASP.NET Core,
        // see https://go.microsoft.com/fwlink/?linkid=864501
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "start");
        }
    });
}

Press play and go grab a coffee, the first build takes a little time.

YAY!!

To check the angular bit is working. While the application is still running open the app.component.ts file

Modify the AppComponent title and save the change. watch the web page.

OMG! the web page automatically updates.

So not knowing anything about Angular I did the Tour of Heroes tutorial (v6.angular.io/tutorial) which covers the fundamentals of Angular. I recommend you go and do the tutorial to build up the ClientApp we just created. When you come back your ClientApp should look as follows:

NOTE: when you create components in the Tour of Heroes module you need to be in the ClientApp directory.

If you didn't do the Angular tutorial then the code can be found here stackblitz.com/angular/vvxldjlmnna

Wait a minute where's the .Net Core! Well this post has gone on long enough so I am going to write the .net core bit in the next post.

Part 2

Originally published on my personal blog: Create an Angular 6 Site in .Net Core 2.1 from Scratch Part 1