Building React Apps with Jenkins using npm, Snyk and Ansible

Building React Apps with Jenkins using npm, Snyk and Ansible

Building React Apps with Jenkins using npm, Snyk and Ansible. This article takes you through building a simple react static app using Jenkins and Ansible. The Jenkins infrastructure is built inside the AKS cluster and all are stages inside the Jenkins pipelines are dynamically provisioned using containers.

This article takes you through building a simple react static app using Jenkins and Ansible. The Jenkins infrastructure is built inside the AKS cluster and all are stages inside the Jenkins pipelines are dynamically provisioned using containers. The whole setup for the Jenkins is described in my previous blog here.

Let's go through each components inside the architecture. The source code is hosted in a public GitHub Repository. In the first stage, the source code will be scanned by Snyk tool which checks for any security vulnerability in the library used in the app. The second stage is to build the react app within a Node.js container and published binaries would be zipped and stored as an artifact within Jenkins. Storage of the artifact can be stored externally as well, but a script change will be required within the stage. After the app has been built, next stage is to provision the infrastructure using a terraform container. Terraform state is based on Azure Blob Storage as the remote back end for the persistence of state. During this infra provisioning stage, an Azure Blob Storage resource will be created along with static web apps feature enabled. In the last stage, ansible playbook will be executed inside a container with ansible installed and the deploys the react package to azure static apps hosted inside Azure blob storage. The same task can be done using AZCLI as well, but I just wanted to test the extend of support for ansible collection, for Azure.

devops jenkins terraform azure

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Create, Build, Deploy and Configure an Azure Function with Azure DevOps and Azure CLI

How to create, build, deploy and configure an Azure Function using Azure DevOps, Azure CLI and Powershell.

Updated: Announcing Azure DevOps Server 2020 RC1 | Azure DevOps Blog

Update: We received feedback in this blog and the Developer Community about an issue after upgrading from Azure DevOps Server 2019 Update 1.1 to Azure DevOps Server 2020 RC1.

Jenkins Is Getting Old — It’s Time to Move On

After using Jenkins on several projects, we say it's time to move on. Jenkins is left behind with his old approach — found out more!

How to Extend your DevOps Strategy For Success in the Cloud?

DevOps and Cloud computing are joined at the hip, now that fact is well appreciated by the organizations that engaged in SaaS cloud and developed applications in the Cloud. During the COVID crisis period, most of the organizations have started using cloud computing services and implementing a cloud-first strategy to establish their remote operations. Similarly, the extended DevOps strategy will make the development process more agile with automated test cases.

DevOps with Azure GitHub and Azure DevOps

Learn about what the upcoming roadmap is and how to optimize your pipelines to get the maximum flow of value to your customers.