Deploy your ReactJS application in Cloud Foundry

Hello Everyone,

In this blog, we will discuss how you can deploy your ReactJS application on SAP Cloud Foundry.

React.js in layman’s terms

React is an open-source JavaScript library for building user interfaces. You can build beautiful web applications using React. One of the reasons why it’s so popular today as the web development is growing faster is the strong community of developers who make open-source packages and powerful libraries updating it with great features.

Assumption

This blog assumes that you have already created a React application and are looking for to deploy your application in SAP Cloud Foundry.

Let’s get started…

1. Running React Application

First, ensure that your application is running as expected. For this, open a command prompt on your computer.

Navigate to your application folder and type the below command:

yarn start ( npm start)

If you are new to React and would like to try running a basic application on cloud Foundry, create your basic react application using below command

create-react-app my-app-name

“my-app-name” is your application name. For more details on how you can create your react application can be found in the link

Now, change your current directory to the “my-app-name” directory created, so you can run “yarn start ( npm start)” to start the application and check if everything is all right.

2. Install

• • Change your current directory to “my-app-name” directory which you created
  • Run the below command to install all the libraries

npm install

3. Creating Manifest.yml

You must have a manifest.yml file to determine the Cloud Foundry app configurations. Also, we’ll need to use a static file buildpack to serve the React app, for that reason create a Staticfile file.

• • manifest.yml file in the project root directory with the following content:
    
---
applications:
- name: your-app-name
path: build/
instances: 1
buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
memory: 256M


• A short explanation about what is each line on the manifest.yml:
  • Name: Name of your React application
  • Path – When you build your app, all bundled and minified files are created in build/ folder. In CF environment we want to expose only these files, so we’ll specify this folder as the root directory for the app;
  • Instances – How much container instances your app will have; We’ll leave it as default value 1;
  • Memory – How much memory your app runtime will use.
  • Buildpack – The buildpack used to run the CF app. We are using staticfile-buildpack here
• Run the command npm run build

4. Creating Staticfile

• Once the build runs successfully as shown below,

• • Create a Staticfile with the following content in the build folder as shown belowpushstate: enabled

• A short explanation about why Staticfile is needed:
  • If you create a file named Staticfile and locate it in the build directory of your app, Cloud Foundry automatically uses the Staticfile buildpack when you push your app.

• Also, be careful, the Staticfile gets deleted every time you build the project.

5. Deploying your application in SAP Cloud Foundry

• Login to SAP Cloud Platform using Command Line Interface (CLI), choose your org. Follow the tutorial from developers.sap.com to install the Cloud Foundry Command Line Interface to login.
• Once login is successful, you will be prompted to select your org (if you belong to multiple org)

• Now all you need is to be able to push the application to the cloud.
• Change your current directory to “my-app-name” directory created (if it is not already there)
• Write the command cf push as shown below:

Yayy!! Your application is deployed on Cloud Foundry. The link corresponding to routes is the link to access your application.

Points to note:

Manifest.yml file is important. Based on how heavy your application is, you can change the memory size.

Staticfile has to be in the build folder. Also, be careful, the Staticfile gets deleted every time you build the project. Remember to add it each time after you build the project. Each time your root link changes from xxx.ondemand.com to xxx/ondemand.com/Home or any child pages, and you see an error “Nginx 404 on page reload on cloud foundry” It means that your Staticfile is not in build folder.