Build and Deploy a Fullstack Web App to Kubernetes with mogenius

What You’ll Learn

In this tutorial, you’ll deploy a fullstack web application — a frontend, backend, and database — to Kubernetes using mogenius. You’ll start from GitHub repositories, connect a cluster, and set up CI/CD pipelines to deploy everything in a clean, self-service workflow.

‍

It’s designed for developers who want to build and operate microservices on Kubernetes without needing deep platform knowledge. The mogenius Operator and Platform handle the Kubernetes complexity, while you focus on code.

‍

Architecture Overview

Your application consists of three components:

‍

• Frontend: Static HTML/CSS/JS served via NGINX
• Backend: Node.js (Express) API
• Database: MariaDB

‍

# Architecture Diagram
Browser
  |
  v
[frontend.mycluster.mogenius.app] (NGINX)
  |
  v
[backend.internal] (Express.js)
  |
  v
[MariaDB Service]

‍

All services are deployed inside a mogenius Workspace, isolated in a dedicated Namespace on your Kubernetes cluster.

‍

Prerequisites

To follow along, you'll need:

• A GitHub account
• A mogenius account (free plan available)
• A connected Kubernetes cluster (mogenius supports any)
• git and a code editor

‍

1. Connect Your Kubernetes Cluster

1. Log in to mogenius.
2. Navigate to Clusters → click Connect Cluster.
3. Follow the instructions to install the mogenius operator on your cluster.

‍

Once your cluster is connected, the operator automatically installs a metrics-server. If you don’t have them already, you can install baseline components like Ingress controller (Traefik), cert-manager and clusterIssuer (Let’s Encrypt) from the cluster settings.

‍

2. Create a Workspace and Namespace

1. Go to Workspaces, click Create Workspace. This provides you with a streamlined environment for multiple namespaces and managing RBAC.
2. Name your workspace (e.g. comment-app), invite other users if needed.
3. Inside the workspace, create a Namespace (e.g. dev)

‍

3. Deploy the Frontend (NGINX)

Step 1: Prepare the GitHub Repo

Create a GitHub repo for your frontend (HTML, CSS, JS). Include a basic Live Server–style index.html.

Sample file structure:

# Frontend Directory
/frontend
├── index.html
├── style.css
└── script.js

‍

Step 2: Add a Dockerfile

# Dockerfile for Frontend
FROM nginx:alpine
COPY . /usr/share/nginx/html

‍

The Dockerfile will be used by the mogenius pipeline starter to build your image. You can use this template and push it to your Github repo.

‍

Step 3: Set Up the Pipeline in mogenius

mogenius integrates with Github actions and provides a pipeline starter. This creates a workflow that builds your image with Github actions, pushes it to your container registry, and then calls the mogenius API to make the operator set the new image in your Kubernetes deployment.

‍

1. In your workspace, click Add Resource → Pipeline Starter.
2. Connect your GitHub account and select the frontend repository.
3. mogenius will:
   • Build your Docker image
   • Create a deployment in Kubernetes based on a template
   • Set the image once the pipeline is finished.

‍

You can monitor the Github actions workflow in mogenius on the build log in your application. After a moment, a new Pod will be created with your image and the deployment is complete!

‍

Step 4: Expose your Frontend

To make our frontend available from the internet, an external hostname is required. In Kubernetes this is solved with an ingress and a service. We can add both through the settings "Ports & Domain" of the application.

‍

• Add the internal and external port. For nginx this is 80:80.
• Activate the toggle "Expose".
• The form field for your hostname will appear. Enter the host that you want to use (e.g. myapp.com)
• Make sure that a DNS record exists for this domain that points to the external IP address of your cluster. You can find the IP address in your cluster settings in mogenius.

‍

That's it, your frontend is now live!

‍

4. Deploy the Backend (Express API)

Step 1: Create Backend Repo

In a new GitHub repo, scaffold an Express app. Here's a boilerplate for a basic Express app that you can use.

‍

// server.js - Node.js/Express Backend Code
const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
app.use(express.json());
let messages = [];
app.get("/messages", (req, res) => {
  res.json(messages);
});
app.post("/messages", (req, res) => {
  messages.push({ author: req.body.author, message: req.body.message });
  res.status(201).send("OK");
});
app.listen(3000, () => console.log("Server running on port 3000"));

‍

Step 2: Add a Dockerfile

# Dockerfile for Backend
FROM node:18-alpine
WORKDIR /app
COPY . .
RUN npm install
EXPOSE 3000
CMD ["node", "server.js"]

Just like with the frontend we'll add a Dockerfile to the repository to build our Docker image.

‍

Step 3: Create Backend Service via Pipeline Starter

Repeat the pipeline setup:

‍

• In mogenius, choose Pipeline Starter and select the repo that you want to deploy
• Once your container is deployed, go to Ports & Domain and add the container and service port. Expose it to create a hostname that you're frontend will target for requests (e.g. backend.myapp.com)

‍

5. Set Up the Database (MariaDB)

For this tutorial you'll be using a public MariaDB Docker image. Please note that this is not meant to run in production.

‍

Step 1: Add New Resource in mogenius

We can deploy images straight from any container registry with mogenius.

‍

