Docker : Command to See What Containers Are Running

In our previous blog posts we ran containers with the Fedora and CentOS images.  In this blog we are going to run a command to see which containers are running in our host system.  To get a list of all the containers running on our host Ubuntu system we type in the command docker ps -a command.

As you can see since we gave our containers a name, dev for Fedora and test for CentOS we see that in addition to the weird image ID number there's also the name dev and test being assign to the containers.  More human readable names don't you think?  This is the power of Docker.  In theory you can have your entire environment in one server box.  Dev/Test/Prod all containers in one host system.  That's why Docker gets so much hype.

Docker : Pull The Latest CentOS Image Into A Ubuntu Server

The beauty of Docker is that you can run a very lightweight image of another Linux distro on your host system.  In this post we will be pulling the latest image of CentOS into our docker container on our Ubuntu server.

Step-by-Step:

1. Open the terminal in Ubuntu, then make sure docker is running by typing service docker status, you should see something a message like the image below

2.  Type in the following command docker run --name test -it centos /bin/bash . The command tells Ubuntu to run docker with the name dev in interactive mode with an emulated terminal using the CentOS image with the bash shell.  If there's no local image docker will pull the latest image from CentOS

3.  After the command is completed you will running inside the CentOS container, you can tell by the changes in the prompt

4.  The weird number is in the prompt is the image ID of the CentOS image that we pulled.  If you type service docker status you will get an error message saying it does not recognize the command because docker is installed in the host machine not the CentOS image

5.  To get out of the CentOS container just type exit and you will get back to the host system

Docker : Pull The Latest Fedora Image Into A Ubuntu Server

The beauty of Docker is that you can run a very lightweight image of another Linux distro on your host system.  In this post we will be pulling the latest image of Fedora into our docker container on our Ubuntu server.

Step-by-Step:

1. Open the terminal in Ubuntu, then make sure docker is running by typing service docker status, you should see something a message like the image below

2.  Type in the following command docker run --name dev -it fedora /bin/bash . The command tells Ubuntu to run docker with the name dev in interactive mode with an emulated terminal using the Fedora image with the bash shell.  If there's no local image docker will pull the latest image from Fedora

3.  After the command is completed you will running inside the Fedora container, you can tell by the changes in the prompt

4.  The weird number is in the prompt is the image ID of the Fedora image that we pulled.  If you type service docker status you will get an error message saying it does not recognize the command because docker is installed in the host machine not the Fedora image

5.  To get out of the Fedora container just type exit and you will get back to the host system

Docker : Adding Non Root Users To The Docker Group In Ubuntu

One of the most common task you have to do as a Linux administrator is to add a new user.  Especially developers who always wants root access. Docker needs root access, however the person who is administering Docker is probably not the system administrator.  Most likely it will be the application developer. To accomplish this task you can use the useradd command in the Terminal session then add the new user to the Docker group.  Follow the steps below to add a new user to Ubuntu.

1.  Switch into the root user using sudo su - command

2. Type the following command useradd -s  /bin/bash -d /home/john -m john then press "Enter"

useradd is the command to add a new user to Ubuntu, below is an explaination of what each switch means in the command above

-s --shell SHELL - the login shell of the new account, which is the/bin/bash shell
-d --home-dir HOME_DIR - home directory of the new account, which is /home/john

3.  Type ls /home to list the content of the /home directory and you will see the john directory has been created for the user john

4.  We've created a new user name john, but he has no password, to set a password for john we can use the passwd command.  Type the following command to assign john a password passwd john  type in john's password when prompted with Enter new UNIX Password:   and confirm the password when prompted with Retype new UNIX password:

5.  Even though john has a login, we still don't know what John's full name is to assign a real name to the login john we can use the usermod -c command to assign the login name john a real name

the command above usermod -c "John Wallace" john assigns the name John Wallace to the user name john

Now we can add john to the Docker group

6.  First we need to find out if the docker group has been created, type cat /etc/group to look at the list of groups

As you can see the docker group has been created

7,  To add john to the docker group type gpasswd -a john docker

Now you will see that john is a part of the docker group

ASP.NET Core : Adding The Default View With _ViewStart.cshtml

