Introduction

If you’ve ever wanted to deploy a full-stack application without worrying about managing servers or scaling infrastructure, Google Cloud Run is a game-changer. In this post, we’ll walk through deploying a modern React frontend and Node.js backend using Cloud Run — Google Cloud’s fully managed container platform. Whether you're building a personal project or a production app, Cloud Run helps you go live quickly.

Architecture Overview

Here’s a simplified flow of how the app works:

  1. Users access the frontend hosted on Cloud Run.
  2. The frontend makes API requests to the backend, also hosted on Cloud Run.
  3. The backend processes the requests and sends back responses (JSON data).
  4. Cloud Run handles traffic, scaling, and security for both services.

What We’re Building

In this guide, we’ll deploy a full-stack web application consisting of a React frontend and a Node.js (Express) backend to Google Cloud Run. The application demonstrates a common architecture used in modern web development: a decoupled frontend served statically and a backend API handling business logic and data processing.

Here’s a quick breakdown of the components:

Frontend (React): Built using React, this single-page application (SPA) provides a responsive and dynamic user interface. It communicates with the backend using HTTP requests.

Backend (Node.js + Express): A RESTful API built with Node.js and Express. It handles requests from the frontend, processes data, and returns responses. This could include authentication, database interactions, or external API integrations.

We will package these components into a container and deploy them to Cloud Run, a fully managed, serverless platform that automatically scales based on demand.

Setting Up the Project

Before deploying to the cloud, let’s briefly go over how the project is structured locally. This step ensures your app is organized in a way that’s easy to containerize and deploy.

We can use
Create a React frontend (create-react-app or Vite).
Create a Node.js Express backend.

Sample image of project structure:

react node code

React Frontend:
We can use Create React App or Vite, in this example im going with Create React App, the only diffrent is with build command.

npx create-react-app client

or

npm create vite@latest client

Node.js Backend

The backend is a lightweight API built with Express. It handles routing, business logic, and communicates with databases or external APIs as needed.

mkdir server && cd server
npm init -y
npm install express

During local development you need to handle CORS as React and Node are separated.

Connecting the Two

During local development, the frontend communicates with the backend using proxy settings or environment variables. When deployed together in a container, both parts work seamlessly since they’re served from the same origin.

Containerizing the App

Before we can deploy our application to Cloud Run, we need to package it into a Docker container. Containerization allows us to bundle the application code, dependencies, and runtime environment into a single, portable image that can run anywhere — whether on your local machine, in CI/CD pipelines, or in the cloud.

Create a Dockerfile in root working folder.

Example Dockerfile for Node.js + React.

# --- Frontend Stage: Build React App ---
    FROM node:20 AS build-frontend

    WORKDIR /app/client

    # Copy and install dependencies
    COPY client/package.json client/package-lock.json ./
    RUN npm install

    # Copy the rest of the frontend code
    COPY client/ .

    # Build the frontend
    RUN npm run build

    # --- Backend Stage: Setup Express Server ---
    FROM node:20-slim 

    WORKDIR /app/server

    # Copy backend package.json first and install deps
    COPY server/package.json server/package-lock.json ./
    RUN npm install

    # Copy backend code
    COPY server/ .

    # Copy built frontend into backend
    COPY --from=build-frontend /app/client/build ./build

    # Expose server port
    EXPOSE 5000

    # Start the server
    CMD ["node", "server.js"]

Build Docker image:

docker build -t /full-stack-app .

Push image to Docker Hub:

docker push /full-stack-app

You need to push image to a docker hub as Cloud Run will try to pull image and start container.

Deploying to Cloud Run

With our application containerized, the next step is deploying it to Google Cloud Run

Steps to Deploy:

  1. Set up Google Cloud Project & enable Cloud Run.
  2. Enable Cloud Run API and ensure billing is enabled on your GCP project.
  3. Push your container image to Artifact Registry or Container Registry or Docker Hub.
  4. Deploy using the gcloud CLI or Cloud Console, specifying options like region, service name, and whether the app should be publicly accessible.

gcloud CLI Command to deploy:

gcloud run deploy my-fullstack-app \
  --image docker.io/your-dockerhub-username/full-stack-app \
  --platform managed \
  --region YOUR_REGION \
  --allow-unauthenticated

service name --> my-fullstack-app
image --> docker image URL
platform --> cloud run managed
region --> you can select us-central1
allow-unauthenticated --> mean the access is public anyone can access website.

Testing and Accessing the App

Once deployment is done you can access the public URL from Cloud Run.

Conclusion

In this guide, we walked through:

  • Setting up a React frontend and Node.js backend.
  • Containerizing both parts into a single Docker image.
  • Deploying the app to Google Cloud Run.

Let me know for any query you have :)