DEV Community: Raghad

How to Deploy a Full-Stack React & Node.js App on Google Cloud Run.

Raghad — Sun, 04 May 2025 18:40:25 +0000

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:

Users access the frontend hosted on Cloud Run.
The frontend makes API requests to the backend, also hosted on Cloud Run.
The backend processes the requests and sends back responses (JSON data).
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 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

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 <DOCKER_USERNAME>/full-stack-app .

Push image to Docker Hub:

docker push <DOCKER_USERNAME>/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:

Set up Google Cloud Project & enable Cloud Run.
Enable Cloud Run API and ensure billing is enabled on your GCP project.
Push your container image to Artifact Registry or Container Registry or Docker Hub.
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 :)

Deploy MERN Stack in Digitalocean (2024 version)

Raghad — Fri, 19 Jul 2024 10:02:51 +0000

What is Digitalocean?

Digital Ocean is a cloud computing provider that basically offers you a virtual machine (a server) to host your web application.

What do you need?

A basic MERN application (Mongo, Express, React, Node)

In case this is your first time deploying to production, it is better to have a domain name but it is not essential as you can access your website after deployment with an IP address.

Getting Ready:

1- If you do not have an account create one in Digitalocean https://www.digitalocean.com

2- Once you log in you will get a credit of around 300$ or 200$ you can use it for 2 months and we can use it for creating droplets.

3- Create a project as per below after that you will see the project name in the dashboard.

4- Create a VPC under networking tap this will create a private network so you can access all resources with private IP addresses like DBs droplets and load balancers.

In the left corner, select networking then select VPC Network.
Select the region where you want your VPC better to select one that is near to your country.
Keep the default IP address to be generated by digitalocean.
Choose a name and description.
Create a VPC network.

5- Now lets create a droplet(server) to host our application.

In the left corner select Droplets then create Droplet.

Now you have two options either you create the server and install all dependencies in the server or you can select the stack from the marketplace both ways are correct but if you just starting the marketplace could be a bit costly so this tutorial will go with creating the server installing all dependencies.
Choose a Region better near your county in my case I will go with Frankuak and below you will see the VPC you just created so this means our droplet (server) will be in the same network.

Here I will go with Ubuntu, or if you want to go with markeplace click it and search for mern.

In this tutorial, I will select the shared CPU and regular disk with 4$ per month in a real production application you need to select the base in your needs.

I will not add any Additional Storage or backups as this is only for testing and learning.
Choose Authentication Method I will go with a password and keep this password with you as you will use it for login to the server.
Finalize Details by selecting how many droplets you want I will go with one if you want two you can create it and will have the same configuration.

Once all set click on your project name you see your droplet click on it you will see more details such as public IP address, Private IP, and console.

Greate Now we create the server what we need to do is log in to this server and there are many ways to log in either use digitalocean console or if you are a Mac, Linux user you can use your terminal if you windows user you need to install Putty in this tutorial I will go with digitalocean console

Once you log in you might be asked to enter the password for root here just use the same password where you created the droplet.

Now you log in as a root@yourDroplteHostName, as a best practice better to not use the root user and to create a user and add this user to sudo group.

We need to run the below commands:

Create a user in ubuntu and give it a password.

adduser sara.

Once you create the user you want this user to perform root commands to do this add the user to sudo group.

usermod - ag sudo sara

To see groups belong to Sara

groubs sara

Now sara is in the sudo group we can perform root commands, to switch to Sara user use the below command.

su sara

Now we need node js if you type node -v is not found.

sudo apt update && sudo apt upgrade

sudo apt install nodejs

Check out this link for more details:

(https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04)

Now let's create a directory to place our application let's create in root directory.

cd /

mkdir mern-apps

cd mern-apps

Now we are in mern-app directory you can do pwd to check path, what we need to do is to git all our code files we can clone any node/express app from github.

Once you clone the project, we need to install node dependencies and prepare the frontend build for production (the react app).

to install node modules:

npm i

To create a frontend build ready for production.

npm run build

Notice the build has the index.html which we will tell nginx(webserver) to root all requests to this file.

Now if you try to copy the public IP in Google Chrome this won't work,
we need to install two things Nginx to accept requests on port 80 and PM2 which is node processing manager that will ensure running the node without logging in to the server.