In ASP.NET MVC there is a default layout file that the application use when one exists.  If you look at the markup at the top of the "Index.cshtml" file you will see that there is a markup to specify the layout of the page in the code below.

@{
    Layout = null;
}

The code above tells ASP.NET MVC to not assign any layout to the page because it is being set to null. In this blog we will build on our existing NorthwindCafe.Web  project and add a default layout view to the project so that each page in the project will have a common layout.  This is similar what you would a master page for in web forms.

Step-By-Step Instructions:

1. Open the "NorthwindCafe.Web project in Visual Studio
2.  Right-click on the Views folder then select Add → New Item → .NET Core →  MVC View Start Page then click the "Add" button

4.  Now you will see the _ViewStart.cshtml file in the "Views" folder

5.  Delete all the markup in the _ViewStart.cshtml file, then type in the following lines of code, then save the file

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

6.  Right-click on the "Views" folder again, then this time create a folder call "Shared"

7.  Right-click on the "Shared" folder then select Add → New Item → .NET Core → MVC View Layout Page , name the file "_Layout.cshtml", click on the "Add" button

8.  When you are finish you should have the following folder structure in your "Views" folder

9.  In the _Layout.cshtml file you will see the following markup

<!DOCTYPE html>
<html>
    <head>
        <title>@Page.Title</title>
        @RenderSection("head", required: false)
    </head>
    <body>
        <h1>This is from the _ViewStart.cshtml</h1>
        @RenderBody()
    </body>
</html>

In the code above the line @RenderSection("head", required: false) tells MVC to render the head section if it's there in the web page, however it is not required. Then in the line @RenderBody() tells MVC to render the body. We added the line <h1>This is from the _ViewStart.cshtml</h1> as an indicator that _ViewStart.cshtml file is being applied.

10.  Now we are going to use the default _ViewStart.cshtml layout with our "Index.cshtml" file
11.  Open the "Index.cshtml" file and delete all the markup for it if you have any
12. Now type in the following markup for the page

<h3>This is from Index.cshtml</h3>

In the code above all we have to do is type in the markup for our page, the common tags like the head and body tag has been taken care of by the layout. If you run the application by pressing Ctrl+F5 you will the following

As you can see even though we didn't define any layout in our "Index.cshtml" file all we have was the <h3>This is from Index.cshtml<h3> markup, the layout specified in the _ViewStart.html file was automatically applied to our page.  If you look the generated html page you will see that it's a complete HTML5 page, with the head and body tag. This is possible because of the _ViewStart.cshtml page.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        
    </head>
    <body>
        <h1>This is from the _ViewStart.cshtml</h1>
        

<h3>This is from Index.cshtml</h3>
    
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"e06cac45479d4bfe8fcf5ab10b04ce35"}
</script>
<script type="text/javascript" src="http://localhost:51916/ec2fbdd4a59342ca8fe98bb63b3b5e82/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

Docker : Adding Docker Repository Key and Updating Docker To The Latest Version

In the previous post we installed Docker on our Ubuntu server.  Now we are going to add the Docker repository to our local server so that we can get the latest version of Docker.

Step-By-Step Instructions:

1. Open the terminal command line tool and switch to root user with the sudo su command

2. Now we have to add the Docker repo key to our local machine by typing the following command

wget -qO- https://get.docker.com/gpg | apt-key add -

3. The next command is to add the Docker repository to the Ubuntu repository source list.  Type the following command into the terminal:
echo deb http://get.docker.com/ubuntu docker main > /etc/apt/sources.list.d/docker.list

4.  Now type apt-get update to get the latest updates from the Docker repository.  If you haven't ran update for a while.  This might take a while.

5.  After the update has completed type docker -v to the version number

Installing Docker On CentOS

Docker is the hottest infrastructure technology to hit the tech world in a long time.  The appeal of Docker is that it allows the infrastructure team to utilize the capacity of the servers to near full capacity.  Docker is a container.  A container is like a micro virtualization minus the operating system.  It only contains enough infrastructure to host an app, without the fat.  Hence the term container is used to describe it.

Here are the steps to install Docker on a CentOS Server:

1.  Open the CentOS terminal, then type the following command to switch to the super user:
     sudo su

