• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Codemotion Magazine

Codemotion Magazine

We code the future. Together

  • Discover
    • Live
    • Tech Communities
    • Hackathons
    • Coding Challenges
    • For Kids
  • Watch
    • Talks
    • Playlists
    • Edu Paths
  • Magazine
    • AI/ML
    • Backend
    • Frontend
    • Dev Life
    • DevOps
    • Soft Skills
  • Talent
  • Partners
  • For Companies
Home » Frontend » Web Developer » From 0 to Kubernetes using .NET Core, Angular e Jenkins
Web Developer

From 0 to Kubernetes using .NET Core, Angular e Jenkins

Creating an Angular application that uses a REST service written in ASP.NET Core to then publish everything on aKubernetes cluster using Jenkins DevOps.

Last update September 20, 2019 by Luca Congiu

During the Codemotion Rome 2019, the Facebook Developer Circle joined the tech conference to present a live coding meetup. The meetup was an opportunity to see a live coding experiment where three different speakers were involved.

The speakers, with completely different skills, demonstrated how it’s possible to combine their skills and create an application written in Angular that uses a REST service written in ASP.NET Core to then publish everything on a Kubernetes cluster using the techniques of Jenkins DevOps.

Below we can see an image that represents the architectural scheme:


The meetup started with an overview of the different technologies used:

  • ASP.NET Core
  • Angular
  • Jenkins
  • Azure Kubernetes Services

To get an idea of ​​the main features, below is a brief excerpt of what was presented during the session:

ASP.NET Core

This is the new version of the .NET framework completely rewritten, open source and cross platform. The new framework differs greatly from previous versions (not Core) as it was designed to be native cloud and to have high performance.

Angular

This is the reference framework for front-end applications, it was designed to provide an easy and fast tool to develop applications that run on any platform, including smartphones and tablets.

It’s open source and, unlike its competitor React, it is a real framework written in Typescript.

Jenkins

Jenkins is an open source continuous integration tool, written in Java. The project started as an alternative version of Hudson starting from the same source code after a discussion with Oracle. It provides continuous integration services for software development.

Azure Kubernetes Sevices

This is one of the services on Azure that simplifies the management, distribution and operations of Kubernetes on the cloud.

Part 1: Back-End – REST API

Luca Congiu (Community DotNetCode) started the session by introducing the main features of an application written in .NET Core: Open Source, Cross Platform and Cloud Ready.

During the live coding, Luca showed how to use Visual Studio Community Edition to create minutes a fully-functional REST API Web application in few minutes. Such application persists in a database exploiting the potential of the Entity Framework Core. The sample data model used for the application was the classic one of a simple post of a hypothetical blog.

The fields taken into consideration were:

  • blogid, a unique identifier of the Post
  • Title of the post
  • Content, in html format
  • Date of publication


In addition, the back-end Web API has been equipped with Open API interfaces that allow online publication of the documentation of the available API endpoint.

Below is the image of the documentation on the back-end portal:


Once support for the Open API was over, Luca added the DockerFile to his project and published it on his GitHub repository which, through automatic integration with the Docker Hub, triggered the build and deploy of the Docker image on the public registry on the Docker Hub.

Part 2: Front End – Angular Web APP

In the second part of the live coding, Francesco Malagisi (Community Angular Rome) created an Angular application starting from the Angular CLI (Command Line Interface). Then he went on to create all the necessary components with the help of WebStorm.

During the session, the page displaying the list of posts and the post insertion / modification form was realised step-by-step.

Once the infrastructure was created, including all the elements to make up the front-end application, it was easy to connect the front-end application written in Angular with the Web API made available by the back-end because both use the protocol REST for data access.

Below we can see the image of the page created:


As a last implementation, Francesco added support to Progressive Web Apps adding, again through the CLI (Command Line Interface), the manifest file and the service worker.

Once PWA support was completed (Progressive Web APP), he added the DockerFile to his project and published it on his GitHub repository which, through automatic integration with the Docker Hub, triggered the build and deploy of the Docker image on the public registry on the Docker Hub.

Part 3: DEVOPS – Jenkins CI / CD

