• 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

  • Advanced CSS Tricks That You Have To Know
  • PHP for Web Development in 2022: Dead, Alive, or Missing in Action?
  • 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

Primary Sidebar

Lessons Learned in the Cloud

Dive deep into this whitepaper dedicated to the Cloud and discover more about Kubernetes.

OVH Logo Lessons learned in the cloud

Codemotion Milan 2022

https://youtu.be/ym8iilUy_U0

Latest Articles

AWS sv Azure

AWS vs. Azure Cost Comparison [2022]

Cloud

Which Cloud Adoption Strategy Should I Follow?

Cloud

php cover

PHP for Web Development in 2022: Dead, Alive, or Missing in Action?

Web Developer

Golden Rules for Combining Front-end Security and UI

Frontend

Discover More

  • Survey Reveals Four Types of Developers: Which One Are You?
  • Don’t Miss the Next Edition of our Devs Book Club with Matteo Pagani!
  • JavaScript: A First Look at the Type Annotation Proposal

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

Follow us

  • Facebook
  • Twitter
  • LinkedIn
  • Instagram
  • RSS

DOWNLOAD APP

CONFERENCE CHECK-IN