2.  Now get the latest update for CentOS by typing yum update

3.  To install Docker type the following command in the terminal
   yum install -y docker

4.  Once the installation is complete type following command to start the docker service
     systemctl start docker.service, then type systemctl status docker.service to see the current status      of our docker container.  You should see the message that says "active (running)" in green.

Now we have Docker installed and running on CentOS.

Installing Docker On Ubuntu Server

Docker is the hottest infrastructure technology to hit the tech world in a long time.  The appeal of Docker is that it allows the infrastructure team to utilize the capacity of the servers to near full capacity.  Docker is a container.  A container is like a micro virtualization minus the operating system.  It only contains enough infrastructure to host an app, without the fat.  Hence the term container is used to describe it.

Here are the steps to install Docker on a Ubuntu Server:

1.  Open the Ubuntu terminal, then type the following command to switch to the super user:
     sudo su

2.  Now get the latest update for Ubuntu by typing apt-get update

3.  To install Docker type the following command in the terminal
     apt-get install -y docker.io

4.  Once the installation is complete type service docker status

Now we have Docker installed and running on Ubuntu.  It was pretty simple wasn't it?

ASP.NET Core : Create Our First Controller and View

In the previous post we have enabled MVC on our application.  Now we want to add our first MVC controller and view to test out verify that MVC is working.  We also have to tell ASP.NET Core what pattern to look for when looking for our controllers and views.


Step-By-Step Instructions:

1.  Add a folder call "Controllers" in the root of your application

2. Right click on the "Controllers" folder and select "Add" → "New Item" → .NET Core → MVC Contoller Class, then click "Add"

3.  You see the "HomeController.cs" class being added to the "Controllers" folder

4.  Double click on the "HomeController.cs" file and you will see the following code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace NorthwindCafe.Web.Controllers
{
    public class HomeController : Controller
    {
        // GET: //
        public IActionResult Index()
        {
            return View();
        }
    }
}

5.  Create a folder in the root of the application call "Views" then inside the "Views" folder create another folder call "Home"

6.  Right click on the "Home" folder and select Add → New Item → .NET Core → MVC View Page, keep the name of the view as Index.cshtml then click "Add"

7 .  Double click on the view "Index.cshtml" and type "Hello World" between the <div> tag like the markup below

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        Hello World!
    </div>
</body>
</html>

8. Press Ctrl+F5 to run the application, you will see the following.

9.  All you will see is an empty page, where is our "Hello World"?  The reason we don't see our view is because we haven't define any routes for our application yet.

10.  To enable routing for our application open up the Startup.cs file and modify the app.UseMvc() method's config instance to configure the routes for our application

        public void Configure(IApplicationBuilder app)
        {
            app.UseStaticFiles();
            app.UseMvc(config => {
                config.MapRoute(
                    name: "Default",
                    template: "{controller}/{action}/{id?}",
                    defaults: new  { controller = "Home", action = "Index" }
                    );
            });
        }

The code above configures the default route for our application with name of the route assigned to "Default", the "template:" field specifies the pattern that MVC should look for when locating our routes.  The "defaults:" field uses an anonymous object to define a default route in case nothing is found or nothing is typed into the URL.

11.  Now when you press Ctrl+5 you will see our "Hello World"

Enable MVC On ASP.NET Core Application

In this post we will go over the process of enabling ASP.NET MVC in our application.  Just like static files, in order for us to use MVC in our application we have to tell ASP.NET Core to use in the Startup.cs file.  We will continue to use the application "NorthwindCafe" that we used in our previous blog.

Here are the steps to add MVC to your application:

1.  Open the Startup.cs file, then in "ConfigureServices" method type in the following to enable MVC

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

2. As with the static files, there will be a red underline on the .AddMvc() method that's because we haven't added the package to your project yet.  So click on the yellow light and select the first option to add Microsoft.AspNET.Mvc package to our project.

3.  Now go into the Configure method and type app.UseMvc() into the method, the final markup should look like the following

        public void Configure(IApplicationBuilder app)
        {
            app.UseStaticFiles();
            app.UseMvc();
        }

Even though we have enabled MVC in our application we haven't configure any routes for it.  We will do that in the next post.  Stay tuned!

ASP.NET Core Posts:

1. How To Create An ASP.NET Core Application From Scratch
2. ASP.NET Core : Add jQuery, Bootstrap, AngularJS Using bower.json
3. Enable ASP.NET Core to Serve Static Files
4. Enable MVC On ASP.NET Core Application

Enable ASP.NET Core to Serve Static Files

As I have mentioned before ASP.NET Core decouples the application from the infrastructure as much as possible.  Therefore, you have to tell it exactly what you want in your project.  In this blog post we are going to tell ASP.NET that we want to serve static html files in our application.

Here are the steps to serve static files in our ASP.NET Core application.

1.  Open the "NorthwindCafe.Web" project, then click on the "Startup.cs" file in the project.  You will see the following markup in the Configure method

        public void Configure(IApplicationBuilder app)
        {
            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Hello World!");
            });
        }

2.  Go into the Configure method, remove the existing code and type in the following code

        public void Configure(IApplicationBuilder app)
        {
            app.UseStaticFiles()
        }

You will notice that the app.UseStaticFiles() has a red underline on it. That's because there's a dependency that we are missing. Visual Studio is smart enough to detect that and give us a warning. You will see a yellow light bulb icon next to "app.UseStaticFiles()"

3. Click on the light bulb and select the first option which will add the namespace to the project and will automatically, once the file is saved.

4. After the reference has been added you will see that in the "References" section you will see the "Microsoft.AspNetCore.StaticFiles" and an entry has been added to the project.json file for the package.  Now you can serve static files in the wwwroot directory

ASP.NET Core Posts:

1. How To Create An ASP.NET Core Application From Scratch
2. ASP.NET Core : Add jQuery, Bootstrap, AngularJS Using bower.json
3. Enable ASP.NET Core to Serve Static Files
4. Enable MVC On ASP.NET Core Application

ASP.NET Core : Add jQuery, Bootstrap, AngularJS Using bower.json

In this blog post we are going to add the jQuery, AngularJS, and bootstrap libraries to our ASP.NET Core application.  Normally we will use NuGet to bring in these libraries but ASP.NET Core gives you the option to use bower to configure the dependencies that you will need on the client-side.

Here are the steps to import the client-side dependencies into our project:

1. First let's make bower.json part of the "NorthwindCafe.Web" project, by right click on the bower.json file, and then choose "Show in Solution Explorer"

2.  Open the bower.json file the markup should look like this

{
 "name": "asp.net",
 "private": true,
 "dependencies": {
 }
}

3. Change the markup to look like the following

{
 "name": "asp.net",
 "private": true,
        "dependencies": {
           "bootstrap": "~3.3.6",
           "angular": "~1.5.7"
  }
}

4. Save the bower.json file, once the file is saved a folder called "lib" will be created and will contain the bootstrap and AngularJS libraries

ASP.NET Core Posts:

1. How To Create An ASP.NET Core Application From Scratch
2. ASP.NET Core : Add jQuery, Bootstrap, AngularJS Using bower.json
3. Enable ASP.NET Core to Serve Static Files
4. Enable MVC On ASP.NET Core Application

How To Create An ASP.NET Core Application From Scratch

Technology has moved at a breakneck speed, after working with ASP.NET Core for a while, I realized that my ASP.NET MVC blog articles have become outdated.  Don't get me wrong, MVC is still a very big part of ASP.NET Core, but that's the thing it's just a part of it.  ASP.NET Core has decoupled the infrastructure from the application.  You can deploy your web app on Docker imagine that!  No longer is IIS your primary means of hosting your ASP.NET application.

However, with this new freedom comes added complexity.  No longer can you just drag and drop components into your design surface.  Those days are long gone.  This post ist meant to ease your way into ASP.NET Core.  I will using the release candidate version two of ASP.NET Core for this post and other subsequent posts.  Don't be surprise if I update the version midstream because the product is still pre-release.  I will be using Visual Studio 2015 for my development.  You can use the command line interface and notepad to develop your ASP.NET Core application.  But, I think that borders on insanity.

So let's begin our journey together!

Here are the steps to create an ASP.NET Core application from scratch:

1. Create an empty Visual Studio solution File → New → Project → Other Project Types → Visual Studio Solutions → Blank Solution.  In the name field call the solution "NorthwindCafe" then press "OK"

