Deploy a React App to SAP BTP Cloud Foundry

[MaheshSirsat1708]

Introduction

While working on a recent requirement, we needed to deploy a simple React application to the SAP Business Technology Platform (BTP) Cloud Foundry environment.

In this blog, we will share a step-by-step guide to creating a basic React application and deploying it to the SAP BTP Cloud Foundry environment. This tutorial is beginner-friendly and focuses on setting up an application without authentication, making it an ideal starting point before adding advanced features.

Step 1: Create a React App

Creating a new React app using the command:

npx create-react-app myreactapp

This will create a folder named 'myreactapp' with all necessary files and configurations for a basic React app.

Navigating into the project directory using:

cd myreactapp

Step 2: Run the React App Locally

I ran the following command in the project directory to make sure the app was working:

npm start

This starts the development server and opens the React app in our default web browser.

Step 3: Build the React App for Production

To prepare our app for deployment, we create a production build using:

npm run build

This command generates a 'build' folder that contains optimized and minified files ready for deployment.

Step 4: Create a manifest.yaml File

Creating a file named 'manifest.yaml' in the project root directory with the following content:

---
applications:
  - name: myreact app
    memory: 128M
    buildpacks:
      - staticfile_buildpack
    path: build

This file defines the application name, memory allocation, buildpack type, and specifies the path to the build directory.

Step 5: Login to Cloud Foundry and Deploy

Login to Cloud Foundry environment using:

cf login

Once logged in, selecting correct organization and space. Then deploy your application using:

cf push

Step 6: Access App from SAP BTP Cockpit

Open SAP BTP Cockpit and navigate to: Cloud Foundry → Spaces → [ Space] → Applications. We select our deployed application and, in the overview tab, find the Application Routes section. Clicking the provided URL opens our React app.

As no authentication is configured, the app will open directly without requiring login.

Project Folder Structure

After creating and building ourReact application, your project directory will contain the following files and folders:

README.md
build
manifest.yaml
node_modules
package-lock.json
package.json
public
src

- `build`: Contains the production-ready version of your app.
- `manifest.yaml`: Deployment configuration for Cloud Foundry.
- `node_modules`: Installed project dependencies.
- `package-lock.json` and `package.json`: Dependency and project metadata.
- `public`: Static files like `index.html`.
- `src`: Your React source code.

In this tutorial, we covered the entire journey of creating a React application locally, building it for production, and deploying it to SAP BTP Cloud Foundry. We now have a working application accessible from the cloud without any authentication requirements.