Forem: Navya Arora

Provisioning Cloud Resources with Crossplane on Kubernetes🚀

Navya Arora — Sat, 25 Oct 2025 11:49:00 +0000

TL;DR: Crossplane extends kubernetes from just being an application orchestrator to universal control plane for cloud infrastructure. This article can help you to understand what crossplane is and how it helps in provisioning the cloud resources in a declarative way in kubernetes.

Introduction: The problem space⚠️

Provisioning cloud resources has always been a key part of infrastructure management. In any organisational codebases, there would be many services co-existing and each service would have its databases, storage buckets, service accounts - often across multiple cloud providers like GCP, AWS or Azure.

For provisioning and managing these resouces, Infrastructure as Code (IaC) tools like terraform or cloudformative emerged which helped in bringing the structure and in defining infrastructure declaratively in configuration files. But they don’t continuously reconcile the actual state of your infrastructure.

Meanwhile, kubernetes reformed how we manage our applications and introduced the concepts of control planes that continuously ensures the actual cluster state matches the desired state defined by YAML manifests. I would assume that if you are giving this article a read you would have some basic understanding of how kubernetes works😄

It defines the objects(deployments and services) declaratively and
ensures the system always matches our intent. And this intrigues the question that — why can’t we manage cloud infrastructure in the same way⁉️

And here enters Crossplane which extends Kubernetes’ model beyond container orchestration into the realm of infrastructure orchestration.

What Crossplane is and how it works?🤔

Crossplane is an abstraction layer that lets you provision and orchestrate cloud resources across multiple vendors in a declarative way using a single unified API.

It acts like an universal remote control for cloud services and along with this, brings 2 major advantages:

Workload portability – This allows dev teams to build applications that can run on any cloud provider without any modifications.
Reconciliation loop – This ensures that the state of your deployment matches the state of the configuration you passed in.

How to deploy ☁️ resources using crossplane?

Set up crossplane in kubernetes cluster

You can install Crossplane with Helm:

helm repo add crossplane-stable https://charts.crossplane.io/stable
helm repo update
helm install crossplane --namespace crossplane-system --create-namespace crossplane-stable/crossplane

Then verify:

kubectl get pods -n crossplane-system

Once it’s running, Crossplane becomes part of your cluster — ready to manage infrastructure.🚀

► Install a Cloud Provider

Crossplane itself is cloud-neutral. You add providers for the clouds you want to manage.

For example, install the AWS provider:

kubectl crossplane install provider crossplane/provider-aws:v0.38.0

Similarly, you can install:

crossplane/provider-gcp
crossplane/provider-azure

Check your installed providers:

kubectl get providers

This step adds new CRDs (Custom Resource Definitions) like:

S3Bucket
RDSInstance
VPC

► Configure Provider Credentials

You need to give Crossplane permission to talk to your cloud account.

Example (AWS):

Create a Kubernetes Secret with your AWS credentials:

kubectl create secret generic aws-creds -n crossplane-system --from-file=creds=./aws-credentials.conf

Reference it in a ProviderConfig:

apiVersion: aws.crossplane.io/v1beta1
kind: ProviderConfig
metadata:
  name: default
spec:
  credentials:
    source: Secret
    secretRef:
      namespace: crossplane-system
      name: aws-creds
      key: creds

This tells Crossplane how to authenticate when creating AWS resources.

► Create a Cloud Resource (Example: AWS S3 Bucket)

Now, you can define a resource just like any other Kubernetes object.

apiVersion: s3.aws.crossplane.io/v1beta1
kind: Bucket
metadata:
  name: demo-bucket
spec:
  forProvider:
    locationConstraint: us-east-1
  providerConfigRef:
    name: default

Apply it:

kubectl apply -f bucket.yaml

Crossplane’s controller will:

Connect to AWS using the credentials you provided,
Create the bucket,
Continuously reconcile its state.

Check its status:

kubectl get bucket
kubectl describe bucket demo-bucket

When you see Ready: True, your cloud resource is live 🎉

► Clean Up

When you delete the YAML manifest, Crossplane destroys the real cloud resource too:

kubectl delete -f bucket.yaml

That’s full lifecycle management — declarative and reversible.

Troubleshooting

The easiest way to check if your resources are properly deployed is to check the claim. You can do

kubectl get claim -n <namespace>

If both synced and ready are true on your claim your resources should be deployed properly and ready for use. If any of them are false, firstly it could just be that it haven’t had enough time to deploy the resource, creating the resources can take some time, but if that is not the case then the most common place you could find info about potential errors is by describing the composite resource (not the claim) and looking at the events.

Hope you find this article insightful and if you want to explore more in this domain, you can always refer the crossplane documentation to dive deep into it.

React MUI Content Security Policy

Navya Arora — Sun, 28 May 2023 19:00:48 +0000

Material-UI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google. In this article let’s discuss the Hidden component in the Material-UI library.
When using Material-UI (also known as MUI) with React, it's important to set up a Content Security Policy (CSP) to ensure that your app is secure against cross-site scripting (XSS) attacks. A set of rules that specify which content can be loaded by web page is known as CSP. It helps to prevent XSS attacks on the web page.

const csp = `
  default-src 'self';
  script-src 'self';
  style-src 'self';
`;

Basic Setup: Follow the below steps to create the application.

Step 1: Create a folder called example. Open your command prompt and navigate to the example folder. Now type in the following command

npx create-react-app

Step 2: Create a folder called component inside the src folder. Inside that component, create a file called Main.js.

cd src
mkdir component
touch Main.js

Step 3: Again, in the same folder, open the command prompt and type in the following command to install React MUI library.

npm install @mui/material @emotion/react @emotion/styled

Step 4: Install the React 'helmet' library.

npm install helmet
npm install react-helmet
npm install react-helmet-async

Step 5: Importing the 'helmet' library.

import { Helmet } from "react-helmet";

Project Structure: Once the installation is complete, you will have the modules required. Your folder structure should look something like this.

Example 1: Setting up a CSP with React MUI using the 'helmet' library. It is used as the document head manager for React-based applications.

App.js

import React from "react";
import Main from "./component/Main";
import { Helmet } from "react-helmet";

const csp = `
  default-src 'self';
  script-src 'self' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data:;
  font-src 'self' data:;
`;

console.log({ csp });

const App = () => {
    return (
        <>
            <Helmet>
                <meta http-equiv="Content-Security-Policy" content={csp} />
            </Helmet>

            <Main />
        </>
    );
};

export default App;

Main.js

import React from "react";

function Main() {
    return (
        <>
            <div>
                GeeksforGeeks
                <br />
                Content Security Policy in MUI
            </div>
        </>
    );
}

export default Main;

Step to run the application: Open your command prompt in the same folder, and type in the following command

npm start

Output:

Example 2: Setting up CSP using the 'react-helmet-async' library.

App.js

import React from 'react';
import Main from './component/Main';
import { HelmetProvider } from 'react-helmet-async';
import { CssBaseline } from '@material-ui/core';

function App(){
  return(
    <>
      <HelmetProvider>

        <CssBaseline />
        <Main/>

      </HelmetProvider>
    </>
  );
};

export default App;

Main.js

import React from 'react';
import { Helmet } from 'react-helmet-async';
import { Button } from '@material-ui/core';

function Main() {
  return (
    <>
      <Helmet>
        <meta
          http-equiv="Content-Security-Policy"
          content="
            default-src 'self';
            script-src 'self' 'unsafe-inline' 'unsafe-eval';
            style-src 'self' 'unsafe-inline';
            font-src 'self' data:;
            img-src 'self' data:;
          "
        />
      </Helmet>
      <Button variant="contained" color="primary">
        Hello, World!
      </Button>
    </>
  );
}

export default Main;

Output:

This sets the 'Content-Security-Policy' header to allow resources to be loaded only from the same origin ('self'), and also allows inline scripts and styles.

Connect me on Twitter:- Twitter 🤝🏻

Do check out my GitHub for amazing projects:- GitHub 🤝🏻

Connect me on LinkedIn:- Linkedin 🤝🏻