2.  Now that we have the blank solution we can add the ASP.NET Core project, right click on the "NorthwindCafe" solution, then select "Add" → New Project →  Visual C# →.NET Core → ASP.NET Core Web Application (.NET Core) .  In the "Name" field give it the name "NorthwindCafe.Web" then click "OK"

3.  On the "Select a template" screen select "Empty" then click "OK"

4.  After you click "OK" you will see the following folder structure for your project.  As you can see it's very bare bones to start with.  The first thing you will notice is that there is a "wwwroot" folder and a project.json file. The wwwroot folder represents your webroot directory remember you are not developing for just IIS anymore.  So everything in the wwwroot would work on the client side.  The other file project.json file is used to configure all of your project's dependencies.  One thing to keep in mind is that nothing has been enabled yet.  You have to configure the application to use what you need.

5.  The first thing we want to add is a bower config file into your project so that we can obtain the client dependencies that we need.  The neat thing about ASP.NET Core is that bower will put the dependencies in a folder call "lib" inside the "wwwroot" folder.  If you need a refresher on bower you can go to this post .   To add the bower configuration file right-click on the "NorthwindCafe.Web" project.  Then select → New Item  →.NET Core → Client-side → Bower Configuration File then click "OK"

6.  The bower.json file should have the following markup

{
 "name": "asp.net",
 "private": true,
 "dependencies": {
 }
} 

7. If you look at the project you won't see the "bower.json" file, the reason is because you haven't added to the project yet. To make the "bower.json" file appear in your project Click on the "Show All Files" icon.

This concludes the post for today.  In subsequent posts we will build on this project to make this a full blown application.  Thank you for reading!  I hope you've enjoyed this post.

ASP.NET Core Posts:

1. How To Create An ASP.NET Core Application From Scratch
2. ASP.NET Core : Add jQuery, Bootstrap, AngularJS Using bower.json
3. Enable ASP.NET Core to Serve Static Files
4. Enable MVC On ASP.NET Core Application

AngularJS SPA Pt 3 : Refactor Code to Not Use Global Variables (Shopping List App)

In the previous blog we got Angular-Seed to work with a module and a controller.  However, we put everything in the global scope.  The problem with that is that there are many JavaScript libraries that might be using the same variables as we are, or if we are working with other developers.  The way we can mitigate this problem is to wrap our modules and controllers in an anonymous function.  Think of an anonymous function as a wrapper or a container to hold our modules and controllers.  Another term developers like to refer to anonymous function is an IIFE.  Whatever it's called it's always good practice to avoid putting things in the global environment if it can be avoided.

Here are the steps to take the modules and controllers out of the global environment:

1.  First let's wrap the module in an anonymous function.  The source code for the app.js file should look like the following

(function(){
    'use strict';

    var app = angular.module('shoppingList',['shoppingController']);
    
}());

The code above wraps the application in anonymous function and assigned to the variable call "app"

2.  Now open the "shoppingController.js" in the "controllers" folder and wrap the "shoppingController" in anonymous function, the source code for the file should look like the following

(function(){
   'use strict';

angular.module('shoppingController',[])
 .controller('shoppingController',["$scope",function($scope){
  $scope.shoppingListName="My Shopping List";
}]); 
    
})());

3.  Open up the "index.html" file and make sure the source code looks like the following.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Shopping List App</title>
 <link rel="stylesheet" type="text/css" href="app.css">
</head>
<body ng-app="shoppingList" ng-controller="shoppingController">
{{shoppingListName}}
<script type="text/javascript" src="js/lib/angular/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/shoppingController.js"></script>
</body>
</html>

4. In the command line where the root folder is type in "npm start"

5.  Type int the following URL in your browser http://localhost:8000/ and you will see the following

Note: In order to see the application in your browser you must first run the "npm start" in your angular-seed folder first

In this tutorial we've taken some steps to future proof our application so that we are not working in the global environment

Posts In The AngularJS SPA Application Series:

1. Setting Up Angular-Seed
2. Preparing Angular-Seed For The Shopping List Application
3. Refactor Code to Not Use Global Variables (Shopping List App)