1. In your mogenius workspace click Add Resource → Container image
2. Set a name and namespace for the MariaDB
3. As container image set: mariadb:10.11

‍

Step 2: Configure Environment Variables

In your deployment settings open environment variables. Add the following variables and make sure to define the variable MYSQL_PASSWORD as type Secret.

# MariaDB Environment Variables
MYSQL_ROOT_PASSWORD = rootpass
MYSQL_DATABASE = comments
MYSQL_USER = appuser
MYSQL_PASSWORD = securepass

‍

After saving your settings the pod will restart and the environment variables are available in the container.

‍

Step 3: Define the Port

Open Ports & Domains in your deployment settings and add the port 3306 for container and service port. Exposing your application is not recommended for security reasons - your backend container can connect to the database inside Kubernetes via internal hostname. The internal hostname of each application is [name]:[port], so for MariaDB in this case it's mariadb:3306.

‍

6. Connect Backend to Database

Clone the backend repository locally and open it in your IDE. We'll now connect backend and database in your code base.

‍

Step 1: Add MariaDB Client in Backend

Install the MariaDB client as an npm package in your Express application.

# Command to Install MariaDB Client
npm install mariadb

‍

Step 2: Use Connection Pool in server.js

Define a connection pool in your server.js. The connection details like Host, user, password, and database will be passed as environment variables in the next step.

‍

// server.js - Setting Up MariaDB Connection Pool
const mariadb = require("mariadb");
const pool = mariadb.createPool({
  host: process.env.DB_HOST,       // set this to the internal DNS of your DB service
  user: process.env.MYSQL_USER,
  password: process.env.MYSQL_PASSWORD,
  database: process.env.MYSQL_DATABASE,
  connectionLimit: 5,
});
app.get("/messages", async (req, res) => {
  let conn;
  try {
    conn = await pool.getConnection();
    const rows = await conn.query("SELECT * FROM messages");
    res.json(rows);
  } catch (err) {
    res.status(500).send(err.message);
  } finally {
    if (conn) conn.end();
  }
});

‍

Commit and push your changes to Github. The pipeline will be triggered and a new image of your backend application will be deployed to Kubernetes. Monitor the process in mogenius and once it's finished, proceed with the next step.

‍

Step 3: Define environment variables in the Backend deployment

Open your Express deployment in the mogenius workspace and go to Settings > Environment Variables. Define the environment variables DB_HOST, MYSQL_USER, MYSQL_PASSWORD (as a Secret), and MYSQL_DATABASE, matching the credentials that you set up in your MariaDB.

‍

7. Connect Everything and Test

Finally, we'll connect the frontend. Clone the frontend repository locally and open it in your IDE.

‍

Update your frontend script.js to call the backend:

// script.js - Fetching Data from Backend
fetch("https://backend.myapp.com/messages")
  .then((res) => res.json())
  .then((data) => console.log(data));

‍

Commit and push your changes to Github. Monitor the workflow in mogenius and once the new frontend image is deployed, open your external hostname myapp.com. You should see the request in the logs of your backend Pod.

‍

That's it! With just a few steps you've successfully created a boilerplate setup of a microservice architecture, deployed it to Kubernetes, and enabled a CI/CD pipeline.

‍

What’s Next?

Continue development:

‍

• Just push to GitHub — mogenius builds and redeploys your changes.
• Pipelines are auto-triggered on every commit.

‍

Improve resilience and quality:

‍

• Add health checks and readiness probes
• Define resource limits (CPU, memory)
• Use Secrets & KeyVault for safe configuration
• Monitor your services via the built-in observability tools

‍

Ready to Go Deeper?

Now that you’ve deployed your fullstack app on Kubernetes with mogenius, there’s so much more you can do to harden, scale, and polish your setup. These reads will help you take the next steps with confidence:

‍

Start strong

‍

• ‍Quick Start with mogenius:
  ‍New to mogenius? This guide walks you through everything from cluster connect to deploying your first service — all in under 10 minutes.

‍

Improve reliability

‍

• ‍Kubernetes Health Checks:
  ‍Learn how to implement readiness and liveness probes so your services recover faster and stay healthy — especially in production.

‍

Secure your setup

‍

• ‍Enhancing Kubernetes Security
  ‍Explore how to use RBAC, NetworkPolicies, and PodSecurityPolicies to lock down your workloads the right way — and how mogenius makes this easier.

‍

• ‍Secrets and KeyVault
  ‍See how to manage environment variables and credentials securely using mogenius KeyVault and Kubernetes Secrets.

‍

Get production-ready

‍

• ‍Introducing Helm for Kubernetes
  ‍Discover how to use Helm charts to simplify deployments, manage versions, and standardize your infrastructure — especially helpful for growing teams.

‍

• ‍Best Practices for Kubernetes YAML
  ‍Even if you use mogenius UI, it helps to know what great configuration looks like. This guide breaks down smart patterns for clean, scalable deployments.

‍

Summary

With mogenius, you deployed a fullstack microservice app — frontend, backend, and database — to Kubernetes, using GitHub and pipelines. You didn’t write a single Kubernetes manifest or need direct cluster access.

‍

From GitHub commit to production-ready deployment in minutes.

‍