Install PM2:

sudo npm i -g pm2

Install Nginx:

sudo apt install nginx

We need also to enable the firewall in the server to access the ports right now to check the firewall status is inactive.

to enable

sudo ufw enable

By default, if you enable the firewall all ports are blocked.

We need to enable three ports to access the server ports 80, 443, 22

sudo ufw allow ssh

sudo ufw allow http

sudo ufw allow https

Now if you copy the public IP and run it in Chrome you see the default Nginx webpage.

Great now we are able to install Nginx but we need our front-end page, not the default Nginx web page to do this let's see the nginx config file and change it.

cd /etc/nginx/sites-available

If you do ls -ltr you will see the default file which has all the configuration for the nginx server let see what is inside and change it to our needs.

With nano command you can view and change the file content, the most two important changes are the root and location.

sudo nano default

In Server block change the default root which was for default web server page change it to your index file page in my front-end app it looks like this

root /mern/JWT-/frontend/dist;
if you run the build with react app you get /build but since i used vite as a front-end /dist is the folder name.

if you have an api with you need to add the location of your api.

location /api/ {
    proxy_pass http://localhost:8000; # Your Node.js/Express server address and port
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

Sample of default file

Now to save changes of default file click controll x Y enter.

Since we change the nginx config file we need to restart nginx

sudo systemctl nginx restart

Now refresh and you will see your web page out.

Please dont hesitate to ask any Questions.

CodePush with ReactNative for Android.

Raghad — Fri, 27 Oct 2023 17:06:40 +0000

What is CodePush?

CodePush is an App Center cloud service that enables React Native developers to deploy mobile app updates directly to their users without going through store approvals. With codepush, you can update javascript code by fixing bugs and applying new styles and new feature.

Note that stores Apple and Google will let you apply the changes in case you are not changing the whole app and not changing any native Android IOS code only javascript code.

In this post will cover

Creating an account in AppCenter and a RN project.
Integrating codepush with react native.
Building a sample app and deploy the changes to AppCenter CodePush.

First lets understand how codepush is working with the image below.

If you have any changes a normal way is to upload them to stores and once stores approve the application then you can download the app but what if you got a crash bug and you need immediately to update the app CodePush can help you here. What code push is doing is will check if any Javascript code changes the Javascript bundle if there is AppCenter will automatically apply the changes.

Creating an account in AppCenter.

Click here to register to AppCenter once done a you will see the below page click on Add new in the right top corner then Add new app.

Select the Name of your App, Release Type, OS and Platform then click on Add new app.

you will get something like this lets go now and and create a RN app.

Setup React Native Project.

npx react-native@latest init AwesomeProject
cd AwesomeProject

Add AppCenter CLI and SDK to the project.

npm install -g appcenter-cli
npm install appcenter appcenter-analytics appcenter-crashes --save-exact

Create a new file with the name appcenter-config.json in android/app/src/main/assets/ with the following content:

{
  "app_secret": "{Your app secret here}"
}

if you do not have the assets folder you can create one

Modify the app's res/values/strings.xml to include the following lines:

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>

Add CodePush

npm install --save react-native-code-push

After installing all dependencies run this command

npm run android

Plugin integration

Plugin installation and configuration is different based on your react native version, so perform the following setup steps depending on your react native version.

React native versions

Next Wrap your component with CodePush in App.js , there are many options to wrap with your component

import CodePush from "react-native-code-push";

let MyApp: () => React$Node = () => {
}

MyApp = CodePush(MyApp);

Now we are done with integration part you can change the default react native app code styles to what ever you want, once you are satisfied you can build the release version of your app.

To release an APK check this

The release build will take time as we did many native code changes.

Once the release done go to android\app\build\outputs\apk\release
and install it in your Android phone.

Now lets update our JavaScript code change it to what ever you want, once you are satisfied lets release an update but now without releasing a new APK but a new update to AppCenter.

Release an update with the command

appcenter codepush release-react -a ownername/projectname ** -d **environment

The ownername is the owner name in AppCenter, projectname ** is the project name in AppCenter, environment either **staging **or **production base on your deployment key.

If you are not getting the update:

Make sure you applied all required changes for CodePush dependencies.
Make sure the keys are correct, and you deploy production/staging correctly.

I hope you enjoyed :)