DevOps is a method of software development that focuses on communication, collaboration and integration between developers and information technology (IT) operations.

This session was masterfully directed by Diego Lagos Morales (Community Code Garden). Diego started by introducing what the DevOps world is and the motivations that drive companies to use tools such as Jenkins for Continuous Integration and Continuous Deployment. Then he created an automated deployment script on a GitHub repository that, once connected to the Jenkins instance installed on your PC, allows you to publish the back-end and front-end Docker images on a Kubernetes cluster previously created on Azure.

The deployment script is also available on GitHub.

It is also possible to run a live test on the actual change of the Kubernetes POD configuration to the update of the yaml file present in the repository dedicated to the DevOps project (here).

After the test on any possible configurations, Diego, Francesco and Luca ended by demonstrating the potential of what was presented, and pointing out that everything was done live and in just 40 minutes!

Links to GitHub projects:

  • Back-end: https://github.com/devcrome/CodemotionRome2019MeetupDemoBackEnd
  • Front-end: https://github.com/devcrome/CodemotionRome2019MeetupDemoFrontEnd
  • DevOps: https://github.com/devcrome/CodemotionRome2019MeetupDevOps
facebooktwitterlinkedinreddit
Share on:facebooktwitterlinkedinreddit

Tagged as:Angular Dot NET Kubernetes

RxJS and Angular Reactive Forms
Previous Post
Interview with Pieter Omvlee
Next Post

Related articles

  • GRPC Approach for Improved Software Development
  • Pro Tips For Web Designers Who Want to Create Better Web Experiences
  • Devtools: Boosting Your Web Development Workflow on Chrome and Firefox
  • Best 10 Tools to Leverage for Progressive Web App Development
  • Getting Started with WebAssembly and Rust
  • Decoding Adaptive Vs. Responsive Web Design
  • GraphQL Testing With Karate
  • Introducing a new and improved Twitter API
  • Speeding up innovation with Arun Gupta
  • 18 Books & Blogs Every Developer Should Read

Primary Sidebar

The IT Industry in Italy: Trending Positions, Salaries, and Main Skills for 2022

Codemotion and Adecco’s guide to understanding the IT working environment in Italy. Download here:

Adecco Whitepaper IT Report

Latest

grpc, http, rest

GRPC Approach for Improved Software Development

Web Developer

Using the Twelve-Factor Methodology in Cloud-Native Microservices

Microservices

svelte, javascript frameworks, vue.js, angular

Svelte: Why Is It an Innovation to Javascript Frameworks?

JavaScript

blockchain, avascan, avalanche, defikingdom, subnet

How to Deploy a Subnet on Avalanche Blockchain: The Case of DeFi Kingdom

Blockchain

automation, security, cybersecurity

How to Implement a Security Testing Program For Web Applications

Cybersecurity

Related articles

  • GRPC Approach for Improved Software Development
  • Pro Tips For Web Designers Who Want to Create Better Web Experiences
  • Devtools: Boosting Your Web Development Workflow on Chrome and Firefox
  • Best 10 Tools to Leverage for Progressive Web App Development
  • Getting Started with WebAssembly and Rust
  • Decoding Adaptive Vs. Responsive Web Design
  • GraphQL Testing With Karate
  • Introducing a new and improved Twitter API
  • Speeding up innovation with Arun Gupta
  • 18 Books & Blogs Every Developer Should Read

Footer

  • Magazine
  • Events
  • Community
  • Learning
  • Kids
  • How to use our platform
  • Contact us
  • Become a contributor
  • About Codemotion Magazine
  • How to run a meetup
  • Tools for virtual conferences

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

DOWNLOAD APP

© Copyright Codemotion srl Via Marsala, 29/H, 00185 Roma P.IVA 12392791005 | Privacy policy | Terms and conditions

  • Magazine
  • Events
  • Community
  • Learning
  • Kids
  • How to use our platform
  • Contact us
  • Become a contributor
  • About Codemotion Magazine
  • How to run a meetup
  • Tools for virtual conferences

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

DOWNLOAD APP

CONFERENCE CHECK-IN